本文共 1145 字，大约阅读时间需要 3 分钟。
显示与隐藏
标签 | 属性 | 值 | 效果 | 区别 |
css的style | display | none | 元素不可见 | 不占页面空间 |
css的style | visibility | hidden | 元素不可见 | 占页面空间 |
display的三个属性值显示效果
属性 | 值 | 效果 |
display | inline | 显示为内联元素 |
display | block | 显示为块级元素 |
display | inline-block | 显示为行内块级元素 |
overflow内容溢出
属性 | 值 | 效果 |
overflow | visible | 可见 |
overflow | hidden | 隐藏 |
overflow | scroll | 滚动 |
overflow | auto | 自动（最优） |
float浮动
属性 | 值 | 效果 |
float | none | 不浮动 |
float | left | 向左浮动 |
float | right | 向右浮动 |
子元素浮动不能超出父元素的范围
兄弟元素设置相同浮动效果时，会自动进行排列，排列超出页面最大宽度会自动换行
兄弟元素前一个未设置浮动，而后一个设置，后面元素浮动不能超过前面兄弟元素
高度塌陷
* 块级元素高度 = 所有子元素高度 + padding + border
* 由于没有给父级元素设置高度 ，当子级元素设置浮动时 ， 脱离了文档流 ， 导致父级元素高度丢失效果称为高度塌陷
* 高度塌陷问题解决 —— 开启BFC （block formatting context）块级格式化上下文环境
* BFC特性：
- 文档流中的元素不会被浮动的元素所覆盖
- 子元素设置外边距时，不会传递给父元素
- 元素可以包含浮动的子元素
* 怎样开启BFC：
- 设置浮动（float）
- 设置元素显示为行内块级元素（inline-block）
- 将元素内容溢出设置为非visible值（hidden）
- 设置元素为绝对定位（position）
- 在所有子元素后设置一个子元素，并设置clear属性为both
position
属性 | 值 | 定位位置 （相对偏移量） | 效果说明 |
position | static | 默认 | 静态定位 |
position | absolute | top/right/bottom/left | 绝对定位 |
position | relative | top/right/bottom/left | 相对定位 |
position | fixed | top/right/bottom/left | 固定定位 |
区别
类型 | 是否脱离文档流 | 情况描述 |
| 绝对定位 | √ | 1.父级为body，相对于页面 2.父级不为body，父级未开启定位，子级相对于页面 3.父级不为body，父级开启定位，子级相对于父级 |
相对定位 | X | 相对于元素本身位置，与父级无关 |
固定定位 | √ | 相对于页面，一种特殊的绝对定位 |
转载地址：http://nrkkz.baihongyu.com/