css盒模型
1.内联元素
设置宽高无效、margin左右有效上下无效、padding都有效
会被当做字体所以内联之间有间隙 父级元素要设置font-size:0;
内联元素：a、b、button、em、img、input、lable、span、strong、select、textarea
2.IE/W3C盒模型
IE盒模型：元素的width= padding+border+content
W3C标准盒模型：元素的width不包括padding+border
互相转换方法：box-sizing: border-box/content-box
既然css3出了这个属性可见w3c自己也意识到了标准盒模型不便于实际开发
坑总结：
1.用浮动方法分左右两栏时注意：左边用浮动 右边margin负值 外层一定记得overflow并清除浮动
2.对于子元素的margin值会影响父元素时，解决方法：父元素加border或padding或overflow
3.div包含<img/>时，图片下方会出现空隙，解决方法：img加上display:block 或 img父级元素加font-size: 0
4.传统新闻列表 span加右浮动的时候话要放到文字的前面，如果要隐藏超出的文字部分，需要组合使用 overflow: hidden; /* 超出容器时剪裁 */ text-overflow: clip; /* 文本超出容器时省略 */ white-space: nowrap; /* 段落中文本不换行 */
5.设置字间距后 文字不能居中 解决方法：letter-spacing: 20px;text-indent: 20px;text-algn:center;
6.文字环绕图片只需要给图片加float即可再用padding调整位置（浮动的设计初衷就是为了文字坏绕图片）
7. .box span:nth-child(1) 获取box容器下的第一个span标签
8. .box p:first-letter 获取box容器下的p标签中的第一个字