本文详细介绍了CSS3中的盒子模型，包括盒子模型的组成部分：margin、border、padding和内容宽度。讨论了边框的样式、颜色和粗细，以及外边距的计算方式。接着讲解了浮动布局，探讨了标准文档流、display和float属性，以及如何解决父级边框塌陷问题。还涵盖了定位技术，包括相对定位、绝对定位和固定定位，并解释了z-index在图层叠放中的作用。最后提到了CSS3动画基础，并给出了学习资源。
文章目录
2.4 盒子模型
2.4.1 什么是盒子模型
margin：外边距
border：边框
padding：内边距
2.4.2 边框
- 边框的粗细
- 边框的样式
- 边框的颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
/*body总有一个默认的外边距margin：0；常见操作*/
margin: 0;
padding: 0;
text-decoration: none;
}
/*border:粗细，样式，颜色*/
#box{
width: 300px;
border: 1px solid red;
}
h2{
font-size: 16px;
background-color: #535667;
line-height: 30px;
margin: 0;
color: white;
}
form{
background: green;
}
div:nth-of-type(1)>input{
border: 3px solid black;
}
div:nth-of-type(2)>input{
border: 3px dashed #b0e0e6;
}
div:nth-of-type(3)>input{
border: 2px dashed #e6bfb0;
}
</style>
</head>
<body>
<div id="box">
<h2>会员登陆</h2>
<form action="#">
<div>
<span>用户名：</span>
<input type="text">
</div>
<div>
<span>密码：</span>
<input type="text">
</div>
<div>
<span>邮箱：</span>
<input type="text">
</div>
</form>
</div>
</body>
</html>
2.4.3 外边距
<!--外边距的妙用：居中元素-->
<!--margin: 0 auto;-->
<style>
#box{
width: 300px;
border: 1px solid red;
margin: 0 auto;
}
/*
顺时针选装：
margin: 0
margin: 0 1px
margin: 0 1px 2px 3px
*/
h2{
font-size: 16px;
background-color: #41d741;
line-height: 30px;
color: white;
margin: 0;
}
form{
background: #41d741;
}
input{
border: 1px solid black;
}
div:nth-of-type(1){
padding: 10px;
}
</style>
盒子的计算方式：你这个元素到底多大 margin + border + padding + 内容宽度 = 50 * 50
2.4.4 圆角边框
<!--顺时针方向：左上 右上 右下 左下
圆圈：圆角 = 宽度(半径)-->
<style>
div{
width: 100px;
height: 100px;
border: 10px solid red;
border-radius: 100px;
}
</style>
div{
width: 50px;
height: 50px;
margin: 30px;
background: red;
border-radius: 50px 0 0 0;
}
img{
border-radius: 200px;
}
2.4.5 盒子阴影
div{
width: 100px;
height: 100px;
border: 10px solid red;
box-shadow: 10px 10px 100px yellow;
}
源码之家：网页模板
layui
vue-element-admin
element
ice.work
门户网站 模板之家
2.5 浮动
2.5.1 标准文档流
- 块级元素：独占一行
h1~h6 p div 列表...
- 行内元素：不占一行
span a img strong...
行内元素可以被包含在块级元素中，反之，则不可以
2.5.2 display和float
/*display: block; 块元素
inline; 行内元素
inline-block; 是块元素，但是可以内联，在一行！
none*/
div{
width: 100px;
height: 100px;
border: 1px solid red;
display: inline;
}
/*float：左右浮动*/
span{
width: 100px;
height: 100px;
border: 1px solid red;
display: inline-block;
float: right;
}
- display是实现行内元素排列的方式，但是我们很多情况都是用float
2.5.3 父级边框塌陷的问题
塌陷：元素范围超出边框，边框塌陷，并不能将框内元素完全框起来
- clear
/*
clear： right; 右侧不允许有浮动元素
clear： left; 左侧不允许有浮动元素
clear： both; 两侧不允许有浮动元素
clear: none;
*/
解决方案：
- 增加父级元素的高度
#father{
border: 1px #000 solid;
height: 800px;
}
- 增加一个空的div标签，清除浮动
<div class="clear"></div>
.clear{
clear: both;
margin: 0;
padding: 0;
}
- overflow：在父级元素中增加
/*overflow: hidden; 隐藏
overflow: scroll; 滑动条*/
#content{
width: 200px;
height: 150px;
overflow: scroll;
}
- 在父类添加一个伪类：after
#father:after{
content: '';
display: block;
clear: both;
}
- 小结
- 浮动元素后面增加空div
- 简单，代码中尽量避免空的div
- 设置父元素的高度
- 简单，元素假设有了固定的高度，就会被限制
- overflow
- 简单，下拉的一些场景尽量避免使用
- 父类添加伪类
- 写法复杂，但是没有副作用，推荐使用
- 浮动元素后面增加空div
2.5.4 对比
- display
- 方向不可控制
- float
- 浮动起来的话脱离标准文档流，所以要解决父级边框塌陷的问题
2.6 定位
2.6.1 相对定位
position：relative; 仍然在标准文档流中，原来的位置会被保留，不会被其他元素占用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
padding: 20px;
}
/*相对定位：相对于自己原来的位置进行偏移
新的位置通过这种偏移后回到原来的位置*/
div{
margin: 10px;
padding: 5px;
font-size: 12px;
line-height: 25px;
}
#father{
border: 1px solid #666;
}
#first{
background-color: #a13d30;
border: 1px solid #cd7842;
position: relative; /*相对定位：上下左右*/
top: -20px;
left: 20px;
}
#second{
background-color: #255099;
border: 1px dashed #7cc13c;
}
#third{
background-color: #1c6699;
border: 1px dashed #1a5798;
position: relative;
bottom: -10px;
right: 20px;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>
- 练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box{
width: 300px;
height: 300px;
border: 2px solid red;
padding: 10px;
}
a{
width: 100px;
height: 100px;
text-decoration: none;
background: pink;
line-height: 100px;
text-align: center;
color: black;
display: block;
}
a:hover{
background: #4c4cea;
}
.a2, .a4{
position: relative;
left: 200px;
top: -100px;
}
.a5{
position: relative;
left: 100px;
top: -300px;
}
</style>
</head>
<body>
<div id="box">
<a class="a1" href="#">链接1</a>
<a class="a2" href="#">链接2</a>
<a class="a3" href="#">链接3</a>
<a class="a4" href="#">链接4</a>
<a class="a5" href="#">链接5</a>
</div>
</body>
</html>
2.6.2 绝对定位
定位：基于xxx定位，上下左右（相隔定位点的距离）
-
没有父级元素定位的前提下，相对于浏览器定位
-
假设父级元素存在定位，我们通常会相对于父级元素进行偏移（常用）
-
在定位元素范围内移动
相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，他不在标准文档流中，原来的位置不会被保留
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
margin: 10px;
padding: 5px;
font-size: 12px;
line-height: 25px;
}
#father{
border: 1px solid #666;
padding: 0;
position: relative;
}
#first{
background-color: #a13d30;
border: 1px solid #cd7842;
}
#second{
background-color: #255099;
border: 1px dashed #7cc13c;
position: absolute;
right: 30px;
top: -10px;
}
#third{
background-color: #1c6699;
border: 1px dashed #1a5798;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>
2.6.3 固定定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
height: 1000px;
}
/*绝对定位：相对于浏览器*/
div:nth-of-type(1){
width: 100px;
height: 100px;
background: red;
position: absolute;
right: 0;
bottom: 0;
}
/*fixed：固定定位(无论浏览器怎么走元素位置不动)*/
div:nth-of-type(2){
width: 50px;
height: 50px;
background: yellow;
position: fixed;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div>absolute</div>
<div>fixed</div>
</body>
</html>
2.6.4 z-index
图层：最低0，最高无限
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="content">
<ul>
<li><img src="images/1.webp" alt=""></li>
<li class="tipText">学习Java</li>
<li class="tipBg"></li>
<li>时间：2021.02.17</li>
<li>地点：家里</li>
</ul>
</div>
</body>
</html>
#content{
width: 380px;
padding: 0;
margin: 0;
overflow: hidden;
font-size: 12px;
line-height: 25px;
border: 1px black solid;
}
ul, li{
padding: 0;
margin: 0;
list-style: none;
}
/*父级相对定位*/
#content ul{
position: relative;
}
.tipText, .tipBg{
position: absolute;
top: 216px;
}
.tipText{
color: white;
z-index: 999;
}
.tipBg{
background: black;
width: 380px;
height: 25px;
opacity: 0.5; /*背景透明度*/
}
2.7 动画
2.8 总结
扫一扫
254
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
