CSS常用属性

(1) *block（区块）

行高 line-height:数值 | inherit | normal;
字间距 letter-spacing: 数值 | inherit | normal;
词间距 word-spacing: 数值 | inherit | normal;
空格 white-space: pre(保留) | nowrap(不换行) | normal;

/*表格宽度自适应*/
th {
white-space: nowrap;
}

显示 display:

none; /*不显示，使用的场景非常多*/
block; /*把内联标签变成块级标签*/
inline; /*把块级标签变成内联标签*/
list-item; /*列表项*/
run-in; /*追加部分*/
compact; /*紧凑*/
marker; /*标记*/
table;
inline-table;
table-raw-group;
table-header-group;
table-footer-group;
table-raw;
table-column-group;
table-column;
table-cell;
table-caption; /*表格标题*/

(2) *box（盒子）

宽度 width: 长度 | 百分比 | auto;
高度 height: 长度 | 百分比 | auto;
清除 clear: none | left | right | both;
边界 margin: 上 右 下 左 ;
填充 padding: 上 右 下 左 ;
定位 position: absolute | relative | static;
透明度 visibility: inherit | visible | hidden;
溢出 overflow: visible | hidden | scroll auto;
裁切 clip: rect(12px,auto,12px,auto)

(3) float（漂浮）

漂浮 float: left | right | none; 在页面布局的时候用的最多

常见用法

<div style='float:left;width: 50%;' >div1</div>
<div style='float:right;width: 50%;' >div2</div>

一个问题

子标签使用了float时候，父标签的样式失效

<div style='background-color:red;'>
    <div style="float: left">div1</div>
    <div style="float: left">div2</div>
</div>

解决方案一：clear: both

<div style='background-color:red;'>
    <div style="float: left">div1</div>
    <div style="float: left">div2</div>
    <div style="clear: both;"></div> <!--加上clear：both之后就正常了-->
</div>

解决方案二：clearfix

<div style='' class="clearfix">
    <div style="float: left">div1</div>
    <div style="float: left">div2</div>
</div>

.clearfix:after{
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}