CSS进阶

1. 盒子模型

1.1 网页布局的本质

网页布局过程：

1. 先准备好相关的网页元素（基本上都是盒子box）
2. 利用CSS设置好盒子样式，然后摆放到相应位置(属于浮动与定位)
3. 向盒子里装内容
   

1.2 盒子模型组成

盒子模型是将HTML页面中的布局元素看作一个矩形的盒子，即承装内容的容器。
CSS盒子模型本质是一个盒子，封装周围的HTML元素，包括：边框(border)、外边距(margin)、内边距(padding)和实际内容(content)。

1.3 边框(border)

1.3.1

border可以设置元素的边框。边框由三部分组成：粗细、样式、颜色

语法:

border : border-width || border-style || border-color

属性	作用
border-width	定义边框粗细，单位是px
border-style	边框的样式
border-color	边框颜色

border-style 属性指定要显示的边框类型。
允许以下值：

• dotted - 定义点线边框
• dashed - 定义虚线边框
• solid - 定义实线边框
• double - 定义双边框
• groove - 定义 3D 坡口边框。效果取决于 border-color 值
• ridge - 定义 3D 脊线边框。效果取决于 border-color 值
• inset - 定义 3D inset 边框。效果取决于 border-color 值
• outset - 定义 3D outset 边框。效果取决于 border-color 值
• none - 定义无边框
• hidden - 定义隐藏边框

边框简写：

border: 1px solid red ;没有顺序

边框分开写法：

border-top: 1px solid red; 只设定上边框，其余同理

1.3.2表格的细线边框

border-collapse属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。

语法：

border-collapse : collapse; 表示相邻的单元格合并在一起

1.3.3 边框影响盒子的实际大小

解决方案：

1. 测量盒子大小时，不量边框
2. 测量时包含了边框，用width/height减去边框宽度

1.4 内边距（padding)

1.4.1

padding属性用于设置内边距，即边框与内容之间的距离。

属性	作用
padding-top	上内边距
padding-bottom	下内边距
padding-left	左内边距
padding-right	右内边距

padding简写：

值的个数	表达意思
padding：5px	上下左右都为5像素
padding:5px 10px	上下为5像素，左右为10像素
padding:5px 10px 20px	上5像素，左右10像素，下20像素
padding:5px 10px 20px 30px	上5像素，右10像素，下20像素，左30像素

1.4.2 影响盒子的实际大小

如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。

解决方案：

如果保证盒子跟效果图大小保持一致，则让width/height减去多出来的内边距大小即可。

1.5 外边距(margin)

1.5.1

外边距的简写与内边距相似,CSS 定义了一些规则，允许为外边距指定少于 4 个值。规则如下：

• 如果缺少左外边距的值，则使用右外边距的值。
• 如果缺少下外边距的值，则使用上外边距的值。
• 如果缺少右外边距的值，则使用上外边距的值。
  如下图所示：
  

所有外边距属性都可以设置以下值：

• auto - 浏览器来计算外边距
• length - 以 px、pt、cm 等单位指定外边距
• % - 指定以包含元素宽度的百分比计的外边距
• inherit - 指定应从父元素继承外边距

1.5.2 外边距的合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

• 当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。
  

• 当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。
  

• 注：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

1.6 边框(border)

border-radius属性用于设置元素的外边框圆角
语法：

border-radius : length;

radius半径（圆的半径）原理：（椭）圆与边框的交集形成圆角效果。

• 参数值可以为数值或百分比的形式
• 如果是正方形,想要设置为一个圆，把数值修改为高度或者高度的一半即可，或者直接写为50%。
• 如果是一个矩形，设置为高度的一半就可以
• 该属性时一个简写属性，可以跟四个值，分别为左上角、右上角、右下角、左下角。

1.7 盒子阴影

可以使用box-shadow属性为盒子添加阴影。
语法：

box-shadow: h-shadow v-shadow blur spread color inset;

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊距离。
spread	可选。阴影的尺寸。
color	可选。阴影的颜色。请参阅 CSS 颜色值。
inset	可选。将外部阴影 (outset) 改为内部阴影。

