css3的几种布局机制

css3布局机制的作用： 实现元素的排列效果
默认文档流： 元素/标签默认特性，在默认文档流中进行排布

先进性行级布局，再进行列级布局
布局一：

 1.display:改变元素的默认特性
     inline:将块级元素转换为行内元素   div->span
     block:将行内元素转换为块级元素   span->block
     ::before{
          content:url()
      }//行内元素
     ::after{}
     ::first-letter{}
     inline-block:将当前元素修改为兼具行内元素和块级元素的特性
            既能设置宽高属性又能和其他元素共占一行

布局二：

  2.浮动布局
        float:left/right/none
        文字包裹图片
        脱离默认文档流
        浮动元素不会遮挡文字(文字从图片的左上角开始)
        块级元素：
            float:left
            宽度和高度均有内容撑起，可以与其他元素共占一行
        行内元素
            float:left
            可以设置宽高属性

设置浮动属性之前的效果图：

设置浮动属性之后的效果图：

浮动何时停止：

1.当遇到父级元素边框时停止浮动
2.当遇到其他浮动元素时停止浮动

清除浮动：

1.在浮动元素和非浮动元素之间添加一个块级元素，eg:h1
       clear:left/right/both
   2.伪元素
       在浮动元素的父级元素添加::after{
           display:block;
           content:'';
           clear:left;
       }
       注意布局问题
   3.给浮动元素的父级元素添加：overflow:hidden;

布局三：

  定位布局
        position:
            static:静态定位(默认文档流)
            absolute:绝对定位
                1.默认根据body左上角进行定位（body有8px的margin）
                2.脱离默认文档流
                3.不保留定位前空间
                4.如果父元素有定位属性时，子元素根据父元素的左上角进行定位
            relative:相对定位
                1.默认根据元素本身的位置进行定位
                2.不脱离默认文档流
                3.保留定位前空间
            fixed：固定定位
                和绝对定位相似
                使用了固定定位的元素，不会根据浏览器的滚动条的滚动而滚动
            sticky:粘滞定位（例如左右两侧导航栏经常用到）
                relative+fixed 

        配合属性：
            left
            right
            top
            bottom

布局四：

伸缩盒布局
display:flex;
	flex-direction:
		row(默认列布局)
		column
		column-reverse
		column-reverse
	flex-wrap:是否换行
		wrap
		none
	justify-content:(x轴对齐方式)
		flex-start
		flex-end
		center
		space-around
		space-between
	align-items:
		flex-start
		flex-end
		center
子元素
	flex:份数
	浮动属性自动失效

布局五：

栅格布局（第三方布局机制，利用浮动布局或者定位布局封装的企业级布局机制）
bootstrap