CSS的代码可以写在3个地方？

朱雀 2021-05-03 04:23 483阅读 0赞

## 1、CSS的代码可以写在3个地方： ##

1、写在标签里面（局部）：  
`<div id="header" style="background-color:dodgerblue;">`  
可读性差，维护起来不方便。  
2、在里（全局）：

<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>注册页面</title> <style type="text/css"> #header{ 
              background-color:skyblue;
          }
        </style>
    
    </head>

3、外链式（结构与表现分离，易于维护）：

#header{ 
        background-color: cyan;
    }

然后用标签引进：

优先级：近水楼台先得月

## 2、盒子模型： ##

![在这里插入图片描述][20200422193425626.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lZQkRFU0hJSklF_size_16_color_FFFFFF_t_70]  
不同部分的说明：

Margin(外边距) - 清除边框外的区域，外边距是透明的。  
Border(边框) - 围绕在内边距和内容外的边框。  
Padding(内边距) - 清除内容周围的区域，内边距是透明的。  
Content(内容) - 盒子的内容，显示文本和图像。

[20200422193425626.png]: /images/20210502/34ac6e7003a2453699766cae51069711.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lZQkRFU0hJSklF_size_16_color_FFFFFF_t_70]: /images/20210502/6ba425240aa74921bd7fff4f05db1625.png