• 注：
  1.默认的是外阴影，但是不可以写这个单词，否则导致阴影无效。
  2.盒子阴影不占空间，不会影响其他盒子排列。

1.7 文字阴影

text-shadow 属性向文本设置阴影。

语法：

text-shadow: h-shadow v-shadow blur color;

值	描述 测试
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊的距离。
color	可选。阴影的颜色。

2. 浮动

布局 - 浮动和清除

float 属性规定元素如何浮动。
clear 属性规定哪些元素可以在清除的元素旁边以及在哪一侧浮动。

2.1 float 属性

2.1.1

float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

语法：

选择器{float : 属性值； }

float 属性可以设置以下值之一：

• left - 元素浮动到其容器的左侧
• right - 元素浮动在其容器的右侧
• none - 元素不会浮动（将显示在文本中刚出现的位置）。默认值。
• inherit - 元素继承其父级的 float 值

2.1.2 浮动的特性：

1. 浮动元素会脱离标准流(脱标)——不再保留原来的位置
2. 浮动的元素会一行内显示并且元素顶部对齐
3. 浮动的元素会具有行内块元素的特性

• 注：浮动的元素是互相贴靠在一起的（没有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。

2.2 clear 属性

2.2.1

clear 属性指定哪些元素可以浮动于被清除元素的旁边以及哪一侧。

语法：

选择器{clear : 属性值； }

clear 属性可设置以下值之一：

• none - 允许两侧都有浮动元素。默认值
• left - 左侧不允许浮动元素
• right- 右侧不允许浮动元素
• both - 左侧或右侧均不允许浮动元素
• inherit - 元素继承其父级的 clear 值
  使用 clear 属性的最常见用法是在元素上使用了 float 属性之后。

2.2.2 清除浮动的方法

1. 额外标签法，也称为隔墙法
2. 父级添加overflow属性
3. 父级添加after伪元素
4. 父级添加双伪元素

所有 CSS 浮动属性:

属性	描述
box-sizing	定义元素的宽度和高度的计算方式：它们是否应包含内边距和边框。
clear	指定哪些元素可以在被清除的元素旁边以及在哪一侧浮动。
float	指定元素应如何浮动。
overflow	指定如果内容溢出元素框会发生什么情况。
overflow-x	指定当溢出元素的内容区域时，如何处理内容的左/右边缘。
overflow-y	指定当溢出元素的内容区域时，如何处理内容的上/下边缘。

3. 定位

3.1 定位组成

定位：将盒子定在某个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子

定位 =定位模式+边偏移。

定位模式用于指定一个元素在文档中的定位方式。

边偏移则决定了该元素的最终位置。

3.1.1 定位模式

定位模式决定元素的定位方式，它通过CSS的position属性来设置，其值可以分为四个：

值	语义
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

3.1.2 边偏移

边偏移就是定位的盒子移动到最终位置。有top 、bottom、left、right 4个属性。

边偏移属性	描述
top	定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
right	定义了定位元素右外边距边界与其包含块右边界之间的偏移。
bottom	定义了定位元素下外边距边界与其包含块下边界之间的偏移。
left	定义了定位元素左外边距边界与其包含块左边界之间的偏移。

3.2 静态定位 static

静态定位是元素的默认定位方式，即无定位。

语法：

选择器{ position : static;}

• 静态定位按照标准流特性摆放位置，没有边偏移
• 静态定位在布局时很少使用

3.3 相对定位 relative

相对定位是在元素移动位置的时候，相对于它原来的位置来说的。

语法：

选择器 { position : relative }

• 注:在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

3.4 绝对定位 absolute

绝对定位是元素在移动位置的时候，是相对于它的祖先元素来说的。

语法：

选择器 { position : absolute }

特点：
1.如果没有祖先元素或者祖先元素没有定位,则以浏览器为准定位。
2.如果祖先元素有定位，则以最近一级的有定位祖先元素为参考点移动位置。
3.绝对定位不再占有原先的位置。

4. 伪类

伪类用于定义元素的特殊状态。

可以用于：

• 设置鼠标悬停在元素上时的样式
• 为已访问和未访问链接设置不同的样式
• 设置元素获得焦点时的样式

