青训营上课笔记

三.深入理解CSS

1.选择器优先级

a.优先级决定了当多个选择器同时作用于同一个元素时，哪一个选择器的属性会被应用。
b.优先级的计算方式是通过对选择器进行加权得到一个优先级值，权重的大小依次是：ID 选择器 > 类选择器 > 标签选择器。
c.相同优先级的选择器，后面声明的属性会覆盖前面声明的属性。

2.复用

a.继承：某些属性会自动继承其父元素的计算值，除非显示指定一个值
b.显式继承：通过设置inherit来继承父元素的样式。

考虑以下HTML结构：
<div class="parent">
  <p class="child">This is some text.</p >
</div>

如果我们希望`.child`元素继承`.parent`元素的属性，可以使用显式继承。在CSS中，可以这样设置：
.parent {
  color: blue;
}
.child {
  color: inherit; /* 显式继承父元素的color属性 */
}

在上面的代码中，`.child`元素的`color`属性被设置为`inherit`，这意味着它会继承`.parent`元素的`color`值，即蓝色。

显式继承可以用于继承父元素的任何CSS属性，例如`font-size`、`background-color`、`font-family`等。通过使用`inherit`关键字，子元素可以直接继承父元素的样式，而不必重新定义相同的属性值。这样可以简化CSS代码并提高代码的可维护性。

3.布局

a.确定内容大小和位置的算法
b.依据元素、容器、兄弟节点和内容等信息来计算
c.相关技术：常规流、浮动、绝对定位
d.常规流：行级、块级、表格布局、FlexBox、Grid布局
e.浮动：通过使用float属性来实现元素的浮动效果，常用于实现多栏布局、图文混排等效果
f.绝对定位：过指定元素的位置属性（top、right、bottom、left）来精确地放置元素在页面上的位置。相对于它的最近的已定位的父元素或祖先元素进行定位。如果没有已定位的父元素，则相对于最初的包含块（通常是浏览器窗口）进行定位。使用绝对定位时，元素会从文档流中脱离，不再占据原本的空间。

4.盒模型

CSS盒模型是CSS中描述和布局元素的一种方式。在CSS中，每个元素都被看作是一个矩形框，这个矩形框由内容区域、内边距、边框和外边距组成，这些部分合在一起就构成了元素的盒模型。

盒模型的四个部分：
    1. 内容区域（Content）：是元素真实的内容，比如文字、图片等。
    2. 内边距（Padding）：是内容区域与边框之间的空白区域，可以用来设置元素的内部空间。
    3. 边框（Border）：是内容区域和外边距之间的线，可以用来给元素添加边框，并设置边框的样式、宽度、颜色等。
    4. 外边距（Margin）：是元素与其他元素之间的空白区域，可以用来设置元素与其它元素之间的距离。

a.盒模型示意图：

b.盒模型的大小计算方式：

元素的实际宽度（width）可以通过计算内容区域的宽度（content width）加上左右内边距（left padding + right padding）和左右边框（left border + right border）得到。

元素的实际高度（height）可以通过计算内容区域的高度（content height）加上上下内边距（top padding + bottom padding）和上下边框（top border + bottom border）得到。

c.盒模型的属性：

1. width：设置元素的宽度。
2. height：设置元素的高度。
3.：设置元素的内边距
4. border：设置元素的边框。
5. margin：设置元素的外边距。
6. 盒模型的盒子模型属性还包括盒子的样式、颜色和阴影等。

5.盒模型布局

使用盒模型可以灵活地控制元素的大小和位置。通过设置元素的宽度和高度、内边距和边框，可以调整元素的大小和内部空间。通过设置外边距可以控制元素与其它元素之间的距离。通过使用定位和浮动等属性可以进一步调整元素的位置和布局方式。

a.块级（block）：不和其它盒子并列摆放，使用所有的盒模型属性。
	块级排版上下文：某些容器会创建一个BFC（根元素、浮动、绝对定位、inline-block、Flex子顶和Grid子顶、overflow值不是visible的块盒、display：flow-root
	BFC内排版规则：
		·盒子从上到下摆放
		·锤子margin合并
		·BFC内盒子的margin不会与外面的合并
		·BFC不会和浮动元素重叠

b.行级（inline）：和其它行级盒子一起放在一行或拆开成多行。盒模型中的width、height不适用。
	行级排版上下文：只包含行级盒子的容器会创建一个IFC
	IFC内排版规则:
    	·盒子在一行内水平摆放
    	·一行放不下时，换行显示
    	·text-align决定一行内盒子的水平对齐
    	·vertical-align决定一个盒子在行内的垂直显示
    	·避开浮动元素*

