CSS元素分类

╰+攻爆jí腚メ 2023-01-08 08:24 133阅读 0赞

*  块状元素
 *  行内元素
 *  行内快元素

#### 元素特点： ####

**块状元素**：

*  在页面中以矩形区域显示。
 *  自上而下排列，独占一行
 *  可以直接添加宽高
 *  一般情况下，作为其他元素或内容的容器

**行内元素**：

*  在页面中最小单位也是矩形。
 *  在一行内逐个排列。
 *  不可以直接添加宽高，大小是由内容撑开的。
 *  内联元素也符合盒模型的规则，但是个别属性会出现问题（padding-top/bottom margin-top/bottom）
 *  内联元素在一行内排列的时候，之间有间距

**行内快元素**：

*  可以设置宽高。
 *  默认情况下，在一行内逐个显示，之间有间距。
 *  当前元素的display值为inline-block时，能支持vertical-align属性。

#### 常用元素： ####

**块状元素：**

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

**行内元素：**

<table> 
 <thead> 
  <tr> 
   <th>标签</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>a</td> 
   <td>超链接（锚点）</td> 
  </tr> 
  <tr> 
   <td>b</td> 
   <td>粗体</td> 
  </tr> 
  <tr> 
   <td>br</td> 
   <td>换行</td> 
  </tr> 
  <tr> 
   <td>i</td> 
   <td>斜体</td> 
  </tr> 
  <tr> 
   <td>em</td> 
   <td>强调</td> 
  </tr> 
  <tr> 
   <td>img</td> 
   <td>图片</td> 
  </tr> 
  <tr> 
   <td>input</td> 
   <td>输入框</td> 
  </tr> 
  <tr> 
   <td>label</td> 
   <td>表单标签</td> 
  </tr> 
  <tr> 
   <td>span</td> 
   <td>常用内联容器，定义文本内区块</td> 
  </tr> 
  <tr> 
   <td>strong</td> 
   <td>粗体强调</td> 
  </tr> 
  <tr> 
   <td>sub</td> 
   <td>下标</td> 
  </tr> 
  <tr> 
   <td>sup</td> 
   <td>上标</td> 
  </tr> 
  <tr> 
   <td>textarea</td> 
   <td>多行文本输入框</td> 
  </tr> 
  <tr> 
   <td>u</td> 
   <td>下划线</td> 
  </tr> 
  <tr> 
   <td>select</td> 
   <td>项目选择</td> 
  </tr> 
 </tbody> 
</table>

行内块元素：

<table> 
 <thead> 
  <tr> 
   <th>标签</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>input</td> 
   <td>表单标签</td> 
  </tr> 
  <tr> 
   <td>img</td> 
   <td>图片标签</td> 
  </tr> 
 </tbody> 
</table>

#### 元素类型转换： ####

**display属性**：  
作用：检索或者设置元素生成的盒模型类型。

**常用属性值**：

*  display:block;  
    作用：将元素转成块状元素，拥有块状元素特点。  
    补充：大部分块状元素，默认的display的值都是block;
 *  display:inline;  
    作用：将元素转成内联元素，拥有内联元素的特点。  
    补充：大部分内联元素，默认的display的值inline;
 *  display:none;  
    作用：将当前隐藏，并不占据空间。