盒子模型（01）

所谓盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形盒子都由元素的内容、内边距(padding)、边框(border)和外边距(margin)组成。

雯雯紫云府

2090人浏览 · 2024-06-18 23:27:41

雯雯紫云府 · 2024-06-18 23:27:41 发布

1. 盒子模型（Box Model）

2.盒子模型的宽和高

盒子模型的总宽=width+左右内边距之和+左右边框宽度之和+左右外边距之和

盒子模型的总高度=height+上下内边距之和+上下边框宽度之和+上下外边距之和

3.盒子边框（border）

语法： border : border-width：上边 [左边下边左边] ; | border-style：上边 [左边下边左边] ;| border-color ：上边 [左边下边左边] ;

属性	作用
border-width	定义边框粗细，单位是px
border-style	边框的样式
border-color	边框颜色

边框样式（border-style），常用属性值如下： none：没有边框即忽略所有边框的宽度（默认值）
solid：边框为单实线(最为常用的)
dashed：边框为虚线
dotted：边框为点线
double：边框为双实线

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style>

.con{

width: 400px;

height: 300px;

/* 粗细边框样式边框颜色 */

border: 20px solid red; /* 实线 */

margin: 20px;

}

.con1,

.con2,

.con3{

width: 200px;

height: 100px;

margin: 30px;

}

.con1{

/* 虚线 */

border: 10px dashed red;

}

.con2{

/* 点线 */

border: 10px dotted blue;

}

.con3{

/* 双实线 */

border: 10px double yellow;

}

</style>

</head>

<body>

<div class="con">1111</div>

<div class="con1">边框样式1</div>

<div class="con2">边框样式2</div>

<div class="con3">边框样式3</div>

</body>

</html>

3.1 边框综合设置

border:宽度样式颜色

/*没有顺序*/
border: 1px solid red;

上面的设置方式中，宽度样式颜色的顺序不分先后；可以只指定需要设置的属性，省略的部分将取默认值（样式不能省略）。

3.2 圆角边框(CSS3)

border-radius: 左上角右上角右下角左下角;

其中每一个值可以为数值或百分比的形式。
技巧：让一个正方形变成圆圈

border-radius:50%；

以上效果图矩形的圆角，就不要用百分比了，因为百分比会是表示高度和宽度的一半。
而我们这里矩形就只用用高度的一半就好了。精确单位。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style>

.con1,

.con2,

.con3{

width: 200px;

height: 100px;

background-color: pink;

margin: 30px;

}

.con1{

/* border-radius: 10px 10px 10px 10px; */

/* 左上右上右下左下 */

border-radius: 10px;

}

.con2 {

border-radius: 10px 20px 30px 40px;

}

.con3{

width: 200px;

height: 200px;

/* 圆的写法 */

/* border-radius:100px; */

border-radius: 50%;

}

</style>

</head>

<body>



<div class="con1"></div>

<div class="con2"></div>

<div class="con3"></div>

</body>

</html>

4. 内边距（padding）

padding属性用于设置内边距。 是指边框与内容之间的距离。 padding-top:上内边距 padding-right:右内边距 padding-bottom:下内边距 padding-left:左内边距

4.1 属性值设置

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style>

.con{

width: 200px;

height: 100px;

background-color: pink;

/* 1个值:上下左右都是20px */

padding: 20px;

padding: 10px 20px 30px;

/* 2个值:上下左右 */

padding: 10px 20px;

/* 3个值:上左右下*/

padding: 10px 20px 30px;

}

</style>

</head>

<body>

<div class="con">同志们今天辛苦了</div>

</body>

</html>

在上面的属性中，取值可为auto(自动，默认值)、不同单位的数值、相对于父元素(或浏览器)宽度的百分比(%)。实际工作中最常用的是像素值;不允许使用负值。
同边框相关属性一样，使用复合属性padding定义内边距时，必须按顺时针顺序采用值复制，1个值为四边、2个值为上下/左右，3个值为上/左右/下。

5. 外边距（margin）

margin-top:上外边距 margin-right:右外边距 margin-bottom:下外边距 margin-left:上外边距 margin:上外边距右外边距下外边距左外边

可以让一个盒子实现水平居中，需要满足一下两个条件：

必须是块级元素。
盒子必须指定了宽度（width）

然后就给左右的外边距都设置为auto，就可使块级元素水平居中。

实际工作中常用这种方式进行网页布局，示例代码如下：

.header{ width:960px; margin:0 auto;}

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style>

