Web - CSS3基础语法与盒模型

概述

这篇文章是关于 Web 前端 CSS3 的基础语法与盒模型的讲解。包括 CSS3 层叠性及处理冲突规则、伪元素和新增伪类元素、属性选择器等。还介绍了文本与字体属性，如段落和行相关属性、字体文本属性。最后阐述了盒子模型，如元素隐藏、行内与块元素转换、盒子构成及相关属性等。

css3 层叠样式表

css全名叫做层叠样式表，层叠性是它很重要的性质，多个选择器可以同时作用于同一个标签，效果叠加。

css有严密的处理冲突的规则:ID权重 > Class权重 > 标签权重，复杂选择器可以通过个数的形式，计算权重：

项目	权重值
ID	2
Class	1
Tag	0

伪元素

1、::before 和::after

在被选元素的内容前面或后面插入额外的内容，常用来添加一些装饰性的元素或实现特定的布局效果。

p::before {
  content: "▶";
  color: blue;
  margin-right: 5px;
}

p::after {
  content: "◀";
  color: green;
  margin-left: 5px;
}

2、::first-letter

用于选择并设置文本块中第一个字母的样式，可实现首字下沉等效果。

p::first-letter {
  font-size: 2em;
  color: red;
  float: left;
  margin-right: 5px;
}

3、::first-line

用来选择并设置文本块中第一行的样式，比如可以改变第一行文本的字体、颜色、背景等。

p::first-line {
  font-weight: bold;
  color: purple;
}

4、::selection

用于设置用户选中页面元素时的样式，包括文字选中时的背景色和文字颜色等。

p::selection {
  background-color: yellow;
  color: black;
}

5、::placeholder

用于设置表单输入框中占位文本的样式，可调整占位文本的颜色、字体等。

input::placeholder {
  color: gray;
  font-style: italic;
}

6、::marker

主要用于设置列表项标记（如项目符号或数字）的样式。

ul li::marker {
  color: red;
  font-size: 1.2em;
}

新增伪类元素

1、:empty 选择空标签
2、:focus 选择当前获得焦点的表单元素
3、:enabled 和 :disabled 分别匹配可使用（启用）和不可使用（禁用）的表单元素。
4、:checked 匹配被选中的表单元素，如复选框、单选框。
5、root 选择根元素，即<html>标签

属性选择器

举例	意义
img[alt]	选择有alt属性的img标签
img[alt=“故宫”]	选择有alt属性是故宫的img标签
img[alt^=“北京”]	选择有alt属性是北京开头的img标签
img[alt$=“夜景”]	选择有alt属性是夜景结尾的img标签
img[alt*=“美”]	选择有alt属性中含有美的img标签
img[alt~=“手机拍摄”]	选择有alt属性中有空格隔开的手机拍摄字样的img标签
img[alt	=“参赛作品”]

序号选择器

举例	意义
:first-child	选择父元素的第一个子元素
:last-child	选择父元素的最后一个子元素
:nth-child(n)	第n个子元素
:nth-of-type(n)	选择父元素下指定类型的第n个元素，只针对指定类型的元素进行计数和选择，而不会考虑其他类型的元素
:nth-last-child(n)]	从父元素的最后一个子元素开始计数，选择第n个元素
:nth-last-of-type(n)	从父元素的最后一个指定类型的子元素开始计数，选择第n个元素

元素关系选择器

名称	举例	意义
子选择器	div > p	div的子标签p
相邻兄弟选择器	img+p	图片后面紧跟着的将被选中
通用兄弟选择器	p~span	p元素之后的所有同层级span元素

文本与字体属性

文本相关的属性普遍具有继承性，只需要给祖先标签设置，即可在后代所有标签中生效。因为文字相关属性有继承性，所以通常会设置body标签的字号、颜色、行高等，这样就能当做整个网页的默认样式了。

继承性有一个重要的原则：就近原则，在继承的情况下，选择器权重计算失效，而是就近原则。

段落和行相关属性

1、text-indent

设置段落首行的缩进,可以使用长度值（如px、em、rem等）或百分比来指定缩进量。

p { text-indent: 2em; }

2、line-height

设置段落行与行之间的垂直间距，即行高。可以是数字、长度值或百分比。数字表示相对于字体大小的倍数；长度值直接指定行高的具体尺寸；百分比是相对于字体大小的比例。

