布局
默认文档流
1.元素显示的顺序和代码的顺序是一致的
2.块级元素独占一行空间,默认宽度为父元素的100%,高度由内容或者子元素决定
3.行内元素共享一行空间,默认宽高都由内容决定
浮动布局
float(如果一个元素添加float属性,那么这个元素就会成为一个浮动元素)
left 向左浮动
right 向右浮动
none 不浮动
inherit 浮动方式继承父元素
浮动元素的特点
1.当一个元素是浮动元素的时候,他会失去对父元素的支撑
清除浮动
1.给父元素添加overflow:hidden
2.使用伪元素
定位布局
position
static 静态(默认) 非定位元素
relative 相对定位 定位元素
相对的是元素原先的值,不脱离文档流(还占据原先位置),宽度默认还是100%,可以覆盖在原先位置上
absolute 绝对定位 定位元素
相对的是距离它最近的父定位元素的位置,如果没有父定位元素,那么它相对于浏览器视口
脱离文档流(不占据原先的位置)
fixed 固定定位 定位元素
相对于浏览器视口
脱离文档流
不会随着浏览器的滚动而滚动
sticky 粘滞定位 定位元素
不脱离文档流
使用top/right/bottom/left设置一个过渡点,当超过这个过渡点的时候就会体现fixed固定在页面上
脱离文档流的特点:默认宽度由内容决定,不占据原先的位置(原先的位置被其它元素抢占)
只有定位元素才可以使用top,right,bottom,left,z-index
flex布局(伸缩盒布局)
1.比较:
传统布局
兼容性好
布局繁琐
局限性,不能在移动端很好的布局
flex弹性布局(伸缩盒布局)
操作方便,布局极为简单,移动端应用很广泛
PC端浏览器支持情况较差
IE11或更低版本,不支持或部分支持
2.原理
任何一个容器都可以指定为flex布局
采用Flex布局的元素,称为flex容器,他的所有资源股市称为flex项目
容器默认存在两根轴:水平的主轴和垂直的交叉轴
当我们为父盒子 设为flex布局后,子元素的float,clear属性即将失效
给父元素设置display:flex,达到控制子元素的目的
3.常见父项(容器)属性
flex-direction:设置主轴的方向
row(默认):主轴为水平方向,起点在左端
row-reverse:主轴为水平方向,起点在右端
column:主轴为垂直方向,起点在上沿
column-reverse:主轴为垂直方向,起点在下沿
justify-content:设置主轴上的子元素排列方式
flex-start:左对齐
flex-end:右对齐
center:居中
space-between:两端对齐,项目之间的间隔都相等
space-around:每个项目两侧间隔相等,所以,项目之间间隔比项目与边框的间隔大一倍
flex-wrap:设置子元素是否换行
nowrap(默认):不换行
wrap:换行,第一行在上方
wrap-reverse:换行,第一行在下方
align-content:设置侧轴上的子元素的排列方式(多行)
flex-start:与交叉轴的起点对齐
flex-end:与交叉轴的终点对齐
center:与交叉轴的中点对齐
space-between:与交叉轴两端对齐,轴线之间平均分布
space-around:每根轴线两侧的间隔都相等,所以,轴线之间的间隔比轴线与边框的间隔大一倍
stretch(默认值)
align-item:设置侧轴上的子元素排列方式(单行)
flex-start:交叉轴的起点对齐
flex-end:交叉轴的终点对齐
center:交叉轴的中点对齐
baseline:项目的第一行文字的基线对齐
stretch(默认值):如果项目没设置高度或设auto,将占满整个容器
flex-flow:复合属性,相当于同时设置了flex-direction和flex-wrap
flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap
4.项目的属性
order
该属性定义了项目的排列顺序,数值越小,排列越靠前,默认0
flex-grow
该属性定义了项目的放大比例,默认0,即如果存在剩余空间,也不放大
flex-shrink
该属性定义了项目的缩小比例,默认为1,即如果剩余空间不足,该项目将缩小
flex-basis
该属性定义了在分配多余空间之前,项目占据的主轴空间
flex
flex-grow、flex-shrink、flex-basis的速写形式