【第二部分 | CSS】4：网页布局之盒子模型

蔚落 2023-09-26 10:02 99阅读 0赞

**目录**

| 网页布局的本质

看透网页布局的本质

| 盒子模型简介

| 盒子模型的基本属性

1-1 边框 border

1-2 表格边框 border-collapse

2-1 内边距 padding

2-2 内边距影响盒子大小

3-1 外边距margin

3-2 外边距 auto 设置块级盒子页面水平居中

3-3 外边距 盒内盒子的外边距

4 清除网页默认的内外边距

| 盒子样式

圆角盒子

盒子阴影

动效：鼠标放置盒子上产生阴影

文字阴影（了解）

--------------------

###  ###

### | 网页布局的本质 ###

#### 看透网页布局的本质 ####

![0d6f556b7ede441cb639bbfbadcfd0b7.png][]

网页布局的步骤：

*  先准备好相关的网页元素，网页元素基本都是盒子 Box 如 <div></div>
 *  利用 CSS 设置好盒子样式，然后摆放到相应位置。（设置样式我们之前学过了。 摆放盒子到相应的位置，则是利用【浮动、定位】）
 *  往盒子里面装内容
    
    网页布局的核心本质： 就是利用 CSS 摆盒子。

--------------------

### **| 盒子模型简介** ###

*  盒子模型，就是把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器
 *  CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边框、外边距、内边距、和 实际内容

![b457fec9cd864502861ee875312d195e.png][]

CSS 盒子 的基本构成

*  border 边框（决定盒子壁的厚度）
 *  padding 内边距 （决定物品和盒子内壁的距离）
 *  margin 外边距 （决定盒子和盒子之间的距离）

![a1d60669af2743beabda4fa9e7e926be.png][]

### | 盒子模型的基本属性 ###

####    **1-1 边框 border** ####

语法 **border : border-width || border-style || border-color**

简写语法 示例 **border: 1px solid red;**

![69f928e1e8c447538efa4c4999ec1343.png][]

还可以指定 某条边框 的样式和颜色 示例 **border-top: 1px solid red; /\* 只设定上边框， 其余同理 \*/**

需要注意的是，盒子的实际大小并不包含边框。 即：盒子的实际宽度 = width + border 高度同理

![bfb92b50c2e54d77a4874fba385bad92.png][]

####    **1-2 表格边框 border-collapse** ####

*  border-collapse 属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。
 *  本质上，表格是一个大盒子，里面的表格是一个一个的小单元格，若我们直接把小单元格的cellspacing=0，则会出现两个小单元格的边重叠为2个像素的边，从而看起来很粗的情况，而border-collapse:collapse 的作用就是把相邻的单元格由2像素合并为1像素

![0e1de4672746486e952e140334933096.png][]

**示例（没加 border-collapse）**

**需要说明的是：只对table声明样式，只相当于给大盒子声明了样式。 若想给单元格也设置样式，则需要使用并集选择器，同时选择table td**

![b8bd0826800243dcaf39284e5f16323b.png][]

![18a79c822bac45c3b46b6df97436ce30.png][]

--------------------

#### 2-1 内边距 padding ####

padding 属性用于设置内边距，即边框与内容之间的距离。

![59ad2726a59848abb2a8b5b92ec670cf.png][]

内边距还可以简写成一句话：各值之间以 空格 隔开

![fa035c9d603c4545b0bd40db9be7086e.png][]

--------------------

#### 2-2 内边距影响盒子大小 ####

![a23329e8190f4a60a11c2ab93f78f640.png][]

解决办法：把宽度减去左右边距即可 **width - padding-left - padding-right** height同理

当盒子没有设置wight / height属性时，添加Padding的时候不会撑大盒子 ~

#### 3-1 外边距margin ####

margin 用于控制盒子和盒子之间的距离

![d0bab88099134b6db02f9229ba55080b.png][]

####    **3-2 外边距 auto 设置块级盒子页面水平居中** ####

**注意**

*  盒子必须指定了 width
 *  盒子的 左右外边距都设置为 auto
 *  margin : 0 auto 这个语法，是让块级元素水平居中，而对于行内/行内块元素的水平居中：是使用 text-align: center 来实现的

**语法**

*  常见写法： **margin: 0 auto** 代表上下外边距为0，左右外边距自动（居中）
 *  其它写法： margin-left: auto; margin-right: auto;
 *  其他写法2： margin: auto;

--------------------

#### **3-3 外边距 盒内盒子的外边距** ####

**这个BUG在开发中经常遇到，而且很重要，也很难理解。请根据下面的笔记一步步看**

盒子塌陷 只在块级元素之间会出现。 行级元素和块级元素之间没有。

**假如有两个盒子、BUG：**

*  A盒子：外盒子，100px
 *  B盒子：放在A盒子里面，50px
 *  B盒子始终内嵌在A盒子里，且B盒子 需要和 A盒子 之间有一个距离，这个距离为B盒子的margin值
 *  如果我们直接给内盒子加一个margin，则会出现下列的状况（父子塌陷）

![79820fe6fecf4496a9ed5a2df4cf5de8.png][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            .div1 {
                height: 100px;
                width: 100px;
                margin: 0  auto;
                background-color: aqua;   
            }
    
            .div2 {
                height: 50px;
                width: 50px;
                margin: 10px auto;   /*内盒子 有一个10px 的边距，但是此时被父亲塌陷了，粘在了一起*/
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <div class="div1">
            <div class="div2">
    
            </div>
        </div>
    </body>
    </html>

