CSS盒模型

blankです

已于 2022-07-20 19:46:04 修改

阅读量1.5k

点赞数

文章标签：前端

于 2022-04-09 20:12:19 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_47782618/article/details/124064011

版权

本文详细介绍了CSS盒模型，包括标准盒模型的内容、padding、border、margin，怪异盒模型的box-sizing属性，以及弹性盒模型的原理和相关属性。通过实例解析，帮助读者深入理解各种盒模型在布局中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 盒模型的概念

CSS盒模型本质上是一个盒子，封装着周围的HTML元素，它包括外边距margin，边框border，内边距padding和实际内容content。

把盒子模型看成一个快递，快递里面的物品就是content，快递里面的缓冲物就是padding，快递盒子就是border，两个快递间的距离就是margin。

2. 标准盒模型

根据W3C的规范，盒子实际内容content的宽度和高度等于我们设置的width和height，而盒子总宽度=width+padding+border+margin，总高度=height+padding+border+margin。

2.1 content

content区域包括width和height两个属性。

min-width：最小宽度 max-width：最大宽度

min-height：最小高度 max-height：最大高度

块级元素的默认宽度为100%，行内元素的默认宽度由内容撑开。

块级元素和行内元素的默认高度都由内容撑开。

块级元素可以设置宽高属性，行内元素设置宽高属性无效。

2.2 padding

定义元素边框和元素内容之间的空间。

padding分为padding-top，padding-right，padding-bottom和padding-left。

padding-top:10px;
padding-right:10px;
padding-bottom:10px;
padding-left:10px;

简写方式1：

padding:10px 15px 20px 25px;

表示padding-top为10px，padding-right为15px，padding-bottom为20px，padding-left为25px。

简写方式2：

padding:10px 15px 20px;

表示padding-top为10px，padding-left和padding-right为15px，padding-bottom为20px。

简写方式3：

padding:10px 15px;

表示padding-top和padding-bottom为10px，padding-left和padding-right为15px。

简写方式4：

padding:10px;

表示padding-top、padding-bottom、padding-left和padding-right均为10px。

2.3 border

定义元素边框的样式和颜色。

2.3.1 边框样式：border-style

值	说明
none	无边框
dotted	点线边框
dashed	虚线边框
solid	实线边框
double	定义两个边框，两个边框的宽度和border-width相同

border-style:dashed solid;

表示上下边框为虚线边框，左右边框为实线边框，使用方法与padding类似，顺序均为上为起点，顺时针方向为顺序。

必须设置border-style属性才能设置border-width属性和border-color属性。

2.3.2 边框宽度：border-width

2.3.3 边框颜色：border-color

2.3.4 简写属性：border

2.3.5 利用border绘制三角形和梯形

三角形：父元素宽高设置为0，如果需要向上的三角形，则设置border-bottom、border-left和border-right，不设置border-top，然后将border-left和border-right的border-color属性设置为transparent。

