- 块状元素
- 行内元素
- 行内快元素
元素特点:
块状元素:
- 在页面中以矩形区域显示。
- 自上而下排列,独占一行
- 可以直接添加宽高
- 一般情况下,作为其他元素或内容的容器
行内元素:
- 在页面中最小单位也是矩形。
- 在一行内逐个排列。
- 不可以直接添加宽高,大小是由内容撑开的。
- 内联元素也符合盒模型的规则,但是个别属性会出现问题(padding-top/bottom margin-top/bottom)
- 内联元素在一行内排列的时候,之间有间距
行内快元素:
- 可以设置宽高。
- 默认情况下,在一行内逐个显示,之间有间距。
- 当前元素的display值为inline-block时,能支持vertical-align属性。
常用元素:
块状元素:
- div:最常用的块级元素
- dl:和dt-dd搭配使用的块级元素
- form:交互表单
- h1 -h6:标题
- hr:水平分隔线
- ol:有序列表
- p:段落
- ul:无序列表
- li:列表标签
- fieldset:表单字段集
- colgroup-co:表单列分组元素
- table-tr-td:表格及行-单元格
行内元素:
- a:超链接(锚点)
- b:粗体
- br:换行
- i:斜体
- em:强调
- img:图片
- input:输入框
- label:表单标签
- span:常用内联容器,定义文本内区块
- strong:粗体强调
- sub:下标
- sup:上标
- textarea:多行文本输入框
- u:下划线
- select:项目选择
行内块元素:
- input:表单标签
- img:图片标签
元素类型转换:
display属性:
作用:检索或者设置元素生成的盒模型类型。
常用属性值:
- display:block;
作用:将元素转成块状元素,拥有块状元素特点。
补充:大部分块状元素,默认的display的值都是block;
- display:inline;
作用:将元素转成内联元素,拥有内联元素的特点。
补充:大部分内联元素,默认的display的值inline;
- display:none;
作用:将当前隐藏,并不占据空间。