**如何解决上述BUG？**

*  为父元素定义上边框
 *  为父元素定义上内边距
 *  为父元素添加 overflow:hidden

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            .div1 {
                height: 100px;
                width: 100px;
                margin: 0  auto;
                background-color: aqua;   
                
                /*下列三个方法用于解决上述的BUG，任选其一即可*/
                border: 1px transparent solid; /*方法一：给父元素添加边界， 颜色为transparent*/
                padding: 1px;                  /*方法二：给父盒子添加一个内边距*/
                overflow:hidden;               /*方法三：添加这一句话（推荐：因为不会增加内边距和外边距、盒子的大小不会改变） */
            }
    
            .div2 {
                height: 50px;
                width: 50px;
                margin: 10px auto;   /*内盒子 有一个10px 的边距，但是此时被父亲塌陷了，粘在了一起*/
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <div class="div1">
            <div class="div2">
    
            </div>
        </div>
    </body>
    </html>

#### 4 清除网页默认的内外边距 ####

在写列表、文本的时候，浏览器会给我们的内容默认加一个边距（不同的浏览器不一样），如：

![6daef7b6eb0d410ab16561b4bec2d138.png][]

**清除上述默认边距的办法**

![0e0c48b2373743f0822ec3a489240b10.png][]

**示例**

![ae4b7aaa066d4ba391e2d110ddfb8463.png][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            * {
                padding: 0;
                margin: 0;
            }
        </style>
    </head>
    <body>
        <p>默认内外边距</p>
        <ul>
            <li>列表1</li>
            <li>列表2</li>
        </ul>
    </body>
    </html>

### | 盒子样式 ###

盒子不一定是方的，也可能是圆角的。

天下不一定非黑即白，所以我们也可以给盒子、文字添加阴影

####    **圆角盒子** ####

语法

**border-radius:length;**

![2a395d7b5b6e47a490bedb343825b38c.png][]

原理： 以 length 的值为 半径 ，在四个角进行画椭圆，然后切成圆角矩形。因此：

若 border-radius: 10px 则代表以 10px 为半径做圆 （也就是一个对称的椭圆）

若 border-radius: 30% 则代表以 max ( height \* 0.3 , width \* 0.3 ) / 2 为长半轴 、 min ( height \* 0.3 , width \* 0.3 ) / 2 为短半轴 做椭圆

![4e752ba10ec840f5be43fcb44d98af7f.png][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            .roundRectangle{
                width: 300px;
                height: 100px;
                background-color: pink;
                border-radius: 20%;
            }
        </style>
    </head>
    <body>
        <div class="roundRectangle"></div>
    </body>
    </html>

--------------------

#### **盒子阴影** ####

**基本语法**

注意： 默认是outset（这个单词不能写 否则没阴影）。 若需要内阴影则需要在最后添加上 inset（这个有需要的话就要写）

注意2：阴影不会影响盒子大小

![3002f85ddea3457d9e5c10327ad4e909.png][]

![32401ffd20e7439dbbb651b87ab83982.png][]

.基础阴影 {
                width: 200px;  
                height: 200px;
                background-color: pink;
                margin: 100px auto;
                box-shadow: 10px 10px 10px 10px black;  /* 水平位置、垂直位置、阴影模糊度、阴影大小、颜色 */
            }

![ca8342f0e07e42529e6dee2ac879923a.png][]

.基础阴影 {
                width: 200px;
                height: 200px;
                background-color: pink;
                margin: 100px auto;
                box-shadow: 10px 8px 10px 10px rgba(0, 0, 0, .3);  /* 一般使用 rgba透明度颜色 进行阴影的设置 */
            }

--------------------

#### **动效：鼠标放置盒子上产生阴影** ####

语法

**div:hover \{ // CSS阴影语句 \}**

--------------------

#### 文字阴影（了解） ####

![5effe4f6d3c84455a5eb94624cd697ab.png][]

[0d6f556b7ede441cb639bbfbadcfd0b7.png]: https://img-blog.csdnimg.cn/0d6f556b7ede441cb639bbfbadcfd0b7.png
[b457fec9cd864502861ee875312d195e.png]: https://img-blog.csdnimg.cn/b457fec9cd864502861ee875312d195e.png
[a1d60669af2743beabda4fa9e7e926be.png]: https://img-blog.csdnimg.cn/a1d60669af2743beabda4fa9e7e926be.png
[69f928e1e8c447538efa4c4999ec1343.png]: https://img-blog.csdnimg.cn/69f928e1e8c447538efa4c4999ec1343.png
[bfb92b50c2e54d77a4874fba385bad92.png]: https://img-blog.csdnimg.cn/bfb92b50c2e54d77a4874fba385bad92.png
[0e1de4672746486e952e140334933096.png]: https://img-blog.csdnimg.cn/0e1de4672746486e952e140334933096.png
[b8bd0826800243dcaf39284e5f16323b.png]: https://img-blog.csdnimg.cn/b8bd0826800243dcaf39284e5f16323b.png
[18a79c822bac45c3b46b6df97436ce30.png]: https://img-blog.csdnimg.cn/18a79c822bac45c3b46b6df97436ce30.png
[59ad2726a59848abb2a8b5b92ec670cf.png]: https://img-blog.csdnimg.cn/59ad2726a59848abb2a8b5b92ec670cf.png
[fa035c9d603c4545b0bd40db9be7086e.png]: https://img-blog.csdnimg.cn/fa035c9d603c4545b0bd40db9be7086e.png
[a23329e8190f4a60a11c2ab93f78f640.png]: https://img-blog.csdnimg.cn/a23329e8190f4a60a11c2ab93f78f640.png
[d0bab88099134b6db02f9229ba55080b.png]: https://img-blog.csdnimg.cn/d0bab88099134b6db02f9229ba55080b.png
[79820fe6fecf4496a9ed5a2df4cf5de8.png]: https://img-blog.csdnimg.cn/79820fe6fecf4496a9ed5a2df4cf5de8.png
[6daef7b6eb0d410ab16561b4bec2d138.png]: https://img-blog.csdnimg.cn/6daef7b6eb0d410ab16561b4bec2d138.png
[0e0c48b2373743f0822ec3a489240b10.png]: https://img-blog.csdnimg.cn/0e0c48b2373743f0822ec3a489240b10.png
[ae4b7aaa066d4ba391e2d110ddfb8463.png]: https://img-blog.csdnimg.cn/ae4b7aaa066d4ba391e2d110ddfb8463.png
[2a395d7b5b6e47a490bedb343825b38c.png]: https://img-blog.csdnimg.cn/2a395d7b5b6e47a490bedb343825b38c.png
[4e752ba10ec840f5be43fcb44d98af7f.png]: https://img-blog.csdnimg.cn/4e752ba10ec840f5be43fcb44d98af7f.png
[3002f85ddea3457d9e5c10327ad4e909.png]: https://img-blog.csdnimg.cn/3002f85ddea3457d9e5c10327ad4e909.png
[32401ffd20e7439dbbb651b87ab83982.png]: https://img-blog.csdnimg.cn/32401ffd20e7439dbbb651b87ab83982.png
[ca8342f0e07e42529e6dee2ac879923a.png]: https://img-blog.csdnimg.cn/ca8342f0e07e42529e6dee2ac879923a.png
[5effe4f6d3c84455a5eb94624cd697ab.png]: https://img-blog.csdnimg.cn/5effe4f6d3c84455a5eb94624cd697ab.png