重学前端007 --- CSS 排版
文章目录
- 导入字体
- 总结浏览器给元素添加的默认值
- text-indent: -8px;
- 1. text-indent属性的作用
- 2. 总结
- 其他 css
导入字体
这将导入 Open Sans 字体系列，字体粗细值为 400、700 和 800。
<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;）可以消除默认边距，确保布局一致性：
/* 重置所有元素的默认边距和内边距 */
* {margin: 0;padding: 0;
}
text-indent: -8px;
text-indent: -8px;是一个用于控制文本缩进的属性声明，它的作用是让文本块（如段落 <p>、标题 <h1>-<h6>等）的首行文本向左缩进 8 像素（负值表示向左缩进）。以下是详细解析：
1. text-indent属性的作用
定义： text-indent用于设置文本块第一行的缩进距离。
单位： 可以是像素（px）、百分比（%）、em 单位（em）等。
正值： 首行向右缩进（默认行为）。
负值： 首行向左缩进（可能使部分文本超出容器左侧边界）。
2. 总结
| 特性 | 说明 |
|---|---|
| 作用 | 控制文本块首行的缩进距离。 |
| 负值效果 | 首行向左缩进，可能超出容器边界。 |
| 常见用途 | 特殊排版（如悬挂缩进）、微调文本位置。 |
| 注意事项 | 需配合 padding-left或 overflow避免溢出。 |
| 响应式建议 | 优先使用相对单位（如 em）。 |
其他 css
body {font-family: "Open Sans", sans-serif; # 字体名称中带有空格的字体必须用 CSS 引号括起来。
}h1 {font-weight: 800; # 字体粗度letter-spacing:0.15px; # 字间距
}
/ *上面选择了所有 div 元素没有 example 的 id。 */
div:not(#example) {color: red;
}