盒子模型

338 阅读3分钟

盒子模型

盒子模型的介绍

  • CSS中规定每个盒子分别由:内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域(margin) 构成,这就是盒子模型

box.png

边框(border)

单个属性

border.png

 <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)

边框与内容区域之间的距离

从上开始赋值,然后顺时针赋值,如果没有赋值的,看对面的!

padding.png

 <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;
}

盒子实际大小计算公式

border1.png

  • 盒子宽度 = 左边框 + 左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)

设置边框以外,盒子与盒子之间的距离

从上开始赋值,然后顺时针赋值,如果设置赋值的,看对面的!

margin.png

 <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;
}