HTML详解连载（6）

清疚 2023-10-14 19:01 3阅读 0赞

#### HTML详解连载（6） ####

*  专栏链接 \[link\](http://t.csdn.cn/xF0H3)
 *   *  下面进行专栏介绍
 *  开始喽
 *   *  CSS特性
     *   *  继承性
         *   *  注意
         *  层叠性
         *   *  特点
         *  优先级
         *   *  规则
             *  公式
             *   *  注意
         *  叠加计算
         *   *  公式（每以及之间不存在进位）
             *  规则
     *  Emmet写法分析
     *   *  属性名
         *  属性值
         *  注意
     *  背景图平铺方式
     *   *  属性名
         *  属性值
     *  背景图位置属性
     *   *  属性名
         *  属性值
         *  关键字
         *  坐标（数字+pz，正负都可以）
         *   *  注意
     *  背景图缩放
     *   *  作用
         *  属性名
         *  常用属性值
         *  数字+单位（px）
     *  背景图固定
     *   *  作用
         *  属性名
         *  属性值
     *  背景复合属性
     *   *  属性名
         *  属性值
     *  显示模式
     *   *  标签（元素）的显示方式
         *   *  作用
         *  块级元素
         *   *  位置
         *  行内元素
         *   *  位置
             *  尺寸
         *  行内块元素
         *   *  位置
             *  尺寸
         *  转换显示模式
         *   *  属性名

## 专栏链接 [link][] ##

### 下面进行专栏介绍 ###

本专栏是自己学前端的征程，纯手敲的代码，自己跟着黑马课程学习的，并加入一些自己的理解，对代码和笔记  
进行适当修改。希望能对大家能有所帮助，同时也是请大家对我进行监督，对我写的代码进行建议，互相学习。

## 开始喽 ##

![在这里插入图片描述][ac3db430eb26450fa0c088cd8dcee9d4.png]

### CSS特性 ###

优简代码/定位问题，并解决问题  
继承性  
层叠性  
优先级

#### 继承性 ####

子级默认继承父级的文字控制属性

##### 注意 #####

标签自己有样式，则生效自己的样式，不继承

#### 层叠性 ####

##### 特点 #####

相同的属性会覆盖：后面的CSS属性覆盖前面的CSS属性  
不同的属性会叠加：不同的CSS属性都生效

#### 优先级 ####

也叫权重，当一个标签使用了多种选择器时，基于不同种类的选择器的匹配规则。

##### 规则 #####

选择器优先级高的样式生效

##### 公式 #####

通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important

###### 注意 ######

选中标签的范围越大，优先级越低

#### 叠加计算 ####

如果是符合选择器，则需要权重叠加计算

##### 公式（每以及之间不存在进位） #####

行内样式 ，id选择器个数，类选择器个数，标签选择器个数

##### 规则 #####

1、从左到右依次比较个数，同一级个数多的优先级高，如果个数相同，则向
    	后比较!important权重最高
    2、继承权重最低

![在这里插入图片描述][f60f2cc469b54c569e081bf9811ffe58.png]

### Emmet写法分析 ###

代码的简写方式，输入缩写 VScode会自动生成对应的代码  
HTML  
CSS：大多数简写方式为属性单词的首字母  
背景图  
网页中，使用背景图实现装饰性的图片效果。

#### 属性名 ####

background-image(bgi)

#### 属性值 ####

url(背景图URL)

#### 注意 ####

背景图默认是平铺的效果

### 背景图平铺方式 ###

#### 属性名 ####

background-repeat（bgr）

#### 属性值 ####

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>含义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>no-repeat</td> 
   <td>不平铺</td> 
  </tr> 
  <tr> 
   <td>repeat</td> 
   <td>平铺（默认）</td> 
  </tr> 
  <tr> 
   <td>repeat-x</td> 
   <td>水平方向平铺</td> 
  </tr> 
  <tr> 
   <td>repeat-y</td> 
   <td>垂直方向平铺</td> 
  </tr> 
 </tbody> 
</table>

### 背景图位置属性 ###

#### 属性名 ####

background-position（bgp）

#### 属性值 ####

水平方向位置 处置方向位置

#### 关键字 ####

<table> 
 <thead> 
  <tr> 
   <th>关键字</th> 
   <th>含义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>left</td> 
   <td>左侧</td> 
  </tr> 
  <tr> 
   <td>right</td> 
   <td>右侧</td> 
  </tr> 
  <tr> 
   <td>center</td> 
   <td>居中</td> 
  </tr> 
  <tr> 
   <td>top</td> 
   <td>顶部</td> 
  </tr> 
  <tr> 
   <td>button</td> 
   <td>底部</td> 
  </tr> 
 </tbody> 
</table>

#### 坐标（数字+pz，正负都可以） ####

##### 注意 #####

关键字取值方式写法，可以颠倒顺序  
可以只写一个关键字，另一个方向默认为居中；数字只写一个值表示水平方向，垂直方 向为居中

### 背景图缩放 ###

#### 作用 ####

设置背景图大小

#### 属性名 ####

backgro-size（bgz）

#### 常用属性值 ####

<table> 
 <thead> 
  <tr> 
   <th>关键字</th> 
   <th>含义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>cover</td> 
   <td>等比例缩放背景图片以完全覆盖背景区，可能背景图片部分看不见</td> 
  </tr> 
  <tr> 
   <td>contain</td> 
   <td>等比例缩放背景图片以完全装入背景区，可能背景区部分空白</td> 
  </tr> 
  <tr> 
   <td>百分比</td> 
   <td>根据盒子尺寸计算图片大小</td> 
  </tr> 
 </tbody> 
</table>

#### 数字+单位（px） ####

### 背景图固定 ###

#### 作用 ####

背景不会随着元素的内容滚动

#### 属性名 ####

background-attachment（bga）

#### 属性值 ####

fixed

![在这里插入图片描述][69ee19c5dbfa4a72a30df7416d6a4d5c.png]

### 背景复合属性 ###

#### 属性名 ####

background(bg)

#### 属性值 ####

背景色，背景图，背景图平铺方式，背景图位置/背景图缩放，背景图固定（空 格隔开，不区分顺序）

### 显示模式 ###

#### 标签（元素）的显示方式 ####

##### 作用 #####

布局网页的时候，根据标签的显示模式选择合适的标签摆放内容

#### 块级元素 ####

##### 位置 #####

独占一行  
宽度默认是父级的1000%  
添加宽高属性生效

#### 行内元素 ####

##### 位置 #####

一行共存多个

##### 尺寸 #####

尺寸由内容撑开  
加宽高不生效

#### 行内块元素 ####

##### 位置 #####

一行共存多个

##### 尺寸 #####

设置宽高属性生效  
默认尺寸由内容撑开

#### 转换显示模式 ####

##### 属性名 #####

display

<table> 
 <thead> 
  <tr> 
   <th>关键字</th> 
   <th>含义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>属性值</td> 
   <td>效果</td> 
  </tr> 
  <tr> 
   <td>block</td> 
   <td>块级</td> 
  </tr> 
  <tr> 
   <td>inline-block</td> 
   <td>行内块</td> 
  </tr> 
  <tr> 
   <td>inline</td> 
   <td>行内</td> 
  </tr> 
 </tbody> 
</table>

[link]: http://t.csdn.cn/xF0H3
[ac3db430eb26450fa0c088cd8dcee9d4.png]: https://img-blog.csdnimg.cn/ac3db430eb26450fa0c088cd8dcee9d4.png
[f60f2cc469b54c569e081bf9811ffe58.png]: https://img-blog.csdnimg.cn/f60f2cc469b54c569e081bf9811ffe58.png
[69ee19c5dbfa4a72a30df7416d6a4d5c.png]: https://img-blog.csdnimg.cn/69ee19c5dbfa4a72a30df7416d6a4d5c.png