【CSS基础】盒子模型

2024-01-01 20:30:04

盒子模型概述

盒子模型即 box model，无论是 div、span 还是 a 都是盒子模型。

盒子模型中的区域

Margin（外边距）- 清除边框区域。Margin 没有背景颜色，它是完全透明
Border（边框）- 边框周围的填充和内容。边框是受到盒子的背景颜色影响
Padding（内边距）- 清除内容周围的区域。会受到框中填充的背景颜色影响
Content（内容）- 盒子的内容，显示文本和图像，有 width 和 height

元素的宽度和高度

元素宽度： 总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素高度： 总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

示例： 下面的例子中的元素的总宽度为 300px

width: 250px;        
padding: 10px;        
border: 5px solid gray;        
margin: 10px;

标准盒模型和 IE 盒模型

标准盒模型：

IE 盒模型

标准盒模型和 IE 盒模型的区别

在标准盒模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
在IE 盒模型中，width 和 height 指的是 "内容区域 + border + padding" 的宽度和高度。

用 `box-sizing` 改进传统盒模型

传统的盒子模型存在的问题是：当我们设置了元素的宽度后，由于 padding 和 border 会撑开元素，因此实际展现的元素比我们预想的要宽，见下面的例子：

.simple {
    width: 500px;
    margin: 20px auto;
}

.fancy {
    width: 500px;
    margin: 20px auto;
    padding: 50px;
    border-width: 10px;
}

最终实现的效果如下，可以发现 fancy 比 simple 要宽：

以前的 CSS 开发者需要通过数学计算来得到想要的宽度，然而新增的 box-sizing 属性提供了更简便的方法。通过设置一个元素为 box-sizing: border-box，则此元素的内边距和边框不会再增加它的宽度：

* {
-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
        box-sizing: border-box;
}

加入上面的代码后，可以发现 fancy 和 simple 的宽度相同：

需要注意的是，由于 box-sizing 是一个很新的属性，因此最好使用 -webkit- 和 -moz- 前缀，来启用特定浏览器中的特性。

有关 margin

margin - 外边距

margin 没有背景颜色，完全透明（不是白色）
margin 有四个方向，分别为margin-top、margin-right、margin-bottom、margin-left。当一起定义时，方向依次为上右下左：

margin: 10px 5px 7px 15px;
width: 20px;
height: 20px;

margin 可以取负值

1、`margin-left` 和 `margin-right` 取负值

(1) 元素本身没有宽度，会增加宽度

.wrap {
    background-color: #F0DEFD;
    margin: 100px auto 0; 
    width: 800px;
    height: 300px;
}
.box {
    background-color: #DEFDE0;
    margin-left:-100px;
    height: 200px;
}

/*html*/
<div class="wrap">
    最外层的宽度为800px
    <div class="box">里层的元素设置了 margin-left: -100px</div>
</div>

(2) 元素本身有宽度，会发生位移

.wrap {
    background-color: #F0DEFD;
    margin: 100px auto 0; 
    width: 800px;
    height: 300px;
}
.box {
    background-color: #DEFDE0;
    margin-left:-100px;
    width: 800px;
    height: 200px;
}

/*html*/
<div class="wrap">
    最外层的宽度为800px
    <div class="box">里层的元素设置了 margin-left: -100px</div>
</div>

2、`margin-top` 取负值

不管是否设置高度，都不会增加高度，而是会向上产生位移：

.wrap {
    background-color: #F0DEFD;
    margin: 100px auto 0; 
    width: 800px;
    height: 300px;
}
.box {
    background-color: #DEFDE0;
    margin-top: -100px;
}

/*html*/
<div class="wrap">
    最外层的宽度为800px
    <div class="box">里层的元素设置了 margin-top: -100px</div>
</div>

3、`margin-bottom` 取负值

不会位移,而是会减少自身供css读取的高度

.wrap {
    background-color: #F0DEFD;
    margin-bottom: -100px;
    width: 800px;
    height: 200px;
}
.box {
    background-color: #DEFDE0;
    width: 800px;
    height: 20px;
}

/*html*/
<div class="wrap">高度为200px，元素设置了 margin-bottom: -100px</div>
<div class="box">元素高度为20px</div>

注意 <body> 标签也有margin

<body>标签占据的并不是整个页面全部区域。整个网页最大的盒子其实是<document>，即浏览器，而<body>是<document>的儿子，<body>默认的 margin 大小是8个像素。

有关 padding

padding - 内边距

padding 区域有背景颜色，并且背景颜色和内容区域的相同，也就是说，background-color 将填充所有 border 以内的区域。
padding 和 margin 类似，也有四个方向。

有关 border

border 三要素

border 的三要素为粗细、线型、颜色，其中线型的取值如下：

如下面的代码，将四个边框成设置了相同的样式：

border: 10px solid black;

border 拆分

(1) 按属性拆分

一个 border 属性，是由三个小属性综合而成的，即 border-width、 border-style、 border-color。如果某一个小属性后面是空格隔开的多个值，那么依次是上右下左的顺序，示例如下：

border-width: 10px 20px;
border-style: solid dashed dotted; /*上边框为实线，左右为虚线，下边框为点状*/
border-color: #FDDFDF #FCF7DE #DEFDE0 #F0DEFD;  /*顺序：上右下左*/

(2) 按方向拆分

上下左右边框分别为 border-top、border-right、border-bottom、border-left，可以分别设置样式。示例如下：

border-top: 10px solid #FDDFDF;
border-right: 10px solid #FCF7DE;
border-bottom: 10px solid #DEFDE0;
border-left: 10px solid #F0DEFD;

(3) 按属性和方向同时拆分

注意用小属性层叠大属性

【示例1】 设置右边框和其它边框颜色不同

border: 10px solid #FDDFDF;
border-right-color: #FCF7DE;

【示例2】 设置上下边框为实线，左右边框为虚线

border: 10px solid #F0DEFD;
border-style: solid dashed;

利用 border 画出一个三角形

border 可以没有：

border: none;

border 可以某一条边没有：

border-left: none;

border 可以设置 width 为0：

border-left-width: 0px;

通过将其它三条边框隐藏，可以利用 border 画出一个三角形，示例如下：

div {
    width: 0px;
    height: 0px;
    border: 50px solid white;
    border-top-color: red;
    border-bottom: none;
}

码农公寓