重学前端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;

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

1. text-indent属性的作用​​

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

2. 总结

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

其他 css

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;
}
相关推荐
xiaoyan20151 分钟前
2025最新款Electron38+Vite7+Vue3+ElementPlus电脑端后台系统Exe
前端·vue.js·electron
梅孔立2 分钟前
本地多版本 Node.js 切换指南:解决 Vue nodejs 等项目版本冲突问题
前端·vue.js·node.js
小红4 分钟前
从乱码到清晰:深入理解字符编码的演进(ASCII到UTF-8)
前端
卓码软件测评24 分钟前
K6的CI/CD集成在云原生应用的性能测试应用
前端·功能测试·测试工具·ci/cd·云原生
JordanHaidee44 分钟前
【Rust GUI开发入门】编写一个本地音乐播放器(11. 支持动态明暗主题切换)
前端·ui kit
爱泡脚的鸡腿1 小时前
VUE移动端项目跟练2(简洁易懂)
前端·javascript·vue.js
拜晨1 小时前
用 MCP 把自己的接口接入 AI
前端·node.js
古夕1 小时前
技术复盘文档:解决 `watchEffect` 导致的图片闪烁无限循环问题
前端·javascript·vue.js
拾缘1 小时前
esm和cmj混用报错分析
前端·javascript
古夕1 小时前
技术复盘文档:`resourceLogoUrl` 数据丢失问题分析与最终解决方案
前端·javascript·vue.js