css走过的坑

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

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标签中的第一个字