CSS笔记

一.水平居中

行内 inline 元素： text-align:center;
块级block元素 ：margin:0 auto;
absolute 定位元素： left:50%+margin-left 负值

二.垂直居中：

行内inline元素：line-height 的值等于 height的值

absolute定位元素 ：

1.top:50%+margin-top 负值
2.top:50%;left:50;+transform :translate(-50%,-50%)
3.兼容性好 top:0;left:0;right:0;bottom:0; + margin:auto;

三.relative 和 absolute定位
relative 定位 相对于 自身 定位
absolute 定位 相对于 最近的一层父级定位元素 定位

定位元素：relative absolute fixed 或body

四.flex布局
容器的属性：
1.项目排列方向flex-direction:row(默认值) | row-reverse | column | column-reverse;
2.项目换行flex-wrap： nowrap（默认） | wrap | wrap-reverse;
3.项目排列方向+项目换行flex-flow：<flex-direction> <flex-wrap>;
4.项目的水平对齐方式justify-content：flex-start | flex-end | center | space-between | space-around;
5.项目的占位一行垂直对齐方式align-items： flex-start | flex-end | center | baseline | stretch;
6.项目的占位多行垂直对齐方式align-content： flex-start | flex-end | center | space-between | space-around | stretch;
项目的属性：
1.项目的排序order：0（默认值）项目的排列顺序。数值越小，排列越靠前，默认为0
2.项目的放大flex-grow:0（默认值）属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
3.项目的缩小flex-shrink：项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
4项目的空间大小.flex-basis:auto（默认值）|<length>属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
5.flex：[ <'flex-grow'> <'flex-shrink'> <'flex-basis'> ]是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
6.单个项目对齐方式align-self:auto | flex-start | flex-end | center | baseline | stretch

五.BFC

Block formatting context 块级格式化上下文
作用：形成独立的渲染区域
内部元素的渲染不会影响外界
形成BFC 常见的条件
1.浮动元素 float 不是none
2.绝对定位元素 position 是absolute或者fixed
3.块级元素 overflow 不是visiable
4.flex元素
5.display:inline-block或者table-cell 元素
应用场景

1.解决浮动元素令父元素高度坍塌的问题，清除浮动，给父元素添加BFC条件
2.解决布局自适应的问题

未完待续