2022年1月23日，学习CSS圆角边框，CSS盒子阴影，CSS文字阴影，CSS浮动特性：脱标、浮动元素一行显示、浮动元素具有行内块元素特性，CSS清除浮动：额外标签法、父元素overflow、after伪元素、双伪元素。
今日学习内容：
1 圆角边框
<head>
<style type="text/css">
.div1 {
width: 100px;
height: 100px;
background-color: pink;
/*圆角边框*/
border-radius: 30px;
}
.div2 {
width: 100px;
height: 100px;
background-color: pink;
/*半径取长宽的一半得到圆形*/
border-radius: 50%;
}
/*设置不同的圆角*/
.div3 {
width: 100px;
height: 100px;
background-color: pink;
/*左上角开始顺时针*/
border-radius: 10px 20px 30px 40px;
display: inline-block;
}
.div4 {
width: 100px;
height: 100px;
background-color: pink;
/*对角为一组*/
/*左上右下 右上左下*/
border-radius: 30px 40px;
display: inline-block;
}
.div5 {
width: 100px;
height: 100px;
background-color: pink;
/*拆开写*/
border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 40px;
display: inline-block;
}
</style>
</head>
<body>
<h4>圆角边框</h4>
<div class="div1"></div>
<h4>圆形</h4>
<div class="div2"></div>
<h4>设置不同的圆角</h4>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>
</body>
2 盒子阴影
<head>
<style type="text/css">
.div6 {
width: 100px;
height: 100px;
background-color: pink;
/*盒子阴影*/
box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, 0.7);
}
</style>
</head>
<body>
<h4>盒子阴影</h4>
<div class="div6"></div>
</body>
3 文字阴影
<head>
<style type="text/css">
h4_1 {
text-shadow: 5px 5px 6px rgba(0, 0, 0, 0.7)
}
</style>
</head>
<body>
<h4 class="h4_1">文字阴影</h4>
</body>
4 浮动
4.1 三种传统页面布局
4.1.1 普通流（标准流）
4.1.2 浮动
4.1.3 定位
4.2 float浮动
<head>
<style type="text/css">
div8, .div9, .div10 {
width: 100px;
height: 100px;
background-color: pink;
}
.div8 {
float: left;
}
.div9 {
float: left;
}
.div10 {
float: right;
}
</style>
</head>
<body>
<h4>浮动</h4>
<div class="div8">左</div>
<div class="div9">左</div>
<div class="div10">右</div>
</body>
4.3 浮动特性
4.3.1 浮动元素会脱离标准流（脱标）
<head>
<style type="text/css">
.div11 {
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
.div12 {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<h4>脱标</h4>
<div class="div11">浮动的盒子</div>
<div class="div12">标准的盒子</div>
</body>
4.3.2 浮动元素一行显示
<head>
<style type="text/css">
.div13, .div14, .div15 {
width: 100px;
height: 100px;
float: left;
}
.div13 {
background-color: pink;
}
.div14 {
background-color: orange;
width: 200px;
height: 200px;
}
.div15 {
background-color: green;
}
</style>
</head>
<body>
<h4>浮动元素一行显示</h4>
<div class="div13"></div>
<div class="div14"></div>
<div class="div15"></div>
</body>
4.3.3 浮动元素具有行内块元素特性
<head>
<style type="text/css">
.span1 {
width: 100px;
height: 100px;
background-color: pink;
float: left;
}
</style>
</head>
<body>
h4>浮动元素具有行内块元素特性</h4>
<span class="span1">span属于行内元素，设置浮动后，具有行内块元素特性</span>
</body> 
4.4 浮动元素经常和标准流父级搭配使用
4.5 一个元素浮动了，其他兄弟元素也浮动
4.6 浮动盒子只影响盒子后面的标准流，不会影响前面的标准流
<head>
<style type="text/css">
.div17, .div20 {
background-color: green;
width: 200px;
height: 200px;
}
.div18, .div21 {
background-color: blue;
width: 300px;
height: 300px;
}
.div17 {
float: left;
}
.div19 {
float: left;
}
</style>
</head>
<body>
<h4>浮动盒子只影响盒子后面的标准流，不会影响前面的标准流</h4>
<h4>红色盒子和蓝色盒子是标准流，绿色盒子为浮动。红色盒子独占一行。绿色盒子悬浮在后面蓝色盒子上方。</h4>
<div class="div16">标准</div>
<div class="div17">浮动</div>
<div class="div18">标准</div>
<h4>绿色盒子和蓝色盒子是标准流，红色盒子为浮动。红色盒子悬浮在后面绿色盒子上方。</h4>
<div class="div19">浮动</div>
<div class="div20">标准</div>
<div class="div21">标准</div>
</body>
4.7 浮动的元素不会压住下面标准流的文字
<head>
<style>
.div10 {
float: left;
width: 100px;
height: 100px;
background-color: black;
}
</style>
</head>
<body>
<h3>浮动的元素不会压住下面标准流的文字</h3>
<div class="div10"></div>
<p>浮动的元素不会压住下面标准流的文字</p>
</body>
5 清除浮动
5.1 清除浮动语法
5.2 清除浮动方法
5.2.1 额外标签法（隔墙法）clear:both
<head>
<style type="text/css">
.div22 {
border: 5px red solid;
width: 300px;
}
.div23 {
width: 100px;
height: 100px;
background-color: pink;
float: left;
}
.div24 {
width: 100px;
height: 100px;
background-color: yellow;
float: left;
}.div25 {
width: 300px;
height: 100px;
background-color: black;
}
.clear {
/*清除浮动*/
clear: both;
}
</style>
</head>
<body>
<h4>清除浮动前</h4>
<div class="div22">
<div class="div23"></div>
<div class="div24"></div>
</div>
<div class="div25"></div>
<h4>清除浮动后</h4>
<div class="div22">
<div class="div23"></div>
<div class="div24"></div>
<!-- 新增盒子清除浮动，该盒子必须为块级元素 -->
<div class="clear"></div>
</div>
<div class="div25"></div>
</body>
5.2.2 父元素overflow
<head>
<style type="text/css">
.div22 {
border: 5px red solid;
width: 300px;
}
.div23 {
width: 100px;
height: 100px;
background-color: pink;
float: left;
}
.div24 {
width: 100px;
height: 100px;
background-color: yellow;
float: left;
}.div25 {
width: 300px;
height: 100px;
background-color: black;
}
.overflow {
/*清除浮动*/
overflow: hidden;
}
</style>
</head>
<body>
<h4>父元素overflow</h4>
<h4>清除浮动前</h4>
<div class="div22">
<div class="div23"></div>
<div class="div24"></div>
</div>
<div class="div25"></div>
<h4>清除浮动后</h4>
<div class="div22 overflow">
<div class="div23"></div>
<div class="div24"></div>
</div>
<div class="div25"></div>
</body>在外边距合并中解决嵌套块元素垂直外边距的塌陷也使用overflow:hidden。
5.2.3 after伪元素
<head>
<style type="text/css">
.div22 {
border: 5px red solid;
width: 300px;
}
.div23 {
width: 100px;
height: 100px;
background-color: pink;
float: left;
}
.div24 {
width: 100px;
height: 100px;
background-color: yellow;
float: left;
}.div25 {
width: 300px;
height: 100px;
background-color: black;
}
/*在父元素后面添加一个盒子，堵住浮动元素，类似于额外标签法*/
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
*zoom: 1;
}
</style>
</head>
<body>
<h4>父元素overflow</h4>
<h4>清除浮动前</h4>
<div class="div22">
<div class="div23"></div>
<div class="div24"></div>
</div>
<div class="div25"></div>
<h4>清除浮动后</h4>
<div class="div22 clearfix">
<div class="div23"></div>
<div class="div24"></div>
</div>
<div class="div25"></div>
</body>5.2.4 双伪元素
<head>
<style type="text/css">
.div22 {
border: 5px red solid;
width: 300px;
}
.div23 {
width: 100px;
height: 100px;
background-color: pink;
float: left;
}
.div24 {
width: 100px;
height: 100px;
background-color: yellow;
float: left;
}.div25 {
width: 300px;
height: 100px;
background-color: black;
}
/*在父元素前后都添加一个盒子，堵住浮动元素，类似于额外标签法*/
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
</style>
</head>
<body>
<h4>父元素overflow</h4>
<h4>清除浮动前</h4>
<div class="div22">
<div class="div23"></div>
<div class="div24"></div>
</div>
<div class="div25"></div>
<h4>清除浮动后</h4>
<div class="div22 clearfix">
<div class="div23"></div>
<div class="div24"></div>
</div>
<div class="div25"></div>
</body>5.2.5 清除浮动方法总结
6 总结
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.div1 {
width: 100px;
height: 100px;
background-color: pink;
/*圆角边框*/
border-radius: 30px;
}
.div2 {
width: 100px;
height: 100px;
background-color: pink;
/*半径取长宽的一半得到圆形*/
border-radius: 50%;
}
/*设置不同的圆角*/
.div3 {
width: 100px;
height: 100px;
background-color: pink;
/*左上角开始顺时针*/
border-radius: 10px 20px 30px 40px;
display: inline-block;
}
.div4 {
width: 100px;
height: 100px;
background-color: pink;
/*对角为一组*/
/*左上右下 右上左下*/
border-radius: 30px 40px;
display: inline-block;
}
.div5 {
width: 100px;
height: 100px;
background-color: pink;
/*拆开写*/
border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 40px;
display: inline-block;
}
/*盒子阴影*/
.div6 {
width: 100px;
height: 100px;
background-color: pink;
box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, 0.7);
}
.div7 {
margin-top: 10px;
width: 100px;
height: 100px;
background-color: pink;
}
.div7:hover {
box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, 0.7);
}
/*文字阴影*/
.h4_1 {
text-shadow: 5px 5px 6px rgba(0, 0, 0, 0.7)
}
/*浮动*/
.div8, .div9, .div10 {
width: 100px;
height: 100px;
background-color: pink;
}
.div8 {
float: left;
}
.div9 {
float: left;
}
.div10 {
float: right;
}
/*脱标*/
.div11 {
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
.div12 {
width: 200px;
height: 200px;
background-color: red;
}
/*浮动元素一行显示*/
.div13, .div14, .div15 {
width: 100px;
height: 100px;
float: left;
}
.div13 {
background-color: pink;
}
.div14 {
background-color: orange;
width: 200px;
height: 200px;
}
.div15 {
background-color: green;
}
/*浮动元素具有行内块元素特性*/
.span1 {
width: 100px;
height: 100px;
background-color: pink;
float: left;
}
/* 浮动盒子只影响盒子后面的标准流，不会影响前面的标准流*/
.div16, .div19 {
background-color: red;
width: 100px;
height: 100px;
}
.div17, .div20 {
background-color: green;
width: 200px;
height: 200px;
}
.div18, .div21 {
background-color: blue;
width: 300px;
height: 300px;
}
.div17 {
float: left;
}
.div19 {
float: left;
}
/*清除浮动*/
.div22 {
border: 5px red solid;
width: 300px;
}
.div23 {
width: 100px;
height: 100px;
background-color: pink;
float: left;
}
.div24 {
width: 100px;
height: 100px;
background-color: yellow;
float: left;
}.div25 {
width: 300px;
height: 100px;
background-color: black;
}
/*额外标签法*/
.clear {
/*清除浮动*/
clear: both;
}
/*父元素overflow*/
.overflow {
/*清除浮动*/
overflow: hidden;
}
/*after伪元素*/
/*在父元素后面添加一个盒子，堵住浮动元素，类似于额外标签法*/
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
*zoom: 1;
}
/*双伪元素*/
/*在父元素后面添加一个盒子，堵住浮动元素，类似于额外标签法*/
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
</style>
</head>
<body>
<h4>圆角边框</h4>
<div class="div1"></div>
<h4>圆形</h4>
<div class="div2"></div>
<h4>设置不同的圆角</h4>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>
<h4>盒子阴影</h4>
<div class="div6"></div>
<div class="div7"></div>
<h4 class="h4_1">文字阴影</h4>
<h4>浮动</h4>
<div class="div8">左</div>
<div class="div9">左</div>
<div class="div10">右</div>
<br><br><br><br>
<h4>浮动特性</h4>
<h4>脱标</h4>
<div class="div11">浮动的盒子</div>
<div class="div12">标准的盒子</div>
<h4>浮动元素一行显示</h4>
<div class="div13"></div>
<div class="div14"></div>
<div class="div15"></div>
<br><br><br><br><br><br><br><br><br>
<h4>浮动元素具有行内块元素特性</h4>
<span class="span1">span属于行内元素，设置浮动后，具有行内块元素特性</span>
<br><br><br><br><br>
<h4>浮动盒子只影响盒子后面的标准流，不会影响前面的标准流</h4>
<h4>红色盒子和蓝色盒子是标准流，绿色盒子为浮动。红色盒子独占一行。绿色盒子悬浮在后面蓝色盒子上方。</h4>
<div class="div16">标准</div>
<div class="div17">浮动</div>
<div class="div18">标准</div>
<h4>绿色盒子和蓝色盒子是标准流，红色盒子为浮动。红色盒子悬浮在后面绿色盒子上方。</h4>
<div class="div19">浮动</div>
<div class="div20">标准</div>
<div class="div21">标准</div>
<h4>额外标签法</h4>
<h4>清除浮动前</h4>
<div class="div22">
<div class="div23"></div>
<div class="div24"></div>
</div>
<div class="div25"></div>
<h4>清除浮动后</h4>
<div class="div22">
<div class="div23"></div>
<div class="div24"></div>
<!-- 新增盒子清除浮动，该盒子必须为块级元素 -->
<div class="clear"></div>
</div>
<div class="div25"></div>
<h4>父元素overflow</h4>
<h4>清除浮动前</h4>
<div class="div22">
<div class="div23"></div>
<div class="div24"></div>
</div>
<div class="div25"></div>
<h4>清除浮动后</h4>
<div class="div22 overflow">
<div class="div23"></div>
<div class="div24"></div>
</div>
<div class="div25"></div>
<h4>after伪元素</h4>
<h4>清除浮动前</h4>
<div class="div22">
<div class="div23"></div>
<div class="div24"></div>
</div>
<div class="div25"></div>
<h4>清除浮动后</h4>
<div class="div22 clearfix">
<div class="div23"></div>
<div class="div24"></div>
</div>
<div class="div25"></div>
<h4>双伪元素</h4>
<h4>清除浮动前</h4>
<div class="div22">
<div class="div23"></div>
<div class="div24"></div>
</div>
<div class="div25"></div>
<h4>清除浮动后</h4>
<div class="div22 clearfix">
<div class="div23"></div>
<div class="div24"></div>
</div>
<div class="div25"></div>
</body>
</html>
167
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
