入门不难精通难——CSS

2018-10-18 本文已影响0人 TraderNayuta

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的元素也脱离了文档流，但其它盒子和文本都会忽略它。