JavaScript-HTML-CSS Day3 Notes
1、如下代码，为什么只写了 .size {} 却也能够自动作用到 class="red size"?
记住两个结论即可：
(1). 一个类选择器可以给多个标签使用
(2). 一个标签可以使用多个类名，class属性值写多个类名，类名用空格隔开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>类选择器</title> <style> /* 定义 */ .red { color: red; } .size { font-size: 50px; } </style> </head> <body> <!-- 使用 --> <!-- 一个类选择器可以给多个标签使用 --> <p class="red">111111</p> <p>222222</p> <!-- 一个标签可以使用多个类名，class属性值写多个类名，类名用空格隔开 --> <div class="red size">div 标签</div> <div class="size">单独size</div> </body> </html>
在如上代码中，.size {} 选择器能够自动作用于 class="red size" 的原因是因为一个HTML元素可以同时拥有多个类名。类名之间用空格隔开，浏览器会分别识别每个类，并将对应的CSS样式应用到该元素上。
具体来说：
-
多个类名：
<div class="red size">中包含了两个类名：red和size。这意味着该元素会同时应用这两个类的样式。 -
CSS 选择器的优先级：当元素同时具有多个类名时，浏览器会对每个类名所定义的样式进行解析，并将其结合起来应用。由于
.size仅定义了字体大小，而.red定义了字体颜色，最终结果就是该div元素会同时具有红色字体和50像素的字体大小。
因此，只要在 CSS 中定义了 .size 类，任何使用了该类的元素都能获得相应的样式，正是这种组合使用类名的特性，使得多个样式可以灵活地应用于同一个元素。
2、一个细节、height == line-height时，单行文字会实现剧中效果。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { height: 100px; background-color: skyblue; line-height: 100px; } </style> </head> <body> <div>文字</div> </body> </html>
3、font 属性的描述顺序，要记住。
另外有一个细节：
700 等价于 bold, 都是实现字体加粗的效果。
400 等价于 normal, 都是实现正常字体效果。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>font 属性</title> <style> /* 文字倾斜、文字加粗、字体大小是30px、行高2倍、楷体 */ div { font: italic 700 30px/2 楷体; /* font 属性必须写字号和字体，否则 属性不生效 */ /* font: 30px 楷体; */ /* font: italic 700 30px/2; */ } </style> </head> <body> <div>测试 font 属性</div> </body> </html>
4、如何理解这个，这里注释说的，本质：居中的是文字内容，不是标签
关键是区分 文本内容位置、和标签位置的概念
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>文本对齐方式</title> <style> h1 { /* 本质：居中的是文字内容，不是标签 */ /* text-align: left; */ text-align: center; /* text-align: right; */ } </style> </head> <body> <h1>标题文字</h1> </body> </html>
注释中提到的“本质：居中的是文字内容，不是标签”是为了强调 text-align 属性的作用对象。text-align 只影响 标签内的文本内容 如何排列，而不是整个标签本身的位置。
具体解释如下：
-
text-align的作用范围：text-align是一个控制文本内容的属性，它会调整包含文本的元素内部的文本对齐方式，如左对齐（left）、右对齐（right）或居中对齐（center）。这个属性仅影响文本，而不会影响元素本身的布局或位置。 -
对比标签 vs 文本：在你的例子中，
h1标签的文字“标题文字”被居中对齐，但h1元素（即标签本身）仍然会按照页面的正常流布局放置，并没有改变h1元素的布局位置。 -
如果要让整个标签居中：如果想让
h1标签本身在页面中水平居中，而不是它内部的文本居中，通常会使用诸如margin: 0 auto;或display: flex; justify-content: center;等布局相关的CSS属性。
因此，注释是强调 text-align 只对标签内的文本内容起作用，而不会改变标签自身的位置。
5、追问：如何验证？ 但 h1 元素（即标签本身）仍然会按照页面的正常流布局放置，并没有改变 h1 元素的布局位置。
你可以通过几种方式来验证 h1 元素（即标签本身）在应用 text-align: center; 后，仍然会按照正常的页面流布局，而没有改变自身位置。
验证步骤：
方法 1：通过添加背景色验证
- 给
h1元素添加背景色。 - 观察背景色是否只出现在页面的左侧或右侧，还是占据整个页面宽度。
示例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>文本对齐方式</title> <style> h1 { /* 本质：居中的是文字内容，不是标签 */ text-align: center; background-color: lightblue; /* 添加背景色 */ } </style> </head> <body> <h1>标题文字</h1> </body> </html>
预期结果：
h1元素的背景色会覆盖整个页面宽度，因为h1仍然按照正常的页面流布局占据整个容器的宽度。- 文字虽然居中，但背景色显示了
h1标签仍然是宽度为100%的块级元素。
方法 2：通过调整宽度验证
- 设置
h1元素的宽度为一个固定值。 - 观察它的标签位置是否改变。
示例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>文本对齐方式</title> <style> h1 { text-align: center; /* 居中文字 */ width: 200px; /* 固定宽度 */ background-color: lightblue; /* 背景色 */ } </style> </head> <body> <h1>标题文字</h1> </body> </html>
预期结果：
h1标签宽度固定为200px，因此背景色只会覆盖200px宽度的区域。- 文字仍然会在
h1元素内居中显示，但整个h1标签本身的宽度和位置没有改变。
6、关于CSS存在错误的属性时，有黄色叹号。直观感受下，加深印象，培养直觉
修改为正常后
浙公网安备 33010602011771号