入门不难精通难——CSS

mess

在调试CSS的时候，常常会出现属性互相影响的情况，like this

image

为什么？——没有规律，不正交

怎么学？——背文档 or 试

• margin和border

  1. 兄弟元素之间的margin会合并

     • 在两兄弟间添加一个元素，给该元素加一个border，margin会分开（示例）

     • 在两兄弟间添加一个元素，给元素设置display:table/flex属性，margin会分开（示例）

  2. 父子元素之间的margin合并（示例）

     • 子元素margin和父元素border/padding会相互影响

     • 子元素margin和父元素display/overflow会相互影响

• 小圆点和display（示例）

  <li>元素默认display: list-item，如果将其display设为其它值，则小圆点就消失了。

• position: absolute和display: inline（示例）

  可以看到display设置成inline的元素，在使用绝对定位后计算出来block（补充：inline-block也会变为block，如果使用inline-flex则会变成flex，说明只要使用了position: absolute，任何display设置有inline的都会被转换）

  image

• transform和position: fixed（示例）

• float和文字（示例）

  float最初的设计目的是为了图文混排，因此文字会感知float元素，但float对其它元素位置不会产生影响，因为float元素脱离了文档流。而使用position: absolute的元素也脱离了文档流，但其它盒子和文本都会忽略它。

参考内容：CSS问什么这么难学？