<head>
    <style>
        .box{
            width: 0;
            height: 0;
            border-top: 10px solid transparent;
            border-bottom: 10px solid transparent;
            border-left: 10px solid red;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>

梯形：在三角形的基础上，如果梯形的平行边横向放置，则对父元素设置宽度；如果梯形的平行边垂直放置，则对父元素设置高度。

<head>
    <style>
        .box{
            width: 10px;
            height: 0;
            border-bottom: 10px solid red;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>

2.4 margin

定义元素周围的空间。

分为margin-top，margin-right、margin-bottom和margin-left，使用方式与padding类似。

2.4.1 margin应用

块级元素水平居中：

margin:0 auto;

2.4.2 margin注意事项

1. 当两个元素的margin在垂直方向相撞时，取两者的较大值，而不是将margin-top和margin-bottom相加

<head>
    <style> .one,.two{ width: 200px; height: 200px; }
    .one{ background-color: red; margin-bottom: 50px; }
    .two{ background-color: blueviolet; margin-top: 100px; }
    </style>
<head>
<body>       
    <div class="one"></div> 
    <div class="two"></div>
</body>

2. 当子元素设置了margin-top时，父元素也会随着子元素的移动而移动（需要注意的是，尽管父元素移动了，但父元素的margin-top仍为原始值）

解决父元素一起移动的问题有以下四种方法：

① 父元素设置overflow:hidden;（如下代码）

② 父元素或子元素设置float

③ 父元素设置border:1px solid transparent;

④父元素设置padding-top:1px

<head>
    <style>
        .box{ 
            width: 400px; 
            height: 400px; 
            background-color: red; 
            overflow: hidden; 
        }
        .box1{ 
            width: 200px; 
            height: 200px; 
            background-color: blueviolet; 
            margin-top: 50px; 
        }
    </style>
<head>
<body>       
    <div class="box"> 
        <div class="box1"></div> 
    </div>
</body>

3. 怪异盒模型

怪异盒模型，即IE盒子模型。

标准盒模型与怪异盒模型的区别：怪异盒模型的width和height包括了border和padding。

width=border+padding+content，height=border+padding+content

盒子总宽度=width+margin，盒子总高度=height+margin

怪异盒模型的使用场景：当元素的width和height固定，此时需要添加padding或者border，可将标准盒模型转换为怪异盒模型。

3.1 box-sizing属性

box-sizing属性可以指定盒子模型种类，content-box指定盒子模型为W3C（标准盒子模型），border-box指定盒子模型为IE盒子模型（怪异盒模型）。

4. 弹性盒模型

CSS3弹性盒模型是一种当页面需要适应不同屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

弹性盒模型主要用于移动端。

4.1 弹性盒内容

弹性盒由弹性容器（flex container）和弹性盒子元素（flex item）组成。

弹性容器外及弹性盒子元素内部是正常渲染的，弹性盒只定义了弹性盒子元素如何在弹性容器中布局。

弹性盒子元素在弹性容器中通常以行显示，默认每个容器只有一行。

主轴是弹性盒子元素沿着排列的轴，与主轴垂直的叫做侧轴。

主轴默认为x轴，侧轴默认为y轴。

4.2 父元素上的属性

注意：float属性在弹性盒模型中不生效。

4.2.1 dispaly属性

dispaly:flex;

开启弹性盒，属性设置后弹性盒子元素默认水平排列。

4.2.2 flex-direction属性

flex-direction属性指定弹性盒子元素在弹性容器中的位置。

值	说明
row	默认值，横向从左到右排列（123），向左对齐
row-reverse	反转横向排列，向右对齐，最后一项在最前面（321）
column	纵向从上到下排列，向上对齐
column-reverse	反转纵向排列，向下对齐，最后一项在最上面

4.2.3 justify-content属性

justify-content属性设置弹性盒子元素在主轴上的对齐方式。

值	说明
flex-start	默认值，弹性盒子元素向行头紧挨着填充
flex-end	弹性盒子元素向行尾紧挨着填充
center	弹性盒子元素居中紧挨着填充，如果剩余的自由空间为负，则弹性盒子元素将在两个方向上同时溢出
space-between	弹性盒子元素平均分布在一行上。如果剩余空间为负或者只有一个弹性盒子元素，该值等同于flex-start；否则第一个弹性盒子元素的外边距与行的主轴起点对齐，最后一个弹性盒子元素的外边距与行的主轴终点对齐，剩余的弹性盒子元素均匀分布在该行上
space-around	弹性盒子元素平均分布在一行上。两边留有一半的空间间隔。如果剩余空间为负或者只有一个弹性盒子元素，该值等同于center；否则每个弹性盒子元素的间隔相等，假设为x，同时首尾两边和弹性容器之间留有一般的间隔，即x/2

4.2.4 align-items属性

align-items属性设置弹性盒子元素在侧轴上的对齐方式。

值	说明
flex-start	弹性盒子元素的侧轴起始位置的边界紧靠住该行的侧轴起始边界
flex-end	弹性盒子元素的侧轴起始位置的边界紧靠住该行的侧轴结束边界
center	弹性盒子元素在该行的侧轴上居中放置，如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度

4.2.5 flex-wrap属性

flex-wrap属性指定子元素在父元素中是单行显示还是多行显示。

值	说明
nowrap	单行显示
wrap	自上而下、自左向右多行显示
wrap-reverse	自下而上、自左向右多行显示

4.3 子元素上的属性

4.3.1 flex-grow属性

flex-grow属性：根据弹性盒子元素所设置的扩展因子作为比率来分配空间。

默认值为0，即如果存在剩余空间，也不放大。

简而言之，就是子元素占父元素剩余空间的比例。

<head>
    <style>
        div.box { display:flex; }
        div.son { flex-grow:1; }
    </style>
<head>
<body>
    <div class="box">
        <div class="son">first</div>
        <div class="son">second</div>
        <div class="son">third</div>
        <!--每个子元素占父元素剩余空间的1/3-->
    </div>
</body>

4.3.2 flex-basis属性

flex-basis属性表示弹性子元素在弹性盒中的原始宽度，分为三种情况：

（1）当所有弹性子元素的flex-basis属性之和恰好等于弹性盒的宽度时，弹性子元素在弹性盒中正常分配。

（2）当所有弹性子元素的flex-basis属性之和小于弹性盒的宽度时，弹性子元素在弹性盒中正常分配，但弹性盒的右部会有留空。

（3）当所有弹性子元素的flex-basis属性之和大于弹性盒的宽度时，将会按所有弹性子元素的flex-basis属性之比分配每个弹性子元素在弹性盒中的宽度。

<head>
    <style> 
    #myDIV {
        width:300px;
        height:300px;
        border:1px solid black;
        display:flex;
    }
    .one{flex-basis:60px;}
    .two{flex-basis:150px;}
    .three{flex-basis:100px;}
    </style>
</head>
<body>
    <div id="myDIV">
        <div class="one" style="background-color:coral;">红色</div>
        <div class="two" style="background-color:lightblue;">蓝色</div>  
        <div class="three" style="background-color:lightgreen;">绿色</div>
    </div>
</body>

5. 浏览器内核和厂商前缀

浏览器最核心的部分：渲染引擎。负责对网页语法的解释，即解析HTML、CSS和JS。

CSS3出现的一些新功能导致不同的浏览器不能兼容，于是就有了厂商前缀。

浏览器	厂商前缀	内核
Chrome	-webkit-	blink
Safari	-webkit-	webkit
Firefox	-moz-	gecko
Opera	-o-	blink
IE	-ms-	trident

body{
    -webkit-width:200px;
    -moz-width:200px;
    -o-width:200px;
    -ms-width:200px;
    width: 200px;
}