Css中部分知识点整理【笔记整理】

CSS中塌陷现象：
两个盒模型中未设置行内属性或者浮动 当上方元素指定了margin-bottom ，下方元素指定了margin-top时
这两个margin就会发生合并，塌陷尺寸是两个值中较大的一个
发生塌陷现象不止在兄弟元素中出现，父子关系中也会发生，当父级元素没有设定padding-top或者border-top时（等于0同于没有设定），子元素margin-top和父级元素的margin-top合并，margin最终取决于最大值

布局模型
流动模型： 默认状态下页面HTML元素是按流动模型布局网页内容
特征：款及元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，默认状态下块状元素宽度100%，也就是每一块块状元素占据一行空间【div ,p,li,h1,table,ul,hr】
流动模式下，内联元素都会在所处的包含元素内从左到右水平分布显示【span,img,a,input,button,textarea】

浮动模型：任何元素默认状态下都是不浮动，可以通过float设定，此时元素会在父级元素内浮动展示
此情况避免了块状元素独占一行的情况，唯一缺点，父级元素的高度无法根据内容的大小自适应高度，因为设置float之后元素是脱离当前文档流的

层布局模型：
层模型主要有三种形式，其中absolute和fixed可以使元素脱离文档流

 

用 CSS 隐藏页面元素有许多种方法

可以将 opacity 设为 0、将 visibility 设为 hidden、将 display 设为 none 或者将 position 设为 absolute 然后将位置设到不可见区域

Opacity

该属性的意思是检索或设置对象的不透明度当他的透明度为0的时候,视觉上它是消失了,但是他依然占据着那个位置,并对网页的布局起作用

Visibility
该属性类似opacity属性，该属性值为hidden的时候，元素将会隐藏，也会占据着自己的位置，并对网页的布局起作用，与 opacity 唯一不同的是它不会响应任何用户交互

Position
该属性的意义就是把元素脱离文档流移出视觉区域，添加该属性后既不会影响布局，又能让元素保持可以操作。应用该属性后，主要就是通过控制方向（top,left,right,bottom），达到一定的值，离开当前可是页面。

 

//TODO 

整理 圣杯布局//CSS3中 display:flex 用法 及图文示例对比描述等...