HTML详解连载（7）

下面进行专栏介绍

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

开始喽

在这里插入图片描述

结构伪类选择器

作用

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

:nth-child（公式）

作用

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

举例

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

伪元素选择器

作用

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

注意：

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

PxCoook

像素大厨是一款切图设计工具软件，支持PSD文件的文字、颜色、距离自动智能识别 开发面板（自动智能识别） 设计面板（手动测量尺寸和颜色）

在这里插入图片描述

盒子模型-组成

作用

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

盒子模型-重要组成部分

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

盒子模型-边框线

属性名

boder(bd)

属性值

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

常用线条样式

设置单方向边框线

属性名

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

属性值

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

盒子模型-内边距

作用

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

属性名

padding/padding-方位名词

盒子模型-尺寸计算

默认情况

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

结论

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

解决方法

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

盒子模型-外边距

作用

拉开两个盒子之间的距离

属性名

margin 清除默认样式

示例

默认的内外边距

盒子模型-元素溢出

作用

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

属性名

overflow

属性值

在这里插入图片描述

外边距问题-合并现象

场景

垂直排列的兄弟元素，上下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

属性值

特点

顶对齐，具备行内块显示模式特点 浮动的盒子会脱标