6.块级盒子与行级盒子的区别

a.区别于元素类型：
	块级盒子（block-level box）是指元素在页面中以块的形式显示，每个块级元素都会独占一行，默认情况下宽度会占满父容器；
	行级盒子（inline-level box）是指元素以行的形式显示，多个行级元素可以在同一行内显示。

b.盒子特性：
	块级盒子会自动换行，每个块级元素都会从新的一行开始；
	行级盒子则不会自动换行，它们会根据内容自动调整宽度，并尽量在一行内显示。

c.大小调整：
	块级盒子的宽度默认为父容器的100%（除非设置具体的宽度），高度由内容或者其他样式属性决定；
	行级盒子的宽度则由内容决定，高度由字体大小和行高等样式属性决定。

d.相对定位：
	块级盒子可以通过设置position属性为relative、absolute或fixed进行相对或绝对定位；
	行级盒子只能通过设置display属性为inline-block或者inline来改变其布局方式。

7.选择器

CSS选择器是一种用于选择HTML文档中特定元素的方法。它可以根据元素的标签名、类名、id值、属性值等来进行选择。

常见的CSS选择器包括：
	1. 元素选择器：通过元素的标签名来选择元素，例如p选择器会选择所有的段落元素。

    2. 类选择器：通过元素的class属性值来选择元素，例如.class选择器会选择所有具有该class属性值的元素。

    3. ID选择器：通过元素的id属性值来选择元素，例如#id选择器会选择具有该id属性值的元素。

    4. 属性选择器：通过元素的属性值来选择元素，例如[type="text"]选择器会选择具有type属性值为text的元素。

    5. 选择器组合：可以使用逗号将多个选择器组合在一起，选择器组合会选择满足其中任意一个选择器的元素。

    6. 后代选择器：使用空格将多个选择器进行组合，后代选择器会选择满足其中所有选择器的元素。

    7. 子元素选择器：使用大于号(>)将多个选择器进行组合，子元素选择器会选择满足第一个选择器作为父元素的子元素。

    8. 相邻兄弟选择器：使用加号(+)将多个选择器进行组合，相邻兄弟选择器会选择满足第一个选择器作为前一个兄弟元素的后一个兄弟元素。

    9. 伪类选择器：通过元素的特殊状态来选择元素，例如:hover伪类选择器会在鼠标悬停时选择元素。

a.元素选择器

# 这个例子选择所有的<p>元素，并将它们的文本颜色设置为红色
p {
	color: red;
}

<p>段落</p>
<p>段落</p>

b.类选择器

# 这个例子选择具有'highlight'类名的元素，并将它们的背景颜色设置为黄色
.highlight {
	background-color:yellow;
}

<p class="highlight">突出显示段落<p>
<P>另一个普通段落<p>

c.ID选择器

# 这个例子选择具有'header’id的元素，并将它们的字体大小设置为18像素
#header {
	font-size: 18px;
}

<div id="header">这是标题栏</div>

d.属性选择器

# 这个例子将选择具有'type`'属性值为 'text'的<input>元素，并将它们的边框设置为灰色。
input[type="text"] {
	border: 1px solid gray;
}

<input type="text" placeholder="请输入文本">

e.选择器组合

# 这个例子同时选择所有的<h1><h2><h3>元素，将它们的文本颜色设置为蓝色。
h1, h2, h3 {
	color: blue;
}

<h1>标题</h1>
<h2>标题</h2>
<h3>标题</h3>

f.后代选择器

# 这个例子将选择.parent-element元素中的所有.child-element元素，并将字体加粗
.parent-element .child-element {
	font-weight: bold;
}

<div class="parent-element">
	<p class="child-element">子元素文本</p>
</div>

g.子元素选择器

# 这个例子选择<ul>元素的直接子元素中的所有<li>元素，并将他们的列表样式设置为方形符号
ul>li {
	list-style: square;
}

<ul>
	<li>列表项</li>
	<li>列表项</li>
</ul>

h.相邻兄弟选择器

# 这个例子将选择紧跟在<h2>元素后面的第一个<p>元素，将它的上边距设置为20像素
h2 + p {
	margin-top: 20px;
}

<h2>标题2</h2>
<p>紧跟在标题后面的段落</p>

i.伪类选择器

# 这个例子将选择鼠标悬停在<a>元素上时，将其文字下划线化
a:hover {
	text-decoration: underline;
}

<a href="#">这是一个链接</a>