每天一个前端小知识（1）——元素类型

元素分类

根据 css 显示分类，HTML元素被分为三种类型:块状元素，内联元素，可变元素

块状元素

特征

1. 标签独占一行，相邻的块状元素不会并列显示。

2. 在网页中以块的形式显示，即展现为矩形区域

3. 可以定义高度和宽度

   • 默认宽度为auto，即父元素的宽度-自身的border-自身的margin
   • 如果宽度为100%，则应该时content的宽度等于父元素的宽度，元素宽度需要在此基础上加上自身的border。

4. 一般作为其他元素的容器，可以容纳其他内联元素和块状元素

常见标签

div -最常用的块级元素
dl - 和 dt/dd 搭配使用的块级元素
form - 交互表单
h1-h6 - 大标题
hr - 水平分隔线
ol – 有序列表
p - 段落
ul - 无序列表
li
fieldset - 表单字段集
colgroup-col - 表单列分组元素
table-tr-td  表格及行-单元格

内联元素

特征

1. 内联元素的表现形式为行内逐个进行显示，自左向右，不会换行

2. 内联元素没有自己的形状，也就是不能定义宽高，宽高取决于做包含的内容的高度和宽度，最小内容单元也会呈现矩形形状。

3. 内联元素遵循盒模型的基本规则，可以定义padding，border，margin，background等属性，但个别属性不能正确显示padding-top，margin-top

4. 内联元素在一行内排列显示的时候，元素之间会有些许的间距

   • 在HTML代码中，内联元素之间不换行可以消除间距

     <span>A</span><span>B</span>
     

     <span>A</span>
     <span>B</span>
     

   • 添加浮动float

可变元素

需要根据上下文关系确定该元素是块元素或者内联元素。