一.标准流:
标准流也叫文档流,指的是标签在页面中默认的排布规则,例如:块元素独占一行,行内
元素可以一行显示多个。
二.浮动-基本使用与布局:
作用:让块级标签在一行显示。
属性名:float
属性值:
·left左对齐
·right右对齐
如图浮动后的盒子顶对其;
具有行内块的性质;
浮动的盒子会脱离标准流,不再占用标准流的位置。
如图:one盒子脱离了原来的标准流,所以一个盒子中的块元素都要设置float属性。
产品布局:
三.清除浮动影响:
清除浮动: 清除浮动带来的影响
a.影响: 如果子元素浮动了,此时子元素不能撑开标准流的块级父元素
b.原因: 子元素浮动后脱标-> 不占位置
c.目的: 需要父元素有高度,从而不影响其他元素
d.方法:
i.额外标签法
1.操作:在父元素内容的最后添加一个块级元素,给添加的块级元素设
clear:both(class=“clearfix)
(清除左右两侧的浮动的影响)
2.缺点:会在页面中添加额外的标签,让页面的HTML结构变得复杂
ii单伪元素法:
1.操作: 用伪元素替代额外标签
2.基本写法:
a.
b.解释:伪元素添加的行内,要求块,要加display:block转头块元素。
3.优点: 项目中使用,直接给标签加类即可清除浮动
4.单伪元素法和额外标签法的原理相同
iii.双伪元素清除法
1.操作:
2.优点: 项目中使用,直接给标签加类即可清除浮动
3.clearfix::before作用是解决外边距塌陷问题
iv. 给父元素设置overflow:hidden
1.操作: 直接给父元素设置
2.优点: 方便
*拓展:浮动本质作用是实现图文混排效果:
四.flex布局-组成:
设置方式:给父元素设置display:flex,子元素可以自动挤压或拉伸。
组成部分:
弹性容器
弹性盒子(弹性盒子在弹性容器中沿主轴方向排列)
1)当元素过多时,弹性盒子会主动压缩:
2)当弹性盒子未设置高度时,盒子会自动拉伸:
主轴:默认在水平方向。
侧轴/交叉轴:默认在垂直方向。
五.主轴对齐方式:
六.侧轴对齐方式:
七.修改主轴方向:
效果演示:
代码:
八.弹性伸缩比:
作用:控制弹性盒子的主轴方向的尺寸。
属性名:flex
属性值:整数数字,表示占用父级剩余尺寸的份数。
注意:在默认情况下,主轴方向的尺寸靠内容撑开,侧轴方向默认拉伸。
九.弹性盒子换行:
弹性盒子可以自动挤压或拉伸,默认情况下,所有盒子都在一行显示。
属性名:flex-wrap
属性值:
wrap:换行
nowrap:不换行(默认)
十.行对齐方式:
属性名:align-content
属性值与主轴对齐方式一样,用于调整行与行之间的对齐方式。