盒子模型
盒子模型的介绍
- CSS中规定每个盒子分别由:内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域(margin) 构成,这就是盒子模型。
边框(border)
单个属性
<div class="box"></div>
.box {
width: 300px;
height: 300px;
/*边框的粗细*/
border-width: 5px;
/*边框的样式*/
border-style: solid;
/*边框的颜色*/
border-color: orange;
}
连写形式
边框连写没有顺序之分 取值之间用空格隔开
推荐写法:border::粗细 样式 颜色
<div class="box1"></div>
.box1 {
width: 200px;
height: 200px;
border: 2px dotted blue;
}
单方向设置
只给盒子的某个方向单独设置边框
boder-方位名词:粗细 样式 颜色
<div class="box"></div>
.box {
width: 300px;
height: 300px;
/*上边框*/
border-top: 5px solid red;
/*右边框*/
border-right: 10px dashed pink;
/*下边框*/
border-bottom: 15px dotted orange;
/*左边框*/
border-left: 20px solid yellow;
}
内边距(padding)
边框与内容区域之间的距离
从上开始赋值,然后顺时针赋值,如果没有赋值的,看对面的!
<div class="box">padding设置边框到内容的距离</div>
.box {
width: 300px;
height: 300px;
background-color: pink;
/* 一个值 上下左右 */
padding: 10px;
/* 两个值 上下 左右 */
padding: 10px 20px;
/* 三个值 上 左右 下 */
padding: 10px 20px 30px;
/* 四个值 上 右 下 左 */
padding: 10px 20px 30px 40px;
}
内边距(padding)—单方向设置
只给盒子的某个方向单独设置内边距
padding-方位名词:数字+px;
<div class="box">padding单方向设置</div>
.box {
width: 300px;
height: 300px;
background-color: pink;
/* 上内边距 */
padding-top: 15px;
/* 右内边距 */
padding-right: 30px;
/* 下内边距 */
padding-bottom: 30px;
/* 左内边距 */
padding-left: 20px;
}
盒子实际大小计算公式
- 盒子宽度 = 左边框 + 左padding + 内容宽度 + 右padding + 右边框
- 盒子高度 = 上边框 + 上padding + 内容宽度 + 下padding + 下边框
当盒子被border撑大后
手动内减
计算多余大小,手动在内容中减去。 项目中计算量太大,不推荐!
自动内减
给盒子设置属性 box-sizing : border-box ; 即可,浏览器会自动计算多余大小,自动在内容中减去
<div class="box"></div>
* {
/* 自动内减 */
box-sizing: border-box;
}
.box {
width: 300px;
height: 300px;
background-color: pink;
border: 5px solid #000;
padding: 20px;
/* 手动內减 */
/* width: 250px;
height: 250px; */
}
不会撑大盒子的特殊情况(块级元素)
如果子盒子没有设置宽度,宽度默认是父盒子的宽度
此时给子盒子设置左右的padding或者左右的border,此时不会撑大子盒子
外边距(margin)
设置边框以外,盒子与盒子之间的距离
从上开始赋值,然后顺时针赋值,如果设置赋值的,看对面的!
<div class="box"></div>
.box {
width: 300px;
height: 300px;
background-color: pink;
/* 一个值 上下左右 */
margin: 10px;
/* 两个值 上下 左右 */
margin: 10px 20px;
/* 三个值 上 左右 下 */
margin: 10px 20px 30px;
/* 四个值 上 右 下 左 */
margin: 10px 20px 30px 40px;
}
外边距(margin)—单方向设置
只给盒子的某个方向单独设置外边距
margin - 方位名词:数字 + px;
<div class="box">margin单方向设置</div>
.box {
width: 300px;
height: 300px;
background-color: pink;
/* 上外边距 */
margin-top: 15px;
/* 右外边距 */
margin-right: 30px;
/* 下外边距 */
margin-bottom: 30px;
/* 左外边距 */
margin-left: 20px;
}
清除默认的内外边距
浏览器会默认给部分标签设置默认的margin和padding,但一般在项目开始前需要先清除这些标签默认的 margin和padding。
比如:body标签默认有margin:8px
比如:p标签默认有上下的margin
比如:ul标签默认由上下的margin和padding-left
......
解决方法:
第一种
blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul {
margin: 0;
padding: 0;
}
第二种
*{
margin:0;
padding:0;
}
版心
<div class="box">
<div class="container">版心</div>
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box {
height: 40px;
background-color: #333;
}
.container {
width: 1226px;
height: 40px;
line-height: 40px;
background-color: gray;
/* 盒子水平居中 */
margin: 0 auto;
}