javaEE 初阶 — CSS 元素的显示模式与盒模型

﹏ヽ暗。殇╰゛Y 2023-10-04 23:33 36阅读 0赞

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

*  1. 元素的显示模式
 *   *  1.1 块级元素
     *  1.2 行内元素
     *  1.3 行内元素和块级元素的区别
     *  1.4 改变显示模式
 *  2. 盒模型
 *   *  2.1 边框
     *   *  2.1.1 边框的粗细
         *  2.1.2 边框的颜色
         *  2.1.3 边框的风格
     *  2.2 内边距
     *  2.3 外边距
     *   *  2.3.1 margin 的特殊情况

## 1. 元素的显示模式 ##

### 1.1 块级元素 ###

常见的元素:

**h1 - h6** 、**p**、**div** 、**ul**、**ol**、**li**…  
  
特点：

*  **独占一行**
 *  **高度, 宽度, 内外边距, 行高都可以控制**
 *  **宽度默认是父级元素宽度的 100%（和父元素一样宽）**
 *  **是一个容器(盒子), 里面可以放行内和块级元素**

### 1.2 行内元素 ###

常见元素：

**a、strong、b、em、i、del、s、ins、u、span**…  
  
特点：

*  **不独占一行，一行可以显示多个**
 *  **设置高度，宽度，行高无效**
 *  **左右外边距有效(上下无效)，内边距有效**
 *  **默认宽度就是本身的内容**
 *  **行内元素只能容纳文本和其他行内元素，不能放块级元素**

### 1.3 行内元素和块级元素的区别 ###

*  **块级元素独占一行，行内元素不独占一行**
 *  **块级元素可以设置宽高，行内元素不能设置宽高**
 *  **块级元素四个方向都能设置内外边距，行内元素垂直方向不能设置**

### 1.4 改变显示模式 ###

使用 display 属性可以修改元素的显示模式.  
可以把 div 等变成行内元素, 也可以把 a , span 等变成块级元素.  
display: block 改成块级元素 \[常用\]  
display: inline 改成行内元素 \[很少用\]  
display: inline-block 改成行内块元素

## 2. 盒模型 ##

任何一个 html 元素都是一个矩形的盒子，而盒子里可以放内容（内容可以是文本或者其他元素）  
  
![8a3e7fbe3b2946918a57f1f9a6be680d.png_pic_center][]  
  
**content** 指的是内容，**padding** 指的是内边距，**border** 指的是边框，**margin** 指的是外边距。

### 2.1 边框 ###

通过 **border** 来设置边框的属性，直接使用 border 属性则是直接设置四个方向。

使用 **border-left、border-right、border-top、border-bottom** 来设置**左边、右边、顶部、底部**。  
  
设置边框要设置三个方面：边框的粗细、颜色、风格。

先来设计一个简单的黑色边框。

**border: 50px black solid** 这是一个宽度为 5像素，颜色为黑色，风格为实线（solid）的边框。  
  
![303f66d0803a42329e80d8e9aba39163.png_pic_center][]  
  
将开发者工具打开，可以发现此时的尺寸是有一些问题的。  
  
![c4cd88bc66a242e0a97e30861ff35acc.png_pic_center][]  
  
可以看到此时的尺寸并不是 200 \* 100，而是 209.6 \* 109.6 了。

此时多出来的尺寸就是**边框**的尺寸，这说明边框默认情况下会撑大盒子的，  
换句话也就是 **width** 和 **height** 表示的是内容部分的尺寸。

但是我们更多的时候是不希望盒子被撑大的，因为会影响该元素的其他元素的相对位置。  
此时就可以设置一个专门的属性来防止盒子被撑大。

box-sizing: border-box;

设置好上述的属性之后，盒子就不会被撑大了。  
  
![0c19bcbd787f444280302f819ad6488c.png_pic_center][]

#### 2.1.1 边框的粗细 ####

可以改变像素大小来改变边框的粗细。

border: 10px black solid;

![2aa7d96966b2443f82388a4a259dd0e9.png_pic_center][]  
  
以上是 10 像素的边框。

border: 20px black solid;

![f2473062b1bf4ea4a81918670406bd31.png_pic_center][]  
  
以上就是 20 像素的边框。

#### 2.1.2 边框的颜色 ####

这里的更改颜色可以使用，**英文单词、rgb、十六进制** 的方式来更改颜色。

border: 5px green solid;

![d49106bfcefd4b39a396ecec1453348f.png_pic_center][]  
  
上面就是一个英文单词更改的绿色边框。

border: 5px #00ff00 solid;

![6e6eaa61973c40669bd65c265bfa628a.png_pic_center][]  
  
以上就是一个十六进制更改的绿色边框。

border: 5px rgb(0, 255, 0) solid;

![94d2b42e43154216aa9d0a7a3c01cda0.png_pic_center][]  
  
以上就是一个rgb更改的绿色边框。

#### 2.1.3 边框的风格 ####

上面演示的 **solid** 是一个 **实线** 的风格，下面演示其他的风格。

