非零基础自学前端最后一遍一 HTML+CSS 10 CSS盒子模型 10.1 认识盒子模型-盒子模型的四个部分

今天药忘吃喽~ 2024-03-25 23:53 40阅读 0赞

#### 非零基础自学前端最后一遍 ####

#### 文章目录 ####

*   *   *  非零基础自学前端最后一遍
         *  一 HTML+CSS
         *  10 CSS盒子模型
         *   *  10.1 认识盒子模型-盒子模型的四个部分
             *   *  10.1.1 认识盒子
                 *  10.1.2 HTML每个元素都是盒子
                 *  10.1.3 盒子模型(Box Model)
                 *  10.1.4 盒子模型的四边
                 *  10.1.5 在浏览器的开发工具中

![在这里插入图片描述][9f122fdd039b42f0b0326c0f6553ac01.png_pic_center]

#### 一 HTML+CSS ####

#### 10 CSS盒子模型 ####

##### 10.1 认识盒子模型-盒子模型的四个部分 #####

###### 10.1.1 认识盒子 ######

生活中, 我们经常会看到各种各样的盒子:

![在这里插入图片描述][82f8daeefdd249d1a6a5d9c3817eea21.png_pic_center]

###### 10.1.2 HTML每个元素都是盒子 ######

事实上, 我们可以把HTML每一个元素看出一个个的盒子:

![在这里插入图片描述][a95eb4b705004de4980b4af31d1426c6.png_pic_center]

###### 10.1.3 盒子模型(Box Model) ######

*  HTML中的每一个元素都可以看做是一个盒子，如右下图所示，可以具备这4个属性

![在这里插入图片描述][9610a0c081494f30a7d2f536e415451a.png_pic_center]

*  内容（content）
    
     *  元素的内容width/height
 *  内边距（padding）
    
     *  元素和内容之间的间距
 *  边框（border）
    
     *  元素自己的边框
 *  外边距（margin）
    
     *  元素和其他元素之间的间距

###### 10.1.4 盒子模型的四边 ######

因为盒子有四边, 所以margin/padding/border都包括top/right/bottom/left四个边:

![在这里插入图片描述][07be25e800f74ef68c2ea314e42f20fb.png_pic_center]

###### 10.1.5 在浏览器的开发工具中 ######

![在这里插入图片描述][68866957ac3643f692a3ee62b6940b73.png_pic_center]

[9f122fdd039b42f0b0326c0f6553ac01.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/7526733dc4ec4fa79bae5c460a7fffea.png
[82f8daeefdd249d1a6a5d9c3817eea21.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/4438e40653844aaea9d7addb19edf647.png
[a95eb4b705004de4980b4af31d1426c6.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/fdf2331edab347178ca950c937f1da58.png
[9610a0c081494f30a7d2f536e415451a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/283d809dbdd649ad997e4253799b724c.png
[07be25e800f74ef68c2ea314e42f20fb.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/5ceafa5c777248c38cd57e89aabf6265.png
[68866957ac3643f692a3ee62b6940b73.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/9413f7be56c44e03a391b31b29be115f.png