理解CSS核心：标准文档流与样式设定

"标准文档流-css核心知识" 标准文档流是CSS布局的基础，它是指HTML元素在页面上默认的排列方式。HTML元素分为两种主要类型：块级元素和行内元素。 1. 块级元素（block-level elements） 块级元素如`<div>`、`<p>`、`<h1>`等，它们会在页面上占据一整行，彼此之间会自动换行。每个块级元素都默认拥有自己的独立高度和宽度，并且可以通过设置`width`、`height`、`margin`和`padding`等属性来调整空间。 2. 行内元素（inline elements） 行内元素如`<span>`、`<strong>`、`<a>`等，它们不会占用一整行，而是按照文本的顺序横向排列，直到遇到边界或换行符时才会自动折行。行内元素的宽度和高度通常由其内容决定，无法直接通过CSS设置宽高，但可以设置`margin`和`padding`的水平方向值来影响周围元素。 CSS思想的核心是将内容（Structure）与样式（Presentation）分离，从而实现更好的可维护性和可访问性。通过使用CSS，我们可以独立地修改网页的外观，而不会影响到HTML的结构。这包括了自定义样式，如改变标签的默认样式，以及应用更复杂的高级样式，如文字效果、图像处理和超链接样式。 CSS引用有多种方式，可以是外部文件（通过`<link>`标签链接到单独的`.css`文件），也可以是内部引用（将CSS代码写入`<style>`标签内置于HTML文档头部）。 CSS选择器是用于选取页面中特定元素的关键工具，基本CSS选择器包括： - 标签选择器：通过元素名称选取，如`h1`选取所有一级标题。 - 类选择器：通过类名选取，如`.myClass`选取具有该类名的所有元素。 - ID选择器：通过ID选取唯一元素，如`#myID`选取ID为myID的元素。 - 复合选择器：结合多个选择器，如`h1.myClass`选取既是h1标签又有myClass类的元素。 CSS还具有继承特性，子元素可以从父元素继承某些样式，但不是所有属性都能继承，例如`border`和`padding`就不能继承。 在实际应用中，CSS不仅限于基础选择器，还包括伪类、伪元素、属性选择器、选择器组合等更高级的用法，使得对网页元素的控制更为精确。通过深入理解标准文档流和CSS核心知识，开发者可以构建出符合Web标准、布局美观且功能丰富的网页。