**dashed** 表示的是一个为虚线的风格。  
  
![3c6e9988d5774a0fb75eb1a25022791b.png_pic_center][]  
  
**dotted** 的风格是一个由点组成的虚线。  
  
![8d48a28773f14c5a81bd66ff6a031be3.png_pic_center][]  
  
具体有哪些风格可以打开 **mdn** 文档，查看 **border**  
  
![60f5a59cf83047c0b18e90328b660650.png_pic_center][]  
  
这里面就有一些可以参考的风格。

### 2.2 内边距 ###

先来使用 **padding**给左边设置一个内边距，padding 设置的是 内容 和 边框 之间的距离。

![6e31031ac84342a3be9a1f3156f524e5.png_pic_center][]  
  
![b51530b3962d4ae79d75e4dfe8a80c8f.png_pic_center][]  
  
根据开发者工具观察盒子模型，可以很清楚的看到左边多了一条框框，并且是**位于边框和内容之间**的。

我们也可以不指定方向，此时就是四个方向（top、right、bottom、left）都会去添加一条内边距。

padding: 10px;

![5a05f0dd50f34ec2a2dbf53e3584f594.png_pic_center][]  
  
可以看到上述图片的内边距已经是 4 个方向都有了。

添加页边距的时候还有一些其他的写法：

**padding: 10px 20px;** 表示的是上下边距是 10，左右边距是 20。  
**padding: 10px 20px 30px 40px;** 表示的分别是四个方向边距，顺序是 **上右下左**。

如果要使用 padding: 10px 20px; 的方式，设置一个上下边距是 10 ，左右边距是 20 。  
  
![702fadb2e91e4307af389a8c83996503.png_pic_center][]  
  
![bdd42dd08ca6457d995120fdd95b92f4.png_pic_center][]  
  
可以看到左右边距比上下边距宽一些。

也可以使用 padding: 10px 20px 30px 40px; 的方式，分别给四个方向设置边距。  
  
![685a7064eda140559e84d021cc85c962.png_pic_center][]  
  
![85fdce4f65914452ab4330d2e8596f15.png_pic_center][]  
  
可以看到，按照从上右下左的顺序，边距逐渐增大。

### 2.3 外边距 ###

先来观察没有设置外边距的情况。

<!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>我最帅</title>
        
        <style>
          .two {
          
            width: 200px;
            height: 100px;
            background-color: orange;
            color: rgb(255, 255, 255);
            text-align: center;
            line-height: 100px; 
            border: 5px rgb(0, 0, 0) solid; 
            box-sizing: border-box;
            padding: 10px 20px 30px 40px;
          }  
    
          .one {
          
            width: 200px;
            height: 100px;
            background-color: orange;
            color: rgb(255, 255, 255);
            text-align: center;
            line-height: 100px;
            border: 5px rgb(0, 0, 0) solid; 
            box-sizing: border-box;
          }
        </style>
        
    </head>
    <body>
        <div class="one">
            这是一个div
        </div>
        <div class="two">
            这是另一个div
        </div>
    </body>
    </html>

![ffc90843d07b42558e9a143ad1c6ce4c.png_pic_center][]  
  
当此处并没有设置外边距的时候，两个 div 是连接到一起的。

下面设置底部为 10 像素的外边距。

margin-bottom: 10px;

![8a83313fdaa149b1b420d3435e92dbd7.png_pic_center][]  
  
设置成功后，两个 div 就分开了。

**margin** 的写法和 **padding** 差不多，也是可以分四个方向来设置。

**margin: 10px;** 表示四个方向都是 10像素。  
**margin: 10px 20px;** 表示上下边距为 10 像素，左右边距为 20 像素。  
**margin: 10px 20px 30px 40px;** 表示按照 **上右下左** 的顺序分别设置为 10像素、20像素、30像素、40像素。

#### 2.3.1 margin 的特殊情况 ####

<!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>我最帅</title>
        
        <style>
          .two {
          
            width: 200px;
            height: 100px;
            background-color: orange;
            color: rgb(255, 255, 255);
            text-align: center;
            line-height: 100px; 
            border: 5px rgb(0, 0, 0) solid; 
            box-sizing: border-box;
          }  
    
          .one {
          
            width: 200px;
            height: 100px;
            background-color: orange;
            color: rgb(255, 255, 255);
            text-align: center;
            line-height: 100px;
            border: 5px rgb(0, 0, 0) solid; 
            box-sizing: border-box;
            margin-bottom: 10px;
          }
    
          .three {
          
            width: 50px;
            height: 50px;
            background-color: red;
          }
        </style>
        
    </head>
    <body>
        <div class="one">
            <div class="three">
                
            </div>
        </div>
        <div class="two">
            这是另一个div
        </div>
    </body>
    </html>

根据上面的代码会得到下面的情况。  
  
![0768bdb857fe40b2aa7df81fd9496b86.png_pic_center][]  
  
可以看到左上角有一个红色的矩形。

现在将 **margin-left** 和 **margin-right** 属性设置成 **auto** 就会形成一个水平居中的效果。

