[toc] ## 杂集 [杂集](https://www.kancloud.cn/book/cris/js/edit) ## white-space - 如何处理空白 - 控制文本换行或不换行 | 值 |描述 | | --- | --- | |normal |默认。空白会被浏览器忽略 | |pre |空白会被浏览器保留。其行为方式类似HTML中的<pre>标签 | |nowrap |文本不会换行，文本会在同一行上继续，直到遇到\<br\> 标签位置 | |pre-wrap |保留空白符序列，但是正常地进行换行 | |pre-line |合并空白符序列，但是保留换行符 | |inherit |规定应该从父元素继承white-space的值 | ## letter-space 可参与动画(任何数值皆可参与动画) ## padding与百分比与溢出 假设我定义某元素的宽度为父元素的50%，而父元素的宽度是可变化的，我想让该元素的高度等于其宽度，如果不用js，要如何实现？ ``` <style type="text/css"> #container { width: 80%; height: 500px; } .attr { width: 50%; height: 0; padding-bottom: 50%; background-color: #008b57; } </style> <div id='container'> <div class='attr'></div> </div> ``` 文中作者采用的方法是利用了padding-top/padding-bottom属性,根据他的解释,`padding'如果是百分比的话,那这个百分比是相对于其父元素的宽度而言的 ## text-transform |值 |描述 | | --- | --- | |none |默认。定义带有小写字母和大写字母的标准的文本 | |capitalize |文本中的每个单词以大写字母开头 | |uppercase |定义仅有大写字母 | |lowercase |定义无大写字母，仅有小写字母 | |inherit |规定应该从父元素继承test-transform属性的值 | ## box-shadow |值 |描述 | | --- | --- | |horizontal-shadow |必须。水平阴影的位置。允许负值 | |vertical-shadow |垂直阴影的位置。允许负值 | |blur |可选。模糊距离 | |spread |可选。阴影的尺寸 | |color |可选。阴影的颜色。 | |inset |可选。将外部阴影(outset)改为内部阴影 |