web@css普通布局 , 高级布局 , 布局坑

1.高级布局
《文档流概念》:页面从上至下,块式标签一行一行排列,内联式一行中从左至右排列
《BFC规则》:左右位置（左右margin）垂直位置（上下margin）容器内外(互不影响)
《脱离文档流》:脱离文档流的元素 拥有black块级元素所有

综合使用 em，rem，vw，wh，%布局
流式布局---让布局脱离固定值（一般只是宽）限制,可以根据页面情况改变相应发生改变，整体布局不改变

百分比布局 
响应式布局---不同大小屏幕 显示不同的布局
@media  screen and (max-width:400px ){
            /*.d{background-color: white}*/
            .d1{
                width: 10%;
                background-color: #ff2084;
            }

浮动布局---float
float：left|right
解决问题 :block box同行显示
清浮动:
<!--1.height-->
<!--2.overflow: hidden-->
<!--3.兄弟:clear: left | right | both-->
<!--4.父元素:after {-->
 <!--content: "";-->
 <!--display: block;-->
 <!--clear: both;-->

定位布局---position
position属性:
 statict  默认 不脱离文档流
 relative 不脱离文档流--相对自身
 absolute 完全脱离文档流--相对最近的一个定位的父元素
 fixed     完全脱离文档流--相对窗口
定位后的元素可进行:
top,left,botomn,right操作
z-index:对于脱离文档流的定位元素显示优先级

flex布局---弹性布局
<!--弹性容器属性display:flex-->
<!--容器设置为弹性容器后,内的元素排成一行,不受内元素宽度和的局限.-->
<!--flex-direction--> row | row-reverse | column | column-reverse
<!--flex-wrap-->      nowrap | wrap | wrap-reverse
<!--flex-flow-->      上面2个简写方式
<!--justify-content--> flex-start | flex-end | center | space-between | space-around
<!--align-items-->     flex-start|flex-end|center|baseline|stretch
<!--align-content-->  flex-start|flex-end|center|space- between|space-around|stretch

<!--弹性元素属性-->
<!--order-->
<!--align-self--> auto|flex-start|flex-end|center|baseline|stretch
<!--flex-grow-->
<!--flex-shrink-->
<!--flex-basis-->

2.布局坑
兄弟父子坑
文档流 兄弟:上下取最大 左右相加
float  兄弟:上下左右 相加

父子margin坑: 子margin移动父级的margin
父级设置 content，padding-top，border-top;float;定位只有absolut,fixed有效

 

3.xy居中
水平垂直---两个方向居中
//居中的元素是：<div> </div>标签内的元素   div要设置宽高

方式一:通过父元素 统一设置子元素(一般不这样做，应为内部元素未知)
    <!--子元素知道宽高|不知宽高-->
    水平（block不行）:text-aline:center
    垂直:（都行）
          display:table-cell    单元格
          vertical-align:middle
    <!--不兼容问题-->
           display: flex;
    水平: justify-content: center;
    垂直:align-items: center;

方式二:通过子元素自身  单独设置某个(常用)

    inline（不能设置宽高,margin.padding 左右有效）元素:可以设置line-height
    display:block;

 

    block(可设置宽高)元素:可以设置line-height=内容高度（内部的div）+上下高度（相同）
    水平:margin:0 auto;  只适用于block型
    <!--父级相对定位,子集绝对定位   提一句:定位,float的元素变成block型 如果没设宽高 由内容撑开-->
    水平:left:50%
         margin-left:-宽/2px;
    垂直:(宽高要设)
        top:50%
        margin-top:-高/2px;

    <!--有不兼容问题-->
    水平:left:50%
    垂直:(宽高没设,内容撑开)
        top:50%
    transform:translate(-50%,-50%)

    水平:left:0;right:0;top:0;botuom:0;margin:auto;
    垂直:(宽高要设)