CSS基础五
标准流
标准流也指文档流，标签在页面中默认的排布规则：
- 块元素独占一行
- 行内元素一行多个
- ......
浮动
让块级标签在水平排列。
属性名：float
属性值：
leftright
浮动元素脱离标准流。
浮动后的元素顶对齐。
浮动后的元素具备行内块特点，不占用标准流空间。
测试：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.product {
margin: 100px auto;
width: 1226px;
height: 628px;
background-color: #DCDCDC;
}
.bd-left {
width: 234px;
height: 628px;
background-color: #FAEBD7;
float: left;
}
.bd-right {
width: 978px;
height: 628px;
background-color: #CDCDB4;
float: right;
margin-left: 14px;
}
.bd-right li {
margin-right: 14px;
margin-bottom: 14px;
width: 234px;
height: 300px;
background-color: #FFC1C1;
float: left;
list-style: none;
}
.bd-right li:nth-child(4n){
margin-right: 0px;
}
</style>
</head>
<body>
<div class="product">
<div class="bd-left">爆款</div>
<div class="bd-right">
<ul>
<li>手机</li>
<li>手机</li>
<li>手机</li>
<li>手机</li>
<li>手机</li>
<li>手机</li>
<li>手机</li>
<li>手机</li>
</ul>
</div>
</div>
</body>
</html>清除浮动
浮动元素会脱标，如果父级没有高度，子级无法撑开父级高度导致页面错乱。
需要清除浮动。
一、额外标签法
在父元素内容的最后添加一个块级元素，设置CSS属性clear:both
一般用于清除浮动的类名：clearfix
html:
<div class="top">
<div class="left"></div>
<div class="right"></div>
<div class="clearfix"></div>
</div>
<div class="buttom"></div>
CSS:
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.top {
margin: 10px auto;
width: 800px;
/* height: 200px; */
background-color: pink;
}
.left {
width: 200px;
height: 200px;
float: left;
background-color: skyblue;
}
.right {
width: 550px;
height: 200px;
float: right;
background-color: orange;
}
.clearfix {
clear: both;
}
.buttom{
height: 80px;
background-color: #A52A2A;
}
</style>二、单伪元素法
在父级元素的最后添加伪元素,原理与额外标签法相同,不需要额外添加标签
CSS:
/*单伪元素法*/
.clearfix::after {
content: "";
display: block;
clear: both;
}
HTML:
<div class="top clearfix">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="buttom"></div>三、双伪元素法
.clearfix::before,
.clearfix::after{
content: "";
display: table;
}
.clearfix::after {
clear: both;
}四、overflow清除浮动
在父元素添加CSS属性overflow:hidden
Flex布局
弹性布局，适合结构化布局，提供空间分布和对齐。不会产生脱标现象。
Flex布局组成
弹性容器：给父元素设置了display:flex成为弹性容器
弹性盒子：子级元素，可以自动排列
主轴：默认在水平方向
侧轴/交叉轴：默认在垂直方向
相关属性设置：
| 属性 | 描述 |
|---|---|
| display:flex | 创建flex容器 |
| justify-content | 主轴方向对齐 |
| align-items | 侧轴对齐方式 |
| align-self | 某个弹性盒子侧轴对齐方式 |
| flex-direction | 修改主轴方向 |
| flex | 弹性伸缩比 |
| flex-wrap | 弹性盒子换行 |
| align-content | 行对齐方式 |
主轴对齐方式：
属性名：justify-content
属性值：
| 属性值 | 效果 |
|---|---|
| flex-start | 默认值，弹性盒子从起点开始依次排列 |
| flex-end | 弹性盒子从终点开始依次排列 |
| center | 弹性盒子沿主轴居中排列 |
| space-between | 沿主轴均匀排列，空白间距均分在盒子之间 |
| space-around | 沿主轴均匀排列，空白间距均分在盒子两侧 |
| space-evenly | 沿主轴均匀排列，盒子与容器之间间距相等 |
侧轴对齐方式：
属性名：align-items:当前弹性容器内索引盒子的侧轴对齐方式(在弹性容器设置)
属性名：align-self:单独控制某个弹性盒子的侧轴对齐方式(在弹性盒子设置)
| 属性值 | 效果 |
|---|---|
| stretch | 盒子沿着侧轴线被拉伸至铺满容器,盒子没有但是设置侧轴反向默认拉伸 |
| center | 盒子沿侧轴居中排列，整行居中 |
| flex-start | 盒子从起点开始依次排列 |
| flex-end | 盒子从终点依次排列 |
主轴方向修改：
属性名：flex-direction
属性值：
| 属性值 | 效果 |
|---|---|
| row | 默认，水平方向，从左到右 |
| column | 垂直方向，从上到下 |
| row-reverse | 水平方向，从右到左 |
| column-reverse | 垂直方向，从下到上 |
修改后侧轴自动变换。
弹性伸缩比：控制盒子主轴方向的尺寸。
属性名：flex
属性值：整数，表示占用父级剩余尺寸的份数
除去手动设置的宽度，占用的份数，设置在盒子上。
.box {
height: 300px;
border: 1px solid #000;
display: flex;
}
.box div {
height: 100px;
background-color: pink;
}
.box div:nth-child(1){
width: 200px;
}
.box div:nth-child(2){
flex: 1;
}
.box div:nth-child(3){
flex: 2;
}弹性盒子换行：
属性名：flex-wrap
属性值：wrap(换行) nowrap(不换行)
默认情况下不换行，自动在一行挤压。
flex-wrap: wrap;
justify-content: space-around;行对齐方式：
属性名：align-content
属性值：
| 属性值 | 效果 |
|---|---|
| flex-start | 默认值，弹性盒子从起点开始依次排列 |
| flex-end | 弹性盒子从终点开始依次排列 |
| center | 弹性盒子沿主轴居中排列 |
| space-between | 沿主轴均匀排列，空白间距均分在盒子之间 |
| space-around | 沿主轴均匀排列，空白间距均分在盒子两侧 |
| space-evenly | 沿主轴均匀排列，盒子与容器之间间距相等 |
盒子不换行，对齐方式不生效。
案例一：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box {
margin: 50px auto;
width: 1200px;
height: 418px;
border: 1px solid #ddd;
border-radius: 10px;
}
.box ul li {
list-style: none;
/* background-color: red; */
width: 500px;
height: 88px;
display: flex;
}
.box .pic {
margin-right: 15px;
}
.box ul{
height: 418px;
padding: 90px 40px 90px 60px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-content: space-between;
}
.box .text h4{
font-size: 20px;
line-height: 40px;
font-weight: normal;
color: #333;
}
.box .text p{
font-size: 14px;
color: #666;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>
<div class="pic">
<img src="./1.svg" alt="">
</div>
<div class="text">
<h4>一键发布多端</h4>
<p>发布视频到抖音短视频、西瓜视频及今日头条</p>
</div>
</li>
<li>
<div class="pic">
<img src="./2.svg" alt="">
</div>
<div class="text">
<h4>管理视频内容</h4>
<p>支持修改已发布稿件状态和实时查询视频审核状态</p>
</div>
</li>
<li>
<div class="pic">
<img src="./3.svg" alt="">
</div>
<div class="text">
<h4>发布携带组件</h4>
<p>支持分享内容携带小程序、地理位置信息等组件，扩展内容及突出地域性</p>
</div>
</li>
<li>
<div class="pic">
<img src="./4.svg" alt="">
</div>
<div class="text">
<h4>数据评估分析</h4>
<p>获取视频在对应产品内的数据表现、获取抖音热点，及时进行表现评估</p>
</div>
</li>
</ul>
</div>
</body>
</html>取消表单控件的外边框
outline: none;
设置颜色为透明
background-color: transparent;
隐藏字体，设置字号为0
font-size:0
特殊选择器控制搜索框提示文本样式
.search input::placeholder {
font-size: 14px;
color: #999;
}设置行内块和行内元素对齐属性：vertical-align
.user img {
vertical-align: middle;
border-radius: 15px;
}
1 游客 2025-03-27 23:37 回复
555
1 游客 2025-03-27 23:36 回复
555nGNw1Pzj' OR 227=(SELECT 227 FROM PG_SLEEP(15))--
1 游客 2025-03-27 23:35 回复
555
1 游客 2025-03-27 23:34 回复
555
1 游客 2025-03-27 23:33 回复
555
1 游客 2025-03-27 23:31 回复
555
1 游客 2025-03-27 23:28 回复
555
@@rg21D 游客 2025-03-27 23:27 回复
555
1-1; waitfor delay '0:0:15' -- 游客 2025-03-27 23:26 回复
555
1 游客 2025-03-27 23:25 回复
555
1 游客 2025-03-27 23:24 回复
555
1 游客 2025-03-27 23:24 回复
555
1 游客 2025-03-27 23:22 回复
555