重学前端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;
}
相关推荐
文心快码BaiduComate44 分钟前
文心快码3.5S实测插件开发,Architect模式令人惊艳
前端·后端·架构
Kimser1 小时前
基于 VxeTable 的高级表格选择组件
前端·vue.js
摸着石头过河的石头1 小时前
JavaScript 防抖与节流:提升应用性能的两大利器
前端·javascript
酸菜土狗1 小时前
让 ECharts 图表跟随容器自动放大缩小
前端
_大学牲1 小时前
FuncAvatar: 你的头像氛围感神器 🤥🤥🤥
前端·javascript·程序员
葡萄城技术团队1 小时前
SpreadJS 性能飙升秘籍:底层优化技术深度拆解
前端
brzhang1 小时前
我且问你,如果有人用 AI 抄你的产品,爱卿又当如何应对?
前端·后端·架构
533_2 小时前
[element-ui] el-tree 组件鼠标双击事件
前端·javascript·vue.js
KIKIiiiiiiii2 小时前
微信个人号开发中如何高效实现API二次开发
java·前端·python·微信
日月之行_2 小时前
Vite+:企业级前端构建的新选择
前端