一、元素分类
首先要知道元素分三种:内联元素(行内元素)、块级元素、内联块级元素。
1、内联(行内)元素
- 可与其他元素占一行
- 高、行高、内外边距不可更改
- 宽度为内容所占宽度,不可更改
- 容纳文本或其他行内元素
2、块级元素
- 独占一行
- 高、行高、内外边距可更改
- 不设置宽度的话宽度默认为容器的100%
- 可容纳行内元素和块级元素
3、内联块级元素
- 可与其他元素在一行
- 高、宽、行高以及上下边距可更改
常见内联(行内)元素:
- a - 锚点
- b - 粗体
- br - 换行
- cite - 引用
- code - 计算机代码
- em - 强调
- i - 斜体
- img - 图片
- input - 输入框
- label - 表格标签
- span - 常用内联容器,定义文本内区块
- strike - 中划线
- strong - 粗体强调
- sub - 下标
- sup - 上标
- textarea - 多行文本输入框
常见块级元素:
- address - 联系方式
- audio - 音频
- vedio - 视频
- article - 文章
- blockquote - 块引用
- div - 文档分区
- form - 表单
- section - 页面区段
- h1 - 大标题
- h2 - 副标题
- h3 - 3级标题
- h4 - 4级标题
- h5 - 5级标题
- h6 - 6级标题
- hr - 水平分隔线
- header - 页头
- menu - 菜单列表
- ol - 排序列表
- ul - 非排序列表
- p - 段落
- table - 表格
常见的内联块级元素有:
- img - 图片
- input - 输入
比如:
img{display: inline-block;}
二、水平居中
1、内联元素水平居中
(1)父级为块级元素的内联元素使用text-align: center
p{ background-color: cyan; text-align: center;}
我是内联文本
可以看到块级元素p是默认宽度是整个容器的100%,并且其容纳的文本是内联元素,使用text-align: center让其水平居中。
text-align: center仅对内联元素有效,包括内联块级元素。比如对inline, inline-block, inline-table, inline-flex的元素同样有效,因为inline-block值将内部div显示为嵌入式元素和块,因此外部div中的属性text-align将内部div居中。
2、块级元素水平居中
(1)单个块使用margin: 0 auto
有时需要居中的不是文本,而是整个块。我们希望左右边距相等,方法是将边距设置为“auto”。
这通常用于固定宽度的块,如果块本身是灵活的,它将占用所有宽度,当然,居中效果可能就不明显了,因为它占了整个宽度。
无论正在居中的块级别元素或父元素的宽度是多少,这都是有效的。
.block { width: 200px; margin: 0 auto; background-color: aquamarine;}
我是一个块,设宽度可见居中效果,不设宽度占满整个可用宽度
web前端开发学习Q-q-u-n:784783012 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频,PDF)
(2)父级为块级元素的块级元素水平居中
1)使用table布局加左右边距自适应
因为块级元素设为表格布局之后,将块级变为了内部单元格
.child-3 { display: table; margin: 0 auto;}
块级元素(display:table) + (margin:0 auto)
2)多个块级元素在一行居中
当想让多个块级元素在一行内居中时,有两种办法:
第一种:将块级元素变为内联块级元素:display: inline-block
当把多个块级元素变为内联块级元素时,就可以使用内联元素居中的