1、标准流
标准流也叫文档流,指的是标签在页面中
默认的排布规则
,例如:块元素独占一行,行内元素可以一行显示多个。
2、浮动
2.1基本使用
作用:让块元素水平排列。
属性名:fl
oat
属性值 1、
left
:左对齐
2、right
:右对齐
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.one{
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.two{
width: 200px;
height: 200px;
background-color: green;
float: right;
}
</style>
</head>
<body>
<div class="one">one</div>
<div class="two">two</div>
</body>
</html>
特点:
浮动后的盒子
顶对齐
浮动后的盒子具备
行内块
特点
浮动后的盒子
脱标
,
不占用标准流的位置
2.3产品区域布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
.product{
margin: 50px auto;
width: 1226px;
height: 628px;
background-color: pink;
}
.left{
float: left;
width: 234px;
height: 628px;
background-color: skyblue;
}
.right{
float: right;
width: 978px;
height: 628px;
background-color: brown;
}
.right li{
float: left;
margin-right: 14px;
margin-bottom: 14px;
width: 234px;
height: 300px;
background-color: orange;
}
/* 第四个li和第八个li 去掉右侧的margin */
.right li:nth-child(4n){
margin-right: 0;
}
/* 细节:如果父级宽度不够,浮动的盒子会掉下来 */
</style>
</head>
<body>
<div class="product">
<div class="left"></div>
<div class="right">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
</html>
2.4清除浮动
场景:浮动元素会脱标,如果
父级没有高度
,
子级无法撑开父级高度
(可能导致页面布局错乱)
解决方法:
清除浮动
(清除浮动带来的影响)
2.4.1场景搭建
<style>
}
.top{
margin: 10px auto;
width: 1200px;
background-color: pink;
}
.left{
float: left;
width: 200px;
height: 300px;
background-color: skyblue;
}
.right{
float: right;
width: 950px;
height: 300px;
background-color: orange;
}
.bottom{
height: 100px;
background-color: brown;
}
</style>
</head>
<body>
<div class="top">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="bottom"></div>
</body>
</html>
2.4.2 额外标签法
在
父元素内容的最后
添加一个
块级
元素,设置
CSS
属性
clear: both
2.4.3单伪元素法
1、准备after伪元素
2、父级使用clearfix类
2.4.4双伪元素法
1. 准备 after 和 before 伪元素
2.
父级使用
clearŨx
类
2.4.5overfow法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
/* 1、额外标签法
.bottom{
clear: both;
}*/
/* 2、单伪元素法
.top::after{
content: "";
display: block;
clear: both;
}*/
/* 3、双伪元素法
.top::before,.top::after{
content: "";
display: table;
}
.top::after{
clear: both;
}*/
/* overfoe法
.top{
margin: 10px auto;
width: 1200px;
background-color: pink;
overflow: hidden;
} */
.top{
margin: 10px auto;
width: 1200px;
background-color: pink;
}
.left{
float: left;
width: 200px;
height: 300px;
background-color: skyblue;
}
.right{
float: right;
width: 950px;
height: 300px;
background-color: orange;
}
.bottom{
height: 100px;
background-color: brown;
}
</style>
</head>
<body>
<div class="top">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="bottom"></div>
</body>
</html>
3、Flex布局
Flex
布局也叫
弹性布局
,是浏览器
提倡的布局模型
,非常适合
结构化
布局,提供了强大的空间分布和对齐能力。
Flex
模型不会产生浮动布局中脱标现象,布局网页更简单、更灵活。
3.1Flex组成
设置方式:给父元素设置 display: flex,子元素可以自动挤压或拉伸
组成部分: 1.弹性容器
2.弹性盒子
3.主轴:默认在
水平
方向
4.侧轴
/
交叉轴:默认在
垂直
方向
3.2主轴对齐方式
属性名:justify-content
属性值 | 效果 |
flex-start | 默认值,弹性盒子从起点开始依次排列 |
flex-end | 弹性盒子从起点开始依次排列 |
center | 弹性盒子沿主轴居中排列 |
space-between | 弹性盒子沿主轴均匀排列,空白间距均分在弹性盒子之间 |
space-around | 弹性盒子沿主轴均匀排列,空白间距均分在弹性盒子两侧 |
space-evenly | 弹性盒子沿主轴均匀排列,弹性盒子与容器之间间距相等 |
3.3侧轴对齐方式
align-items
:当前弹性容器内
所有
弹性盒子的侧轴对齐方式(给
弹性容器
设置)
align-self
:单独控制
某个弹性盒子
的侧轴对齐方式(给
弹性盒子
设置)
属性值 | 效果 |
stretch | 弹性盒子沿着侧轴线被拉伸至铺满容器(弹性盒子没有设置侧轴方向尺寸则默认拉伸) |
center | 弹性盒子沿侧轴居中排列 |
flex-start | 弹性盒子从起点开始依次排列 |
flex-end | 弹性盒子从终点开始依次排列 |
3.4修改主轴方向
主轴默认在水平方向,侧轴默认在垂直方向
属性名:
ũex-direction
属性值 | 效果 |
row | 水平方向,从左向右(默认) |
column | 垂直方向,从上向下 |
row-reverse | 水平方向,从右向左 |
column-reverse | 垂直方向,从下向上 |
3.5弹性伸缩比
作用:控制弹性盒子的主轴方向的尺寸。
属性名:
ũex
属性值:整数数字,表示占用
父级剩余尺寸的份数
。
3.6弹性盒子换行
弹性盒子可以自动挤压或拉伸,默认情况下,所有弹性盒子都在一行显示。
属性名:
ũex-wrap
属性值:1.wrap:换行
2.nowrap
:不换行(默认)
3.7行内对齐方式
属性名:align-content
属性值 | 效果 |
flex-start | 默认值,弹性盒子从起点开始依次排列 |
flex-end | 弹性盒子从起点开始依次排列 |
center | 弹性盒子沿主轴居中排列 |
space-between | 弹性盒子沿主轴均匀排列,空白间距均分在弹性盒子之间 |
space-around | 弹性盒子沿主轴均匀排列,空白间距均分在弹性盒子两侧 |
space-evenly | 弹性盒子沿主轴均匀排列,弹性盒子与容器之间间距相等 |
注意:该属性对单行弹性盒子模型无效。