CSS系列 (02):标签显示模式-display
2020-12-23 22:56
936 查看
块级元素(block)
常见的块元素有
<h1>~<h6>、
<p>、
<div>、
<ul>、
<ol>、
<li>等,其中
<div>标签是最典型的块元素
块级元素的特点:
(1)总是从新行开始
(2)高度,行高、外边距以及内边距都可以控制
(3)宽度默认是容器的100%
行内元素(inline)
常见的行内元素有
<a>、
<strong>、
<b>、
<em>、
<i>、
<del>、
<s>、
<ins>、
<u>、
<span>等,其中
<span>标签最典型的行内元素。
行内元素的特点:
(1)和相邻行内元素在一行上,但是之间会有空白缝隙
(2)高、宽无效,仅外边距【水平方向】以及内边距【水平方向】可以正常控制
(3)宽度默认就是它本身内容的宽度
注意:
如果元素为行内元素,其垂直方向的内边距也会生效,只是该元素会脱离标准流,并不占据文档流,还会将其他元素覆盖,强烈不建议使用
<div class="el-block">111</div> <div class="el-inline">222</div> <div class="el-block">333</div> .el-inline{ background-color: antiquewhite; padding: 10px 50px; display: inline; } .el-block{ height: 20px; background-color: #f00; border: 1px solid #000; }
行内块元素(inline-block)
在行内元素中有几个特殊的标签:
<img />、
<input />、
<td>,可以对它们设置宽高和对齐属性,它们被称为行内块元素。
行内块元素的特点:
(1)和相邻行内元素(行内块)在一行上,但是之间会有空白缝隙
(2)高度,宽度、外边距以及内边距都可以控制
(3)宽度默认就是它本身内容的宽度
相关文章推荐
- CSS_标签显示模式(display)
- CSS总结——标签显示模式display
- CSS的标签模式设置Display属性
- 标签显示模式(display)
- CSS笔记整理2 -- div与span 和 标签的显示模式
- css的显示模式display记录笔记
- CSS--display属性修改标签的显示类型
- css结构(位置)选择器,注释,外观属性,引入样式表,标签显示模式,css的复合选择器,后代选择器,子元素选择器
- 【5】CSS知识点:24.div标签和span标签 25.CSS元素的显示模式 26.css元素显示模式转换 27.设置背景
- HTML之标签显示模式转换 display
- CSS_04_标签显示模式
- JavaScript设计模式系列02_工厂模式做的创建HTML标签
- CSS显示模式(display)
- 前端学习记录7-CSS(标签显示模式,背景属性样式)
- 标签显示模式(display)
- CSS的标签模式设置Display属性
- CSS Display(显示) and Visibility(可见性)
- css显示模式
- HTML5 新元素标签系列:HTML5 页面中用的重设样式表(CSS)
- HTML标签分类:按照标签的显示模式分类