目录
一、盒子在网页中的呈现
盒模型的宽度=width+padding+border=margin
盒模型的宽度=width+padding-left+padding-right+border-right+border-left+margin-left+margin-right
内padding外margin
width | 宽度 | ||
padding | 内边距 | 有效内容和边框的距离 | padding-left padding-right |
border | 4个边框 | border-left border-right | |
margin | 外边距 | 两个盒子的距离 调整盒子的距离 | margin-left margin-right |
二、各个部分的介绍
1.border边框
(1)语法:
border:border-width||border-style||border-color
border-width:边框宽度
border-style:边框样式
none | 没有边框,即忽略所有边框的宽度(默认值) |
solid | 边框为单实线(最常用) |
dashed | 边框为虚线 |
dotted | 边框为点线 |
double | 边框为双实线 |
border-color:边框颜色
(2)表格的细线边框:
border-collpase:collpase
/*表示边框合并再一起*/
(3)盒子边框总结:
设置内容 | 样式属性 | |||
边框宽度 border-width | 边框样式 border-style | 边框颜色 border-color | ||
上边框 | border-top-width | border-top-style | border-top-color | |
下边框 | border-bottom-width | border-bottom-style | border-bottom-color | |
左边框 | border-left-width | border-left-style | border-left-color | |
右边框 | border-right-width | border-right-style | border-right-color |
2.内边距 padding
设置了盒子的内边距之后,在浏览器中显示的盒子会增大,此时必须减小width
padding-top | 上边距 |
padding-bottom | 下边距 |
padding-left | 左边距 |
padding-right | 右边距 |
注意:padding后面跟几个数值的意思是不一样的
值的个数 | 表达意思 |
1个值 | padding:3px 上下左右都是3px |
2个值 | padding:3px 5px 上下3px 左右5px |
3个值 | padding:3px 5px 10px 上3px 左右5px 下10px |
4个值 | padding:3px 5px 10px 15px 上3px 右5px 下10px 左15px(顺时针) |
3.外边距 margin
(1)总结
margin-top | 上外边距 |
margin-bottom | 下外边距 |
margin-left | 左外边距 |
margin-right | 右外边距 |
margin | 上下左右边距 |
值的个数 | 表达意思 |
1个值 | margin:3px 上下左右都是3px |
2个值 | margin:3px 5px 上下3px 左右5px |
3个值 | margin:3px 5px 10px 上3px 左右5px 下10px |
4个值 | margin:3px 5px 10px 15px 上3px 右5px 下10px 左15px(顺时针) |
(2)外边距实现盒子居中
可以让一个盒子实现水平居中,需要满足以下两个条件:
1.必须是块级元素 |
2.盒子必须制定宽度 width |
.box{
width:300px;
margin:0 auto;
}
(3)清除元素的默认边距:全局选择器
*{
margin:0; /*清除外边距*/
padding:0; /*清除内边距*/
}
(4)外边距合并
相邻块元素垂直外边距的合并(外边距塌陷) | 尽量避免 |
嵌套块元素垂直外边距的合并 | 1.父元素定义上边框或上内边距 2.为父元素添加 overflow:hidden |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*外边距塌陷,尽量去避免,两个外边距,会选一个大的*/
.father{
width: 400px;
height: 600px;
border: 1px solid black;
margin: 0 auto;
}
.first-child{
width: 200px;
height: 200px;
background-color: pink;
margin-bottom: 80px;
}
.second-child{
width: 200px;
height: 200px;
background-color: blue;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="father">
<div class="first-child"></div>
<div class="second-child"></div>
</div>
</body>
</html>
有关:嵌套块元素垂直外边距的合并,详情请看三个盒子的嵌套,下面为你指路: