一、盒模型简介
1.我们看到的网页其实是布局大大小小的盒子组合而来
2.盒子由以下几部分组成:
(1)内容区(content)
(2)内边距(padding)
(3)边框(border)
(4)外边距(margin)
二、内容区(content)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 200px;//此处设置的宽度仅为content区的宽度为200px,高度同理
height: 200px;
}
</style>
</head>
<body>
<div class="box">盒子模型</div>
</body>
</html>
三、边框(border)
1.边框会撑开盒子,影响盒子大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{//此时盒子的大小为240px*240px
width: 200px;
height: 200px;
border-width: 20px;
border-color: red;
border-style: solid;
}
</style>
</head>
<body>
<div class="box">盒子模型</div>
</body>
</html>
2.边框属性(不同的浏览器会有不同的默认的boder-width,boder-height)
3.表格的细线边框
四、内边距(padding)
1.盒子的内边距会撑开盒子,影响盒子大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 200px;
height: 200px;
border: 10px red solid;
padding: 20px;
background-color: #00a4ff;
}
.inner{
width: 100%;
height: 100%;
background-color: #00b38a;
}
</style>
</head>
<body>
<div class="box">//此时盒子大小为260px*260px
<div class="inner">内容区</div>
</div>
</body>
</html>
五、外边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 200px;
height: 200px;
border: 10px red solid;
background-color: #00a4ff;
}
.inner{
width: 100%;
height: 100%;
background-color: #00b38a;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="box">
<div class="inner">内容区</div>
</div>
</body>
</html>
1.外边距不会影响盒子可见框的大小,但会影响盒子实际占有空间的大小
2.注意:元素在页面中是按照自左向右的顺序排列的,所以默认情况下,我们设置左和上外边距会移动元素自身,而设置右和下外边距则会移动其他元素
3.外边距可以使块级元素居中但必须满足以下两个条件:
(1)盒子的宽度确定
(2)盒子的左右外边距设为:auto
4.外边距的折叠问题:条件:垂直方向且相邻的盒子
(1)兄弟元素折叠问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 200px;
height: 200px;
border: 10px red solid;
background-color: #00a4ff;
}
.first{
width: 50px;
height: 50px;
background-color: #00b38a;
margin-bottom: 40px;//两元素外边距不叠加,取二者较大值
}
.second {
width: 50px;
height: 50px;
background-color: #1c036c;
margin-top: 40px;
}
</style>
</head>
<body>
<div class="box">
<div class="first">盒子一</div>
<div class="second">盒子二</div>
</div>
</body>
</html>
运行结果:
(2)父子元素:父子元素间相邻外边距,子元素的上外边距会传递给父元素
解决折叠问题前:
解决折叠问题后:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 200px;
height: 200px;
border: 10px red solid;//解决折叠问题方案一:给父元素加边框
background-color: #00a4ff;
}
.son{
width: 50px;
height: 50px;
background-color: #00b38a;
margin-top: 40px;
}
</style>
</head>
<body>
<div class="box">
<div class="son">盒子</div>
</div>
</body>
</html>
解决问题方案:
(1)给子元素添加margin-top
(2)给父元素加边框(这两种方法的本质都是把父元素和子元素隔开,但需修改父元素盒子大小)
六、行内元素的盒模型
1.行内元素不支持设置高度和宽度
2.可为行内元素设置padding、margin、border,但这些样式只会在水平方向影响水平方向的盒子,不会影响垂直方向盒子的布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
span{
width: 200px;
height: 200px;
border: 10px red solid;
background-color: #00a4ff;
/*display: inline-block;*/
}
div{
width: 50px;
height: 50px;
background-color: #00b38a;
}
</style>
</head>
<body>
<span>行内元素</span>
<div>块级元素</div>
</body>
</html>
运行结果:
3.针对行内元素上述的特征,我们可以使用display将行内元素转换为块级元素,进行样式的设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
span{
width: 200px;
height: 200px;
border: 10px red solid;
background-color: #00a4ff;
display: inline-block;//display:inline(转换为行内元素)/block(转换为块级元素)/inline-block(行内块元素)
}
div{
width: 50px;
height: 50px;
background-color: #00b38a;
}
</style>
</head>
<body>
<span>行内元素</span>
<div>块级元素</div>
</body>
</html>
运行结果:
4.行内块元素:行内块元素具有块级元素的所有特性,同时行内块元素并不独占一行
5.补充:display还可设置元素的隐藏效果
display | |
---|---|
table | |
none | display属性值设为none时,隐藏元素且不占有位置 |
6.补充visibility属性
visibility | |
---|---|
visible | 元素正常显示在页面 |
hidden | 隐藏元素,且占据位置 |
七、盒子大小
1.box_sizing属性
属性值 | |
---|---|
content-box | 设置height、width属性来设置盒子的内容区大小 |
border-box | 设置height、width属性来设置盒子的可见框大小 |
八、轮廓、阴影和圆角
1.outline(轮廓):用法与border一只,与border不同,设置元素的轮廓不会影响其他盒子的布局
2.box-shadow(阴影):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 100px;
height: 100px;
background-color: #00b38a;
box-shadow: 10px 10px rgba(255,145,223,.3);//水平偏移 数值大小 阴影颜色及透明度
}
</style>
</head>
<body>
<div>块级元素</div>
</body>
</html>
运行结果:
3.border-radius(圆角)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 100px;
height: 100px;
background-color: #00b38a;
border-radius: 10px;//设置半径大小
}
</style>
</head>
<body>
<div>块级元素</div>
</body>
</html>
运行结果: