1.标准流?
标准流也叫文档流,指的是标签在页面中默认的排布规则。
例如:块元素独占一行,行内元素可以一行显示多个。
* 就是说,标准流就是元素会按照自己的特性即 " 规矩 " 进行排序。
2.浮动?
(1)浮动 :
作用:让块元素水平排列。
属性名:float 属性值 • left:左对齐 • right:右对齐
特点:
• 浮动后的盒子顶对齐
• 浮动后的盒子具备行内块特点
• 浮动后的盒子脱标,不占用标准流的位置
(2)浮动 – 产品区域布局:
(3)清除浮动:【因为浮动会造成脱标,有时候会对布局产生影响】
场景:浮动元素会脱标,如果父级没有高度,子级无法撑开父级高度(可能导致页面布局错乱)
解决方法:清除浮动(清除浮动带来的影响)
方法一:额外标签法
• 在父元素内容的最后添加一个块级元素,设置 CSS 属性 clear: both
方法二:单伪元素法
方法三:双伪元素法(推荐)
方法四:overflow
• 父元素添加 CSS 属性 overflow: hidden
(4)浮动 – 总结:
浮动属性: float,left 表示左浮动,right 表示右浮动
特点 :
1. 浮动后的盒子顶对齐
2. 浮动后的盒子具备行内块特点
3. 父级宽度不够,浮动的子级会换行
4. 浮动后的盒子脱标
清除浮动:
子级浮动,父级没有高度,子级无法撑开父级高度,影响布局效果 (推荐:双伪元素法)
拓展:浮动本质作用是实现图文混排效果
3.Flex 布局?(css推荐使用的方法)
(1)Flex – 认识:
Flex 布局也叫弹性布局,是浏览器提倡的布局模型,非常适合结构化布局,提供了强大的空间分布和对齐能力。 Flex 模型不会产生浮动布局中脱标现象,布局网页更简单、更灵活。
(2)Flex – 组成 :
设置方式:给父元素设置 display: flex,子元素可以自动挤压或拉伸
组成部分:
• 弹性容器
• 弹性盒子
• 主轴:默认在水平方向
• 侧轴 / 交叉轴:默认在垂直方向
(3)Flex 布局:
(4)主轴对齐方式:
(5)侧轴对齐方式:
(6)修改主轴方向:
主轴默认在水平方向,侧轴默认在垂直方向
属性名:flex-direction
(7)弹性伸缩比:
作用:控制弹性盒子的主轴方向的尺寸。
属性名:flex
属性值:整数数字,表示占用父级剩余尺寸的份数。
(8)弹性盒子换行:
弹性盒子可以自动挤压或拉伸,默认情况下,所有弹性盒子都在一行显示。
属性名:flex-wrap
属性值 :
• wrap:换行
• nowrap:不换行(默认)
注意:
在换行的时候,使用的就不是align-items,而是align-content,因为align-content用于多行侧轴变换,align-items使用在单行侧轴变换。
小伙伴们今天的知识点就到这里:
点赞加关注!知识不迷路!!!!!!