CSS难点

---

CSS不正交

1. 各属性间互相影响
   • margin vs border：margin默认情况下会合并，如父子margin合并，给父元素加border或padding后可解决，display：inline-block/flex/table/table-cell、overflow：hidden可使其分开
   • 小圆点 vs display 如ul>li有小圆点，因为其display默认是list-item，改为block，inline等其他值则小圆点消失
   • position:absolute vs display:inline/inline-block，设置了绝对定位后即使设置display为这两个值也无效，会被改成block
2. 各元素间互相影响
   • position:fixed vs transform 设置前者本来是相对窗口定位，但若给父元素transform：scale（），则子元素相对父元素定位
   • float vs inline元素 float不是真正的浮动，其最初的设计也是为了图文混排，所以后面元素中的文本是可以识别出浮动元素的

CSS常用功能

1. 居中
   • 水平居中
     • 块级元素：若子元素宽度不定，设置左右margin相同
       若子元素宽度确定，设置左右margin为auto
     • 行内元素：在父元素中设置text-align:center
   • 垂直居中
     • 父元素高度不定，设置其上下padding相同
     • 父元素高度确定，IE设display:table，chrome设display:flex
2. 用CSS3 generator工具自动生成CSS~
   。。。后续继续补充