【CSS盒子模型】

文章目录

前言

一、盒子模型里的元素

二、应用

1.分割线

2.div位置

3.间距

总结

---

前言

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

---

一、盒子模型里的元素

1. padding:内填充：内容与边框的距离
2. border：边框：盒子的厚度
3. margin：外填充：盒子与盒子之间的距离

注：三个元素都可设置4个方向：上，右，下，左（按顺序）

       可设置长，宽，高，颜色，边框可设置实线（solid）、虚线（dashed）

二、应用

1.分割线

当导航栏下方与内容存在分割线时，一般用border-bottom来进行设置

代码如下（示例）：

border-bottom: <!-- 线的粗细 -->1px 
               <!-- 实线虚线 -->solid 
               <!-- 线的颜色 -->lightgray;

2.div位置

将一个小的div放在一个大div的水平中间，使用margin，让左右自动

代码如下（示例）：

margin: 0 auto 0 auto;
<!-- 按照上右下左顺序输入数据，auto表示自适应 -->

3.间距

设置导航栏的间距

代码如下（示例）：

min-width: 40px;
margin-left: 10px;
border-right: 1px solid red;
padding-right: 10px;

---

总结

利用三个元素使网页更美观，使代码更一目了然。