后端程序员的CSS复习

块级元素和行内元素

在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>：用于表示计算机代码。

主要区别

1. 布局方式：

   • 块级元素会占据一整行，并且会尽可能地拉伸以填满其父容器的宽度。
   • 行内元素只占据其内容所需的宽度，并且可以与其他行内元素在同一行显示。

2. 默认宽度：

   • 块级元素的宽度默认是100%，即其父容器的整个宽度。
   • 行内元素的宽度默认是其内容的宽度。

3. 换行：

   • 块级元素会在前后自动换行，使得每个块级元素独占一行。
   • 行内元素不会在前后自动换行，而是与其他行内元素在同一行显示。

通过CSS，你可以改变元素的默认显示类型，使其表现出与默认类型不同的行为。例如，使用display: block;可以将一个行内元素设置为块级元素，反之亦然。

选择器

元素选择器

类选择器

.class {}

ID选择器

#ID

属性选择器

[prop=value]

比如：

[href] {

}

又比如

[href="http://www.baidu.com"] {

}

属性选择器的功能不止于此，对于属性的判断，可以类似简单的正则表达式一样灵活

1. [href*="wii"]{}：选择存在href属性，并且属性值包含wiki的所有元素
2. [href^="wii"]{}：选择存在href属性，并且属性值以wiki开头的所有元素
3. [href$="wii"]{}：选择存在href属性，并且属性值以wiki结尾的所有元素
4. [href~="wii"]{}：与*=类似，但它只在意被空格分割的属性值，例如class="border dash"可以被[href*="border"]和[href~="border"]选中
5. [href|="wii"]{}：与*=类似，但它只在意被-分割的属性值，且只选中第一项

全局选择器

* {

}

全局选择器会为页面中所有的元素添加边框，包括:和。全局选择器也可以跟其他选择器组合使用，比如我们之后要提到的用法：

    body * {
    
    }

即选中body下所有的后代元素

选择器的组合使用

后代选择

以div span {}为例，前面的div指的是选择范围，后面的span指的是目标元素，一句话概括就是“选中所有

    #grandpa > div {
    
    }

    <span>哥哥</span>
    <span id="me">我</span>
    <span>弟弟</span>
    <span>弟弟</span>

    #me + span {
    
    }

    <span>哥哥</span>
    <span id="me">我</span>
    <span>弟弟</span>
    <span>弟弟</span>

    #me ~ span {
    
    }

    
    body > .elder {
    
    }
    
    <span class="elder">哥哥</span>
    <span class="elder">哥哥</span>
    <span id="me">我</span>
    <span>弟弟</span>
    <span>弟弟</span>