.three {
       width: 50px;
       height: 50px;
       background-color: red;
       margin-left: auto;
       margin-right: auto;
     }

![752bb88718db4378b1794edebedeff12.png_pic_center][]  
  
但是如果把 **margin-top** 和 **margin-bottom** 设置成 **auto** 是不可以形成垂直居中的。

![9e59d624a927499696ff0a3e557a5a25.png_pic_center][]

[8a3e7fbe3b2946918a57f1f9a6be680d.png_pic_center]: https://img-blog.csdnimg.cn/8a3e7fbe3b2946918a57f1f9a6be680d.png#pic_center
[303f66d0803a42329e80d8e9aba39163.png_pic_center]: https://img-blog.csdnimg.cn/303f66d0803a42329e80d8e9aba39163.png#pic_center
[c4cd88bc66a242e0a97e30861ff35acc.png_pic_center]: https://img-blog.csdnimg.cn/c4cd88bc66a242e0a97e30861ff35acc.png#pic_center
[0c19bcbd787f444280302f819ad6488c.png_pic_center]: https://img-blog.csdnimg.cn/0c19bcbd787f444280302f819ad6488c.png#pic_center
[2aa7d96966b2443f82388a4a259dd0e9.png_pic_center]: https://img-blog.csdnimg.cn/2aa7d96966b2443f82388a4a259dd0e9.png#pic_center
[f2473062b1bf4ea4a81918670406bd31.png_pic_center]: https://img-blog.csdnimg.cn/f2473062b1bf4ea4a81918670406bd31.png#pic_center
[d49106bfcefd4b39a396ecec1453348f.png_pic_center]: https://img-blog.csdnimg.cn/d49106bfcefd4b39a396ecec1453348f.png#pic_center
[6e6eaa61973c40669bd65c265bfa628a.png_pic_center]: https://img-blog.csdnimg.cn/6e6eaa61973c40669bd65c265bfa628a.png#pic_center
[94d2b42e43154216aa9d0a7a3c01cda0.png_pic_center]: https://img-blog.csdnimg.cn/94d2b42e43154216aa9d0a7a3c01cda0.png#pic_center
[3c6e9988d5774a0fb75eb1a25022791b.png_pic_center]: https://img-blog.csdnimg.cn/3c6e9988d5774a0fb75eb1a25022791b.png#pic_center
[8d48a28773f14c5a81bd66ff6a031be3.png_pic_center]: https://img-blog.csdnimg.cn/8d48a28773f14c5a81bd66ff6a031be3.png#pic_center
[60f5a59cf83047c0b18e90328b660650.png_pic_center]: https://img-blog.csdnimg.cn/60f5a59cf83047c0b18e90328b660650.png#pic_center
[6e31031ac84342a3be9a1f3156f524e5.png_pic_center]: https://img-blog.csdnimg.cn/6e31031ac84342a3be9a1f3156f524e5.png#pic_center
[b51530b3962d4ae79d75e4dfe8a80c8f.png_pic_center]: https://img-blog.csdnimg.cn/b51530b3962d4ae79d75e4dfe8a80c8f.png#pic_center
[5a05f0dd50f34ec2a2dbf53e3584f594.png_pic_center]: https://img-blog.csdnimg.cn/5a05f0dd50f34ec2a2dbf53e3584f594.png#pic_center
[702fadb2e91e4307af389a8c83996503.png_pic_center]: https://img-blog.csdnimg.cn/702fadb2e91e4307af389a8c83996503.png#pic_center
[bdd42dd08ca6457d995120fdd95b92f4.png_pic_center]: https://img-blog.csdnimg.cn/bdd42dd08ca6457d995120fdd95b92f4.png#pic_center
[685a7064eda140559e84d021cc85c962.png_pic_center]: https://img-blog.csdnimg.cn/685a7064eda140559e84d021cc85c962.png#pic_center
[85fdce4f65914452ab4330d2e8596f15.png_pic_center]: https://img-blog.csdnimg.cn/85fdce4f65914452ab4330d2e8596f15.png#pic_center
[ffc90843d07b42558e9a143ad1c6ce4c.png_pic_center]: https://img-blog.csdnimg.cn/ffc90843d07b42558e9a143ad1c6ce4c.png#pic_center
[8a83313fdaa149b1b420d3435e92dbd7.png_pic_center]: https://img-blog.csdnimg.cn/8a83313fdaa149b1b420d3435e92dbd7.png#pic_center
[0768bdb857fe40b2aa7df81fd9496b86.png_pic_center]: https://img-blog.csdnimg.cn/0768bdb857fe40b2aa7df81fd9496b86.png#pic_center
[752bb88718db4378b1794edebedeff12.png_pic_center]: https://img-blog.csdnimg.cn/752bb88718db4378b1794edebedeff12.png#pic_center
[9e59d624a927499696ff0a3e557a5a25.png_pic_center]: https://img-blog.csdnimg.cn/9e59d624a927499696ff0a3e557a5a25.png#pic_center