CSS盒子模型——看这一篇就够了

   欢迎加入前端技术营！如果你也是前端学习者或者对前端有学习的想法，那就跟着我一起从零开始进击前端。
  致力于尽可能详细且简洁的介绍前端知识、自己的捷径，也是学习路上的记录。欢迎探讨

---

目录

一、CSS盒模型

二、每日面试题

---

一、CSS盒模型

所有HTML元素可以看作盒子，CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

所以网页布局的本质就是：
1.准备好相关网页元素，基本都是盒子Box
2.利用css设置好盒子样式，摆放到相应位置
3.往盒子里填充内容。

盒子模型的组成

1、border：盒子边框

边框就是盒子的边框，可以设置粗细，颜色等样式，下面具体看下：

• 边框粗细：border-width：px
• 边框样式：border-style：solid（实线）、dashed（虚线）、dotted（点线）；
• 边框颜色：border-color：red;
• 边框复合写法：border：px style color；
• 边框分开写法：border-top：px style color；其余边同理
• 合并相邻边框：border-collapse；

2、content：盒子内容

就是自己想输入的内容

 <style>
        div {
   
            width: 100px;
            height: 100px;
            /* 边框粗细、样式、颜色 */
            border: 1px dashed #ccc