position(定位)

relative

• 绝对定位，相对于自己本改有的位置进行移动

absolute

• 相对定位，相对于父级有 position 属性定位 进行定位

display

inline

1. 使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行
2. 不能更改元素的height，width的值，大小由内容撑开
3. 可以使用padding，margin的left和right产生边距效果，但是top和bottom就不行

block

1. 使元素变成块级元素，独占一行，在不设置自己的宽度的情况下，块级元素会默认填满父级元素的宽度
2. 能够改变元素的height，width的值
3. 可以设置padding，margin的各个属性值，top，left，bottom，right都能够产生边距效果

inline-block

• 结合了inline与block的一些特点，结合了上述inline的第1个特点和block的第2,3个特点.

float(浮动)

• 脱离普通流，左右移动直至它的外边缘到包含框或另一个浮动框的边缘
• 各种浮动问题，比如父级高度坍塌
• 清除浮动方法：
  清除浮动：[clear 可以清除外面的浮动对自己的影响]
  1. 浮动元素的末尾添加空元素，设置 clear:both
  2. {父}元素设置 overflow 来闭合浮动
  3. {父}元素使用伪元素：after

        xx:after{
		    display:block
			height:0;
			content:" ",
			clear:both;
			visibility:hidden;
		}

• 父元素设置高度撑开

flex布局

• 设为Flex布局以后，子元素的float、clear和vertical-align属性将失效
  参考 阮一峰
• 采用 Flex 布局的元素，称为 Flex 容器（flex container）；它的所有子元素自动成为容器成员，称为 Flex 项目（flex item）
  
  容器有六个属性：

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）
2. flex-grow（定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大）
3. flex-shrink（定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小）
4. flex-basis（在分配多余空间之前，项目占据的主轴空间，可调整项目间距,flex 值为 1 时，flex-basis 为0%，即无间距）
5. flex（flex-grow, flex-shrink 和 flex-basis 简写）
6. align-self（允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性）

BFC

• 块级格式化上下文

• 通俗地来说：创建了 BFC的元素就是一个独立的盒子，里面的子元素不会在布局上
  影响外面的元素（里面怎么布局都不会影响外部），BFC任然属于文档中的普通流

• ！！满足以下条件之一都可以触发BFC，变身为BFC：

1. float属性不为none
2. position不为static和relative
3. overflow不为visible
4. display为inline-block, table-cell, table-caption, flex, inline-flex

• 用途：

1. 防止外边距重叠
2. 清除浮动
3. 防止文字环绕
   给个链接 bfc

书写规范

规范书写分类：

1. Positioning Model（定位的相关属性）：
   position，display，TRBL，z-index，float，overflow等
2. Box Model （盒子模型的属性）：
   margin，padding，border，width，height等
3. Typographic （文本，排版）：
   font，line-height，text-align
4. Visual （视觉方面的） ：
   background，color，transition，list-style