如有错误请指正,更多内容查看GitHub
一、元素分类
首先要知道元素分三种:内联元素(行内元素)、块级元素、内联块级元素。
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>我是内联文本</p>
可以看到块级元素p
是默认宽度是整个容器的100%,并且其容纳的文本是内联元素,使用text-align: center
让其水平居中。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IkCClnFE-1569565672763)(D:\Desktop\l\1569464163894.png)]
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;
}
<div class="block">我是一个块,设宽度可见居中效果,不设宽度占满整个可用宽度</div>
(2)父级为块级元素的块级元素水平居中
1)使用table
布局加左右边距自适应
因为块级元素设为表格布局之后,将块级变为了内部单元格
.child-3 {
display: table;
margin: 0 auto;
}
<div class="child">块级元素(display:table) + (margin:0 auto)</div>
2)多个块级元素在一行居中
当想让多个块级元素在一行内居中时,有两种办法:
第一种:将块级元素变为内联块级元素:display: inline-block
当把多个块级元素变为内联块级元素时,就可以使用内联元素居中的办法text-align: center;
居中了:
.box {
text-align: center;
background-color: aquamarine;
}
.inline-block {
width: 100px;
height: 50px;
border: 1px #333 solid;
display: inline-block;
}
<div class="box">
<p class="inline-block">块级1</p>
<p class="inline-block">块级2</p>
<p class="inline-block">块级3</p>
</div>
给每个块级元素设置宽高只是为了显示效果。
第二种:使用flex布局
.box {
display: flex;
justify-content: center;
}
.box-child {
width: 100px;
height: 50px;
text-align: center; // 是为了把块级元素中的内联文本居中
border: 1px #333 solid;
}
<div class="box">
<p class="box-chi