语法：

selector:pseudo-class {
property: value;
}

注：a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效,a:active 必须在 CSS 定义中的 a:hover 之后才能生效,伪类名称对大小写不敏感。

所有伪类：

选择器	例子	例子描述
:active	a:active	选择活动的链接。
:checked	input:checked	选择每个被选中的 元素。
:disabled	input:disabled	选择每个被禁用的 元素。
:empty	p:empty	选择没有子元素的每个 元素。
:enabled	input:enabled	选择每个已启用的 元素。
:first-child	p:first-child	选择作为其父的首个子元素的每个 元素。
:first-of-type	p:first-of-type	选择作为其父的首个 元素的每个 元素。
:focus	input:focus	选择获得焦点的 元素。
:hover	a:hover	选择鼠标悬停其上的链接。
:in-range	input:in-range	选择具有指定范围内的值的 元素。
:invalid	input:invalid	选择所有具有无效值的 元素。
:lang(language)	p:lang(it)	选择每个 lang 属性值以 “it” 开头的 元素。
:last-child	p:last-child	选择作为其父的最后一个子元素的每个 元素。
:last-of-type	p:last-of-type	选择作为其父的最后一个 元素的每个 元素。
:link	a:link	选择所有未被访问的链接。
:not(selector)	:not§	选择每个非 元素的元素。
:nth-child(n)	p:nth-child(2)	选择作为其父的第二个子元素的每个 元素。
:nth-last-child(n)	p:nth-last-child(2)	选择作为父的第二个子元素的每个 元素，从最后一个子元素计数。
:nth-last-of-type(n)	p:nth-last-of-type(2)	选择作为父的第二个 元素的每个 元素，从最后一个子元素计数
:nth-of-type(n)	p:nth-of-type(2)	选择作为其父的第二个 元素的每个 元素。
:only-of-type	p:only-of-type	选择作为其父的唯一 元素的每个 元素。
:only-child	p:only-child	选择作为其父的唯一子元素的 元素。
:optional	input:optional	选择不带 “required” 属性的 元素。
:out-of-range	input:out-of-range	选择值在指定范围之外的 元素。
:read-only	input:read-only	选择指定了 “readonly” 属性的 元素。
:read-write	input:read-write	选择不带 “readonly” 属性的 元素。
:required	input:required	选择指定了 “required” 属性的 元素。
:root	root	选择元素的根元素。
:target	#news:target	选择当前活动的 #news 元素（单击包含该锚名称的 URL）。
:valid	input:valid	选择所有具有有效值的 元素。
:visited	a:visited	选择所有已访问的链接。

5. 伪元素

伪元素用于设置元素指定部分的样式。

可用于：

1. 设置元素的首字母、首行的样式
2. 在元素的内容之前或之后插入内容

语法：

selector::pseudo-element {
property: value;
}

所有伪元素:

选择器	例子	例子描述
::after	p::after	在每个 元素之后插入内容。
::before	p::before	在每个 元素之前插入内容。
::first-letter	p::first-letter	选择每个 元素的首字母。
::first-line	p::first-line	选择每个 元素的首行。
::selection	p::selection	选择用户选择的元素部分。

双冒号表示法 – ::first-line 对比 :first-line
在 CSS3 中，双冒号取代了伪元素的单冒号表示法。这是 W3C 试图区分伪类和伪元素的尝试。
在 CSS2 和 CSS1 中，伪类和伪元素都使用了单冒号语法。
为了向后兼容，CSS2 和 CSS1 伪元素可接受单冒号语法。

---

总结：
通过学姐的讲解，我补充了一些知识点：
1. :link和:visited只用于超链接
2.必须设置content属性伪元素才能生效，伪元素默认为行内元素
3.(1)z-index属性是用来设置元素的堆叠顺序的，或称为元素层级，当元素发生堆叠时，层级高的元素会覆盖在层级低的元素上
(2)z-index属性只能在设置了position: relative | absolute | fixed的元素和父元素设置了 display: flex属性的子元素中起作用，在其他元素中是不作用的

非常感谢学姐的耐心讲解！！！同时也希望可以跟着学长学姐学到更多知识！