p { line-height: 1.5; }

3、text-align

设置段落文本的水平对齐方式,left（左对齐）、right（右对齐）、center（居中对齐）、justify（两端对齐）等。

p { text-align: center; }

4、letter-spacing

设置字符之间的水平间距,长度值，正值会增加字符间距，负值会减小字符间距。

p { letter-spacing: 2px; }

5、word-spacing

设置单词之间的水平间距，长度值，用于调整单词之间的间隔距离。

p { word-spacing: 5px; }

字体文本属性

1、font-family

指定文本使用的字体族。可以设置多个字体，按优先级排列，浏览器会依次尝试使用这些字体，直到找到可用的字体。

p {
    font-family: "微软雅黑", Arial, sans-serif;
}

2、font-size

设置字体的大小。可以使用多种单位，如 px（像素）、em 、rem、% 等，网页文字正文字号通常是16px，浏览器最小支持10px字号。

3. font-weight

设置字体的粗细程度。常见取值有 normal（正常粗细）、bold（粗体），还可以使用数字值，范围从 100 - 900，数字越大字体越粗。

strong {
    font-weight: bold;
}
span {
    font-weight: 600;
}

4、font-style

设置字体的样式，主要用于指定文本是否为斜体。取值有 normal（正常样式）、italic（斜体）。

5、text-decoration

text-decoration属性用于设置文本的修饰线外观的(下划线、删除线)

p.red-underline {
    text-decoration-line: underline;
    text-decoration-color: red;
}

盒子模型

在 CSS3 中，有多种方法可以隐藏元素，每种方法都有其特点和适用场景：

元素的隐藏

1、display

该属性值会让元素完全从文档流中移除，就好像这个元素在 HTML 文档中不存在一样。它不会占据页面的空间，也不会响应任何用户交互事件。

.hidden-element {
    display: none;
}

2、visibility

元素虽然在页面上不可见，但它仍然占据原来的空间，并且保留其布局位置。也就是说，它会影响页面的布局，但不会显示内容，同时也不会响应鼠标事件等交互操作。

行内元素和块元素的相互转换

在 CSS3 中，可以使用display属性来实现行内元素和块元素的相互转换。

1、行内元素转换为块元素

span {
  display: block;
}

2、块元素转换为行内元素

块元素如<div>、<p>等，默认会独占一行。若要将块元素转换为行内元素，需将display属性值设置为inline。

div {
  display: inline;
}

3、转换为行内块元素

还有一种常见的情况是将元素转换为行内块元素，即display属性值设置为inline-block。这种方式结合了行内元素和块元素的部分特点，元素既可以在一行内显示，又可以设置宽度、高度等块级元素的属性。

p {
  display: inline-block;
}

盒子模型

所有的html标签都可以看成柜型盒子，由width、height、padding、border构成，成为盒模型。

需要注意的是：++width、height不是盒子的总宽高，盒子的总宽度 = width + 左右padding + 左右border，盒子的总高度 = height + 上下padding + 上下border++

1、box-sizing

在 CSS3 中，box-sizing 属性用于定义元素在计算宽度和高度时所采用的盒模型类型，它可以改变元素的宽度和高度的计算方式。

2、margin

margin是盒子的外边距，即盒子其他盒子的距离，竖直方向的margin有塌陷现象:小的margin会塌陷到大的margin中，从而margin不叠加，只以大值为准。

一些元素比如body、ul、p，都有默认的margin，在开始制作网页的时候，要将他们清除。

盒子的水平居中，将盒子的左右两边的margin都设置成auto，盒子将水平居中。盒子的垂直居中，需要使用绝对定位技术实现。

3、padding

padding是盒子的内边距，即盒子边框内壁到文字的距离

4、width属性

width属性表示盒子内容的宽度，单位属性通常是px，移动端开发也会涉及百分数、rem等单位。

当块级元素div、h、li等没有设置width属性时，它将自动撑满，但这不意味着width属性可以继承。

5、height属性

height属性表示盒子的内容高度，height属性的单位通常是px,移动端开发也会涉及到百分数、rem等单位。

盒子的height属性如果不设置，它将自动被其内容撑开，如果没有内容，则height默认是0。