HTML+CSS要点4：标签类型划分以及居中的方法
其他
2020-02-19 12:19:01
阅读次数: 0
标签特性：
- 块标签：
1.独自占有一行
2.支持所有样式的设置
3.不设置宽度，默认撑满父级
- 内联标签：
1.一行可以显示多个
2.不支持宽高的设置，宽高由内容撑开
3.代码换行会解析空格
4.上下margin、上下padding、上下border会受到影响
- 内联块标签：inline-block
1.一行可以显示多个
2.支持宽高的设置
3.代码换行会解析空格
4.需要设置对齐方式为顶部 vertical-align:top
- list-item （列表项，在块的基础上多了列表样式）
- reset文件
在实际工作中，经常会有一个文件来专门处理默认样式，一般叫做reset
可以通过外部引入的方式，这样不需要重复写。
水平居中
- text-align: center
- margin: 0 auto;
- 通过计算方式居中
因为50%是按照盒子的最左边居中，所以还需要减去盒子的一半宽度
padding: 0 calc(50% - 500px)
垂直居中
- 第一种方式：
vertical-align: top;
vertical-align: middle;
vertical-align: bottom;
vertical-align: baseline; (默认情况下是这个，基于基线对齐)
居中对齐的时候，根据页面中，最高的元素的中心点作为中线，进行对齐
- 第二种方式：
display: table-cell; 转换为单元格
在单元格中，给父级设置vertical-align，内容会根据设置进行垂直排列
- 第三种
行高line-height 设置与盒子高度等高
再设置中线对齐，这个居中方法不是绝对的
发布了90 篇原创文章 ·
获赞 4 ·
访问量 1422
转载自blog.csdn.net/weixin_44145258/article/details/104167216
