HTML 如何在我们的页面中呈现
元素的 HTML 类型
主要
CSS 选择器：-
CSS 继承
当未直接在元素上设置继承 CSS 属性（即颜色）时，会遍历父链直到找到该属性的值。
<div class="body">
<p>This is a Paragraph, but it will have the blue color due to inheritance</p>
</div>
<style>
.body{
color: blue;
}
</style>
案例2
<div class="body">
<p>This is a Paragraph, but it will have the red color due to direct Specification</p>
</div>
<style>
p {
color: red;
}
.body{
color: blue;
}
</style>
案例3
<div class="body">
<p>This is a Paragraph, but it will have the blue color due to strong Specification</p>
</div>
<style>
p {
color: red;
}
.body p{
color: blue;
}
</style>
什么是 CSS 特异性
注意：- 内联 CSS 更具特异性，!import 具有更多特异性
CSS 特异性计算器
艾姆和雷姆
EM:- 相对于其父字体侧
<html>
<div>
<p></p>
</div>
</html>
<style>
html {
font-size: 16px;
}
div {
font-size: 2em; //16px * 2 = 32px;
}
p {
font-size: 2em; // 32px * 2 = 64px
}
</style>
REM：- 相对于 Root 字体侧
<html>
<div>
<p></p>
</div>
</html>
<style>
html {
font-size: 16px;
}
div {
font-size: 2rem; //16px * 2 = 32px;
}
p {
font-size: 2rem; // 16px * 2 = 32px
}
</style>
%:- % 计算
<html>
<div>
<p></p>
</div>
</html>
<style>
html {
font-size: 16px;
}
div {
font-size: 120%; //1.2*16 = 19.2px;
}
p {
font-size: 120%; // 1.2 * 19.2 = 23.04px
}
</style>
CSS 组合器
1.后代选择器 (ul li a)
<ul> <li><a href='#'></a></li> </ul>
2.子组合器（直接后代）(div.text > p)
<div> <div class="text"> <P>Here the CSS will apply<P> </div> <div> <p>No CSS will apply</p> </div> </div>
3.相邻兄弟组合 (h1 + p)
注意：-
4.通用兄弟组合器 (p ~ 代码)
注意：-
块元素修改器架构（BEM）
其他方法
封锁
元素（块的一部分）
修饰符
.block__element--修饰符 语法
<form class=form> <input class='form__input'/> <input class="form__input form__input--disabled"/> <button class="form__button form__button--large"/> </form>
盒子模型：-（W.I.P）
我们需要从详细信息中添加更多信息
注意：-
将有一篇单独的文章介绍网格布局与 Flex 布局。
以上是CSS 详细信息的详细内容。更多信息请关注PHP中文网其他相关文章！
