系统总结一下CSS，解决没认真学过CSS的历史遗留问题。
CSS盒状模型三大主属性：display属性 + position属性 + float属性
一、display：
display: none; 与 visibility: hidden; 的区别：
- display:none;会让元素完全从渲染树中消失，渲染的时候不占据任何空间；visibility: hidden;不会让元素从渲染树消失，渲染师元素继续占据空间，只是内容不可见
- display: none;是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示；visibility:hidden;是继承属性，子孙节点消失由于继承了 hidden，通过设置 visibility: visible;可以让子孙节点显式
- 修改常规流中元素的 display 通常会造成文档重排。修改 visibility 属性只会造成本元素的重绘
- 读屏器不会读取 display: none;元素内容；会读取 visibility: hidden 元素内容
display可以让块状元素与内联元素互相转换
把列表项显示为内联元素：
li {display:inline;}把span元素作为块元素：
span {display:block;}
关于visibility：
visibility 还可能取值为 collapse 。
当设置元素 visibility: collapse 后，一般的元素的表现与 visibility: hidden 一样，也即其会占用空间。但如果该元素是与 table 相关的元素，例如 table row、table column、table column group、table column group 等，其表现却跟 display: none 一样，也即其占用的空间会释放。
二、Position(定位)
position 属性的五个值：
static 定位
HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
静态定位的元素不会受到 top, bottom, left, right影响。
fixed 定位
元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动。
relative 定位
相对定位元素的定位是相对其正常位置。
absolute 定位
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>。
sticky 定位
sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。
扫一扫
7153
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
