目录
1.标准流：
2.浮动:float
3.浮动清除:
4.flex弹性盒子布局:
5.flex常用属性:
1.父属性：
2.子属性：
1.标准流：
标准流就是元素在页面中的默认排列方式，也就是元素在页面中的默认位置。
1.1 块元素----独占一行----从上到下排列
1.2 行内元素----不独占一行----从左到右排列，遇到边界换行
1.3 行内块元素----不独占一行----从左到右排列，遇到边界换行
2.浮动:float
1.属性：
left---向左浮动
right---向右浮动
2.浮动的特点：
2.1 脱标---脱离标准流,释放当前盒子的默认位置---影响父盒子的高度
2.2 浮动的方向---水平方向（左，右，没有中间）
2.3 本质将元素转换为行内块元素---横向排列，并且可以设置宽高
标签代码:
<div class="left">左</div>
<div class="right">右</div>样式代码:
<style>
div {
height: 200px;
width: 300px;
}
.left {
background-color: aqua;
/* 浮动到左 */
float: left;
}
.right {
background-color: burlywood;
/* 浮动到左 */
float: left;
/* 浮动到右 */
/* float: right; */
}
</style>效果:
小案例:
标签代码:
<ul>
<li><a href="">首页</a></li>
<li><a href="">菜鸟工具</a></li>
<li><a href="">菜鸟笔记</a></li>
<li><a href="">参考手册</a></li>
<li><a href="">用户笔记</a></li>
<li><a href="">测验/考试</a></li>
<li><a href="">本地书签</a></li>
</ul>样式代码:
<style>
ul {
height: 50px;
line-height: 50px;
list-style: none;
background-color: rgb(84, 145, 84);
}
ul li {
float: left;
padding: 0 15px;
}
ul li a {
text-decoration: none;
color: rgb(255, 255, 255);
}
</style>效果:
3.浮动清除:
方法一(额外标签法):在父元素内容的最后添加一个块级元素，设置 CSS 属性 clear: both
方法二(双伪元素法[推荐]):
/* before 解决外边距塌陷问题 */
/* 双伪元素法 */
.clearfix::before,
.clearfix::after {
/* 插入的内容 */
content: "";
display: table;
}
/* after 清除浮动 */
.clearfix::after {
clear: both;
}
方法三(单伪元素法):
方法四(overflow [推荐]):父元素添加 CSS 属性 overflow: hidden
方法五:给父盒子设置高度[不推荐]
1.浮动后的影响：
1.1.父盒子的高度塌陷，背景颜色不会被子盒子撑开
1.2.父盒子下边的其他元素会上移
2.浮动的清除：
方法一：额外标签法---在浮动的盒子后面添加一个空的标签，设置clear:both---不推荐使用
方法二：给父盒子添加固定高度---不推荐使用---动态数据列表不适用
方法三：单伪元素法---给父盒子添加:after伪元素，设置clear:both---推荐使用
方法四：双伪元素法---给父盒子添加:before和:after伪元素，设置clear:both---推荐使用---即 可以清除浮动干扰，同时又能解决父盒子高度塌陷的问题
方式五：给父盒子添加overflow:hidden---推荐使用
标签代码:
<div class="box clearfix">
<div class="left">左</div>
<div class="right">右</div>
<!--(方法一) <div style="clear: both;"></div> -->
</div>
<p>123456789</p>样式代码:
<style>
div .box {
height: 500px;
background-color: coral;
}
.left {
height: 200px;
width: 300px;
background-color: aqua;
/* 浮动到左 */
float: left;
}
.right {
height: 200px;
width: 300px;
background-color: burlywood;
/* 浮动到左 */
/* float: left; */
/* 浮动到右 */
float: right;
}
p {
height: 50px;
line-height: 50px;
background-color: cornflowerblue;
}
/* before 解决外边距塌陷问题 */
/* 双伪元素法 */
.clearfix::before,
.clearfix::after {
/* 插入的内容 */
content: "";
display: table;
}
/* after 清除浮动 */
.clearfix::after {
clear: both;
}
</style>效果:
小案例:
标签代码:
<body>
<div class="box">
<div class="left">
<img src="../images/1.svg" alt="" style="width: 60px" />
<span>
<p>一键发布多端</p>
<p>发布视频到抖音短视频、西瓜视频及今日头条</p>
</span>
</div>
<div class="right">
<img src="../images/2.svg" alt="" style="width: 60px" />
<span>
<p>管理视频内容</p>
<p>支持修改已发布稿件状态和实时查询视频审核状态</p>
</span>
</div>
<div class="left">
<img src="../images/3.svg" alt="" style="width: 60px" />
<span>
<p>发布携带组件</p>
<p>
支持分享内容携带小程序、地理位置信息等组件，扩展内容及突出地域性
</p>
</span>
</div>
<div class="right">
<img src="../images/4.svg" alt="" style="width: 60px" />
<span>
<p>数据评估分析</p>
<p>获取视频在对应产品内的数据表现、获取抖音热点,及时进行表现评估</p>
</span>
</div>
</div>
</body>样式代码:
<style>
.box {
width: 950px;
height: 150px;
padding: 50px 15px;
margin: 50px;
border: 1px solid rgb(158, 158, 158);
font-size: 12px;
border-radius: 10px;
}
.box .left {
width: 500px;
float: left;
}
.box .left span {
display: inline-block;
}
.box .left span > p:first-child {
font-size: 15px;
margin-bottom: 0;
}
.box .right {
float: left;
}
.box .right span {
display: inline-block;
}
.box .right span > p:first-child {
font-size: 15px;
margin-bottom: 0;
}
</style>效果:
4.flex弹性盒子布局:
本质：改变当前盒子内部的子元素空间排列位置
1.特点：
1.1 子元素标签默认都会横向排列
1.2 当子元素标签的总宽度大于父盒子的宽度时，子元素标签会自动内减
2.常用属性：
2.1 父属性：
2.1.1 display:flex; 定义弹性盒子
2.1.2 justify-content:定义子元素标签的在X方向排列方式
space-between--- 两端对齐，中间相等间距留白
space-around---两端的间距是中间间距的一半
center --- 居中对齐
2.2.3 align-items:定义子元素标签在Y方向排列方式
flex-end---底部对齐
center---居中对齐
stretch---拉伸对齐
标签代码:
<div class="bigbox">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
<div class="box5">5</div>
<div class="box6">6</div>
</div>样式代码:
<style>
.bigbox {
margin: 85px auto; /*居中*/
width: 1000px;
height: 600px;
background-color: wheat;
display: flex; /*弹性盒子*/
/*排列方向*/
flex-direction: row; /*水平、左*/
/*flex-direction: row-reverse; /*水平、右*/
/*flex-direction:column;/*垂直、上*/
/*flex-direction:column-reverse;/*垂直、下*/
/*换行处理属性*/
/*flex-wrap: nowrap;/*不换行*/
flex-wrap: wrap; /*第一行在上面*/
/*flex-wrap: wrap-reverse;/*第一行在下面*/
/*x方向排列*/
/*justify-content: flex-start; /*左对齐*/
/*justify-content: flex-end;/*右对齐*/
/*justify-content: center; /*居中*/
/*justify-content: space-between; /*两端对齐，项目之间的间隔都相等*/
/*justify-content: space-around; /*每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍*/
justify-content: space-evenly; /*平均分配,两端与中间间隔都相等*/
/*y方向对齐*/
/*align-items: flex-start; /*交叉轴的起点对齐*/
/*align-items: flex-end;/*交叉轴的终点对齐*/
align-items: center; /*交叉轴的中点对齐*/
/*align-items: baseline;/*项目的第一行文字的基线对齐*/
/*align-items: stretch;/*如果项目未设置高度或设为auto，将占满整个容器的高度*/
/*多根轴对齐方式*/
/*align-content: flex-start;/*与交叉轴的起点对齐*/
/*align-content: flex-end;/*与交叉轴的终点对齐*/
/*align-content: center; /*与交叉轴的中点对齐*/
/*align-content: space-between; /*与交叉轴两端对齐，轴线之间的间隔平均分布*/
align-content: space-around; /*每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍*/
/*align-content: stretch;/*轴线占满整个交叉轴*/
}
.bigbox div {
width: 300px;
}
.bigbox .box1 {
height: 200px;
background-color: lavenderblush;
}
.bigbox .box2 {
height: 200px;
background-color: lightgreen;
}
.bigbox .box3 {
height: 200px;
background-color: pink;
}
.bigbox .box4 {
height: 200px;
background-color: rgb(179, 243, 245);
}
.bigbox .box5 {
height: 200px;
background-color: rgb(237, 179, 245);
}
.bigbox .box6 {
height: 200px;
background-color: rgb(255, 128, 128);
}
</style>效果:
小案例:
标签代码:
<div class="box">
<div class="box1">
<img src="../images/group.svg" alt="" />
<p>账号授权</p>
<p>包含抖音帐号授权登录与授权绑定的能力</p>
</div>
<div class="box1">
<img src="../images/user.svg" alt="" />
<p>用户管理</p>
<p>包含用户的基础信息以及关系链相关数据的获取</p>
</div>
<div class="box1">
<img src="../images/video.svg" alt="" />
<p>视频管理</p>
<p>包含抖音、西瓜、头条视频的发布以及相关数据的获取能力</p>
</div>
<div class="box1">
<img src="../images/interact.svg" alt="" />
<p>互动管理</p>
<p>包含私信收发以及评论管理的能力</p>
</div>
<div class="box1">
<img src="../images/search.svg" alt="" />
<p>搜索管理</p>
<p>包含通过关键词获取抖音视颍及该视频下评论，并进行回复的能力</p>
</div>
<div class="box1">
<img src="../images/data.svg" alt="" />
<p>数据开放服务</p>
<p>包含用户授权后的公开用户数据，视频数据等能力</p>
</div>
<div class="box1">
<img src="../images/business.svg" alt="" />
<p>企业号开放能力</p>
<p>包含企业号意向用户、企业消息卡片、团购活动等的管理能力</p>
</div>
<div class="box1">
<img src="../images/life.svg" alt="" />
<p>生活服务开放能力</p>
<p>包含商铺/商品库/交易系统等能力的开放接入</p>
</div>
</div>样式代码:
<style>
.box {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
width: 900px;
height: 460px;
padding: 60px 80px;
background-color: rgb(226, 226, 226);
}
.box .box1 {
width: 130px;
height: 130px;
border-radius: 10px;
padding: 40px 40px;
background-color: white;
}
.box .box1 p {
font-size: 13px;
color: #000;
text-align: center;
}
.box .box1 p:last-child {
font-size: 8px;
color: rgb(146, 146, 146);
}
.box img {
width: 40px;
display: block;
margin: auto;
}
</style>效果:
5.flex常用属性:
1.父属性：
display: flex;---设置为flex布局
flex-wrap---设置子元素换行
nowrap:默认值，不换行
wrap:换行
flex-direction---设置子元素排列方向
row:默认值，从左到右
row-reverse:从右到左
column:从上到下
column-reverse:从下到上
justify-content---设置子元素在主轴上的对齐方式
flex-start:默认值，从左到右
flex-end:从右到左
center:居中
space-between:两端对齐
space-around:平均分配,两端留有空间,中间间隔相等,总空间是子元素的2倍
space-evenly:平均分配,两端与中间间隔都相等
2.子属性：
flex--- 子元素的伸缩比例
默认值：0
1：子元素会占据父元素的所有空间
2：子元素会占据父元素的所有空间的2倍
align-self---单独控制某个弹性盒子的侧轴对齐方式（给弹性盒子设置）
flex-start:默认值，从上到下
flex-end:从下到上
center:居中
baseline:以基线对齐
stretch:拉伸
标签代码:
<div class="top">
<div class="back">返回</div>
<div class="search">输入框</div>
<div class="query">查询</div>
</div>
<div class="box">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</div>样式代码:
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.top {
/* 宽度为视口（移动端的窗口）宽度的100% */
width: 100vw;
height: 10vw;
background-color: rgb(207, 233, 255);
display: flex;
}
.top .back {
border: 1px solid red;
}
.top .search {
/* 比例：占一份 */
flex: 1;
border: 1px solid red;
}
.top .query {
border: 1px solid red;
}
.box {
width: 100vw;
height: 15vw;
background-color: sandybrown;
display: flex;
}
.box .box1 {
flex: 1;
height: 10vw;
background-color: rgb(73, 151, 134);
}
.box .box2 {
flex: 2;
height: 10vw;
background-color: rgb(73, 94, 151);
}
.box .box3 {
flex: 3;
height: 10vw;
background-color: rgb(126, 73, 151);
}
</style>效果:
