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;

垂直:(宽高要设)