HTML详解连载（7）

Love The Way You Lie 2023-10-14 19:02 49阅读 0赞

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

*  专栏链接 \[link\](http://t.csdn.cn/xF0H3)
 *   *  下面进行专栏介绍
 *  开始喽
 *   *  结构伪类选择器
     *   *  作用
     *  :nth-child（公式）
     *   *  作用
         *  举例
     *  伪元素选择器
     *   *  作用
         *  注意：
     *  PxCoook
     *  盒子模型-组成
     *   *  作用
         *  盒子模型-重要组成部分
     *  盒子模型-边框线
     *   *  属性名
         *  属性值
     *  常用线条样式
     *  设置单方向边框线
     *   *  属性名
         *  属性值
     *  盒子模型-内边距
     *   *  作用
         *  属性名
     *  盒子模型-尺寸计算
     *   *  默认情况
         *  结论
         *  解决方法
     *  盒子模型-外边距
     *   *  作用
         *  属性名
         *  示例
     *  盒子模型-元素溢出
     *   *  作用
         *  属性名
         *  属性值
     *  外边距问题-合并现象
     *   *  场景
         *  现象
     *  外边距问题-塌陷问题
     *   *  场景
         *  现象
         *  解决方法
     *  行内元素-内外边距问题
     *   *  场景
         *  解决方法
     *  盒子模型-圆角
     *   *  作用
         *  属性名
         *  属性值
         *  注意
         *  多值
         *  常见应用-正圆形状
         *  常见应用-胶囊形状
     *  盒子模型-阴影
     *   *  作用
         *  属性名
         *  属性值
         *  注意：
     *  标准流
     *   *  举例
     *  浮动
     *   *  作用
         *  属性名：float
         *  属性值
         *  特点

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

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

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

## 开始喽 ##

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

### 结构伪类选择器 ###

#### 作用 ####

根据元素的结构关系查找元素

<table> 
 <thead> 
  <tr> 
   <th>关键字</th> 
   <th>含义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>E:first-child</td> 
   <td>查找第一个E元素</td> 
  </tr> 
  <tr> 
   <td>E:last-child</td> 
   <td>查找最后一个E元素</td> 
  </tr> 
  <tr> 
   <td>E:nth-child（N）</td> 
   <td>查找第N个元素(第一个元素N值为1)</td> 
  </tr> 
 </tbody> 
</table>

### :nth-child（公式） ###

#### 作用 ####

根据元素的结构关系查找多个元素

#### 举例 ####

偶数 2n  
奇数 2n-1,2n+1  
5的倍数 5n  
5个以后 n+5  
5个以前 -n+5

### 伪元素选择器 ###

#### 作用 ####

创建虚拟元素（伪元素），用来摆放装饰性的内容  
E::before 在E元素里面最前面添加一个伪元素  
E::after 在E元素里面最后面添加一个伪元素

#### 注意： ####

必须设置content：“”属性，用来设置伪元素的内容，如果没有内容，则引号留空即可  
不写伪元素失效  
伪元素默认是行内显示模式  
权重和标签选择器相同

### PxCoook ###

像素大厨是一款切图设计工具软件，支持PSD文件的文字、颜色、距离自动智能识别  
开发面板（自动智能识别）  
设计面板（手动测量尺寸和颜色）  
![在这里插入图片描述][f60f2cc469b54c569e081bf9811ffe58.png]

### 盒子模型-组成 ###

#### 作用 ####

布局网页，摆放盒子和内容

#### 盒子模型-重要组成部分 ####

内容区域-width & height  
内边距-padding（出现在内容和盒子边缘之间）  
边框线-border  
外边距-margin（出现在盒子外面）

### 盒子模型-边框线 ###

#### 属性名 ####

boder(bd)

#### 属性值 ####

边框线粗细 线条样式 颜色（不区分顺序）

### 常用线条样式 ###

<table> 
 <thead> 
  <tr> 
   <th>关键字</th> 
   <th>含义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>solid</td> 
   <td>实线</td> 
  </tr> 
  <tr> 
   <td>dashed</td> 
   <td>虚线</td> 
  </tr> 
  <tr> 
   <td>dotted</td> 
   <td>点线</td> 
  </tr> 
 </tbody> 
</table>

### 设置单方向边框线 ###

#### 属性名 ####

border-方位名词（bd+方位名词首字母）

#### 属性值 ####

边框线粗细，线条样式 颜色（不区分顺序）

### 盒子模型-内边距 ###

#### 作用 ####

设置内容与盒子边缘之间的距离

#### 属性名 ####

padding/padding-方位名词

### 盒子模型-尺寸计算 ###

#### 默认情况 ####

盒子尺寸=内容尺寸+border尺寸+内边距尺寸

#### 结论 ####

给盒子加border/padding会撑大盒子

#### 解决方法 ####

手动做减法，减掉border/padding的尺寸  
内减模式：box-sizing:border-box

### 盒子模型-外边距 ###

#### 作用 ####

拉开两个盒子之间的距离

#### 属性名 ####

margin  
清除默认样式

#### 示例 ####

默认的内外边距

### 盒子模型-元素溢出 ###

#### 作用 ####

控制溢出元素的内容的像是方式

#### 属性名 ####

overflow

#### 属性值 ####

<table> 
 <thead> 
  <tr> 
   <th>关键字</th> 
   <th>含义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>hidden</td> 
   <td>退出隐藏</td> 
  </tr> 
  <tr> 
   <td>scroll</td> 
   <td>溢出滚动（无论是否溢出，都显示滚动条位置）</td> 
  </tr> 
  <tr> 
   <td>auto</td> 
   <td>溢出滚动（溢出才显示滚动条）</td> 
  </tr> 
 </tbody> 
</table>

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

### 外边距问题-合并现象 ###

#### 场景 ####

垂直排列的兄弟元素，上下margin会合并

#### 现象 ####

取两个margin中的较大值生效

### 外边距问题-塌陷问题 ###

#### 场景 ####

父子级的标签，子级的添加上外边距会产生塌陷问题

#### 现象 ####

导致父级一起向下移动

#### 解决方法 ####

取消子集margin，父级设置padding  
父级设置overflow：hidden  
父级设置border-top

### 行内元素-内外边距问题 ###

#### 场景 ####

行内元素添加margin和padding，无法改变元素垂直位置

#### 解决方法 ####

给行内元素添加line-height可以改变垂直位置

### 盒子模型-圆角 ###

#### 作用 ####

设置元素的外边框为圆角

#### 属性名 ####

border-radius

#### 属性值 ####

数字+px/百分比（取值最大为50%）

#### 注意 ####

属性值是圆角半径

#### 多值 ####

从坐上叫顺时针赋值，没有对应的角与对角值相同

#### 常见应用-正圆形状 ####

给正方形盒子设置圆角属性值为宽高的一半/50%

#### 常见应用-胶囊形状 ####

给长方形盒子圆角属性值为盒子高度的一半

### 盒子模型-阴影 ###

#### 作用 ####

给元素设置阴影效果

#### 属性名 ####

box-shadow

#### 属性值 ####

X轴偏移量 Y轴偏移量 模糊半径 扩展半径 颜色 内外阴影

#### 注意： ####

X轴偏移量和Y轴偏移量必须书写  
默认是外阴影，内阴影需要添加inset

### 标准流 ###

也叫文档流，指的是标签在页面中默认的排布规则

#### 举例 ####

块元素独占一行，行内元素可以一行显示多个

### 浮动 ###

#### 作用 ####

让块元素水平排列

#### 属性名：float ####

#### 属性值 ####

<table> 
 <thead> 
  <tr> 
   <th>关键字</th> 
   <th>含义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>left</td> 
   <td>左对齐</td> 
  </tr> 
  <tr> 
   <td>right</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