.con{

width: 200px;

height: 100px;

background-color:pink;

/* 1个值:上下左右都是20px */

margin: 20px;

/* 2个值:上下左右*/

margin: 10px 20px;

/* 3个值:上左右下 */

margin: 10px 20px 30px;

/* 顺时针上右下左*/

margin: 10px 20px 30px 40px;

}

</style>

</head>

<body>

<div class="con">同志们今天辛苦了</div>

</body>

</html>

5.2 文字(行内元素)居中

1.文字水平居中是 text-align: center

2.盒子水平居中:左右margin 改为 auto

text-align: center; /* 文字居中水平 */ margin: 10px auto; /* 盒子水平居中左右margin 改为 auto 就阔以了 */

5.3 清除元素的默认内外边距

为了更方便地控制网页中元素，制作网页时，可使用如下代码清除元素的默认内外边距：

* {
padding:0; /* 清除内边距 */
margin:0; /* 清除外边距 */
}

5.4外边距塌陷

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。

当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。

可以为父元素定义1像素的上边框或上内边距。

可以为父元素添加overflow:hidden(overflow 属性规定当内容溢出元素框时发生的事情）。

解决方法：

可以为父元素定义1像素的上边框或上内边距。
可以为父元素添加overflow:hidden(overflow 属性规定当内容溢出元素框时发生的事情）。

.father{

width: 300px;

height: 300px;

background-color: pink;

/* 给元素设置边框;可以为父元素定义1像素的上边框或者上内边距 */

/* border-top: 1px solid red; */

/* padding-top: 1px; */

overflow: hidden;

}

6. 插入图片和背景图片区别

插入图片我们用的最多比如产品展示类移动位置只能靠盒模型 padding margin
背景图片我们一般用于小图标背景或者超大背景图片背景图片只能通过 background-position

img {
       width: 200px;/* 插入图片更改大小 width 和 height */
       height: 210px;
       margin-top: 30px; /* 插入图片更改位置可以用margin 或padding 盒模型 */
       margin-left: 50px; /* 插入当图片也是一个盒子 */
   }

div {
       width: 400px;
       height: 400px;
       border: 1px solid purple;
       background: #fff url(images/sun.jpg) no-repeat;
       background-position: 30px 50px; /* 背景图片更改位置用 background-position */
   }

7.CSS盒模型大小计算

CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。

可以分成两种情况：

1、box-sizing: content-box 盒子大小为 content (width/heigth)+ padding + border, content-box:此值为其默认值，其让元素维持W3C的标准Box Mode。
2、box-sizing: border-box 盒子大小为 width/heigth 就是说 padding 和 border 是包含到width里面的。

7.1盒子模型的分类

盒模型的分类（最重要的部分）盒模型分为： W3C标准盒子、IE盒子

1.W3C标准盒子（content-box）：

在这种盒模型下，我们所说的元素的 width ，实际上只包含 content

盒子总宽度 = margin + border + padding + width

2.IE盒子（border-box）：

又称怪异盒模型（边框盒子），是指块元素box-sizing属性为border-box的盒模型。

在这种盒模型下，我们所说的元素的 width ，实际上包含了 content + padding + border

盒子总宽度= margin + width

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 标准的盒子模型：width/height+padding+ border */
        /* 宽度：200+20+30+20+30 */
        /* 2.IE盒子模型 /怪异盒子模型 */
        .box{
            width: 200px;
            height: 300px;
            padding: 20px;
            border: 30px solid red;
            margin: 40px;
            /* 标准的盒子模型（默认的） */
            /* box-sizing: content-box; */
            /* IE盒子模型 /怪异盒子模型  */
            /* box-sizing: border-box; */

        }
          /* 总结:
         标准盒子模型:盒子总宽度=margin +border + padding + width */
         /* 盒子总宽度=margin +width|*/
    </style>
</head>
<body>
    <div class="box">dox</div>
</body>
</html>

向您推荐>>Eolink开发者社区

权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区

更多推荐

深入理解 Mocha 测试框架：从零实现一个 Mocha

前言什么是自动化测试自动化测试在很多团队中都是Devops环节中很难执行起来的一个环节，主要原因在于测试代码的编写工作很难抽象，99%的场景都需要和业务强绑定，而且写测试代码的编写工作量往往比编写实际业务代码的工作量更多。在一些很多业务场景中投入产出比很低，适合写自动化测试的应该是那些中长期业务以及一些诸如组件一样的基础库。自动化测试是个比较大的概念，其中分类也比较多，比如单元测试，端对端测试，集

云原生

ELK实现containerd的容器日志采集展示【基于logging的全栈监测】

企业级ELK Stack构建介绍

云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...