浮动
float:right left
清除浮动 触发bfc --overflow: hidden;
版心
版心:(可视区) 网页的主体内容所在的区域 一般就在浏览器窗口水平居中显示内容
常见的版心宽度:960px 980px 1000px 1200px
响应式
1.媒体查询 （监听尺寸） + % vw vh + 浮动
2.弹性盒模型(替代浮动) + 媒体查询（监听尺寸） + vw % vh
3.rem + 媒体查询 （监听尺寸）
嵌套
1.特殊的块级标签只能包含内联元素: p h2 dt 但是li、dd又是个特殊的，可以放div
2.标签的嵌套:块级元素和块级元素平级，内联元素一般跟内联元素平级
3.块级元素的嵌套 块级元素可以包含内联元素和块级元素 （内联可以包含内联 反之不行）
bfc
bfc 块级格式上下文（独立的css渲染区域）
怎么样去触发bfc：
0：body默认就是bfc
1.overflow：hidden auto scroll
2.display: flex; inline-block table
3.position fixed absolute
4.float:left/right
触发了bfc有怎样的特性:
1.bfc的元素上下排列 上下的间距是有margin决定的 margin会重叠,或者是左右排列 左右的间距由margin决定的
2.bfc中每个元素的margin的左边都会跟着包含块的左边框接触 浮动也是
3.bfc区域不与浮动进行叠加
4.bfc是独立的渲染区域 所以它的子元素 不会影响另外的bfc的区域子元素
5.bfc在计算高度的时候 会将浮动的高度计算进来
解决那些问题:
1.清除浮动
2.兄弟margin上下重叠
3.父子margin外边距塌陷问题 且子是父当前bfc第一个子元素
flex弹性布局
一.flex-direction 属性定义容器的主轴方向。
row(默认值) 主轴为水平方向，起点在左端
row-reverse 主轴为水平方向，起点在右端
column 主轴为垂直方向，起点在顶端
column-reverse 主轴为垂直方向，起点在底端
二. flex-wrap 属性决定主轴上一排放不下是否换行。
nowrap(默认值) 不换行
wrap换行，第一行在上方
wrap-reverse换行，第一行在下方
三. justify-content 属性决定主轴方向上弹性子元素的对齐方式
flex-start( 默认值)向主轴起点对齐,主轴为横轴时左对齐
flex-end向主轴终点对齐,主轴为横轴时右对齐
center在主轴居中对齐
space-between每个子元素之间间距相等，首尾元素对齐主轴两端
space-around每个子元素两侧间距相等，两元素之间间距为其边界间距的2倍
space-evenly每个子元素之间、元素与边界间距相等，等分空间
四.align-items 属性用于设置弹性元素在交叉轴上的对齐方式。
flex-start(默认值) 向交叉轴起点对齐,即交叉轴为纵轴时上对齐
flex-end 向交叉轴终点对齐,即交叉轴为纵轴时下对齐
center 在交叉轴居中对齐
stretch(默认值)弹性子元素未设高度(宽度)或设为 auto，将在交叉轴方向 占满整个容器的高度(宽度)
baseline从交叉轴起点到元素内容底部的最远距离横向作为参考基线，其余元素对齐基线
五.align-content 属性用于设置交叉轴方向上多行对齐方式，以一行为最小对齐单位。
flex-start向交叉轴起点对齐
flex-end向交叉轴终点对齐
center在交叉轴居中对齐
stretch (默认值)弹性元素未设高度或设为 auto，将在交叉轴方向占满整个容器的高度
space-between 每个子元素之间间距相等，首尾元素对齐主轴两端
space-around每个子元素两侧间距相等，两元素之间间距为其边界间距的2倍
space-evenly每个子元素之间、元素与边界间距相等，等分空间
