重学前端007 --- CSS 排版

导入字体

这将导入 Open Sans 字体系列，字体粗细值为 400、700 和 800。

css 复制代码

  <link rel='stylesheet' href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800"/>

元素	默认外边距（Margin）	默认内边距（Padding）	作用
<h1>- <h6>	上下 0.5em~1em	无	标题与内容分隔
<p>	上下 1em	无	段落间距
<ul>/ <ol>	上下 1em，左右 40px	无	列表缩进
<blockquote>	上下 1em，左右 40px	无	引用内容隔离
<form>	上下 1em	无	表单分隔
<button>	无	上下左右 0.5em~1em	按钮文字间距
<input>/ <textarea>	无	上下左右 0.25em~0.5em	输入内容间距
<fieldset>	上下 0.5em	上下左右 0.35em~0.75em	表单分组隔离
<hr>	上下 0.5em	少量 padding	分隔线隔离
<table>	上下 1em	单元格 0.25em~0.5em	表格与内容分隔

通过 CSS 重置（如 margin: 0; padding: 0;）可以消除默认边距，确保布局一致性：

css 复制代码

/* 重置所有元素的默认边距和内边距 */
* {
  margin: 0;
  padding: 0;
}

text-indent: -8px;是一个用于控制文本缩进的属性声明，它的作用是让文本块（如段落 <p>、标题 <h1>-<h6>等）的首行文本向左缩进 8 像素（负值表示向左缩进）。以下是详细解析：

定义： text-indent用于设置文本块第一行的缩进距离。
单位： 可以是像素（px）、百分比（%）、em 单位（em）等。
正值： 首行向右缩进（默认行为）。
负值： 首行向左缩进（可能使部分文本超出容器左侧边界）。

特性	说明
作用	控制文本块首行的缩进距离。
负值效果	首行向左缩进，可能超出容器边界。
常见用途	特殊排版（如悬挂缩进）、微调文本位置。
注意事项	需配合 padding-left或 overflow避免溢出。
响应式建议	优先使用相对单位（如 em）。

css 复制代码

body {
  font-family: "Open Sans", sans-serif;  # 字体名称中带有空格的字体必须用 CSS 引号括起来。
}

h1 {
  font-weight: 800;  # 字体粗度
  letter-spacing:0.15px;  # 字间距
}

css 复制代码

/ *上面选择了所有 div 元素没有 example 的 id。 */
div:not(#example) {
  color: red;
}