块级元素和行内元素
在HTML和CSS中，元素可以分为块级元素和行内元素，它们的主要区别在于布局方式和默认行为。
块级元素（Block-level Elements）
块级元素是指那些在页面中以块的形式展现的元素。它们通常会从新的一行开始，并尽可能地占据其父容器的整个宽度。常见的块级元素包括：
<div>：通用的容器元素。<p>：段落。<h1>到<h6>：标题。<ul>、<ol>：无序列表和有序列表。<li>：列表项。<form>：表单。<header>、<footer>、<section>、<article>：语义化的HTML5块级元素。
行内元素（Inline Elements）
行内元素是指那些只占据其内容所需的宽度，不会打断文本的连续性，通常与其他行内元素在同一行显示的元素。常见的行内元素包括：
<span>：通用的内联容器。<a>：锚点，用于创建超链接。<img>：图片。<strong>、<em>：用于强调文本。<input>：输入框。<label>：表单标签。<code>：用于表示计算机代码。
主要区别
-
布局方式：
- 块级元素会占据一整行，并且会尽可能地拉伸以填满其父容器的宽度。
- 行内元素只占据其内容所需的宽度，并且可以与其他行内元素在同一行显示。
-
默认宽度：
- 块级元素的宽度默认是100%，即其父容器的整个宽度。
- 行内元素的宽度默认是其内容的宽度。
-
换行：
- 块级元素会在前后自动换行，使得每个块级元素独占一行。
- 行内元素不会在前后自动换行，而是与其他行内元素在同一行显示。
通过CSS，你可以改变元素的默认显示类型，使其表现出与默认类型不同的行为。例如，使用display: block;可以将一个行内元素设置为块级元素，反之亦然。
选择器
元素选择器
类选择器
.class {}
ID选择器
#ID
属性选择器
prop=value
比如：
css
[href] {
}又比如
css
[href="http://www.baidu.com"] {
}属性选择器的功能不止于此，对于属性的判断，可以类似简单的正则表达式一样灵活
-
href\*="wii"\]{}：选择存在href属性，并且属性值**包含**wiki的所有元素
-
href$="wii"\]{}：选择存在href属性，并且属性值以wiki**结尾**的所有元素
-
href\|="wii"\]{}：与\*=类似，但它只在意被-分割的属性值，且只选中第一项
markdown
* {
}全局选择器会为页面中所有的元素添加边框，包括:和。全局选择器也可以跟其他选择器组合使用，比如我们之后要提到的用法：
css
body * {
}即选中body下所有的后代元素
选择器的组合使用
后代选择
以div span {}为例，前面的div指的是选择范围，后面的span指的是目标元素，一句话概括就是"选中所有
中的元素"
子选择
上面的是后代，但如果只想找所有的子元素，使用>
例如：
css
#grandpa > div {
}只会选择到id为grandpa下面的第二级的div元素
相邻兄弟选择
css
<span>哥哥</span>
<span id="me">我</span>
<span>弟弟</span>
<span>弟弟</span>想选择我的弟弟如何实现：
css
#me + span {
}如果想选择我的所有弟弟如何实现？这就需要通用选择器
通用选择器
css
<span>哥哥</span>
<span id="me">我</span>
<span>弟弟</span>
<span>弟弟</span>还是刚才的例子，使用如下的方式就可以实现：
css
#me ~ span {
}但如果想找哥哥怎么办？有没有找哥哥的选择器？很遗憾，目前没有，只能通过一些迂回的方式解决：
css
body > .elder {
}
<span class="elder">哥哥</span>
<span class="elder">哥哥</span>
<span id="me">我</span>
<span>弟弟</span>
<span>弟弟</span>伪类选择器
伪类选中的是元素的状态或与外界的关系。简单来说就是选中了一种事件，比如，我想在光标悬停在链接上时才作用边框样式，这是一种事件，伪类选择器就是做这个事情的。
伪类选择器一般由常规选择器:伪类构成：
