元素分类，块级元素，内联元素，行内块元素，displaby 属性
程序员文章站
2022-06-21 23:34:05
元素分类元素可以分为3类，块级元素，内联元素（行内元素），行内块元素 。块元素常见的块级元素及块级元素的displaby 属性：元素display说明1htmlblock2bodyblockmargin:8px(默认)3hrblock换行4pblock段落5divblock6h1-6block标题7ulblock无序列表8olblock有序列表9lilist-item...
元素分类
- 元素可以分为3类，块级元素，内联元素（行内元素），行内块元素 。
块元素
-
常见的块级元素及块级元素的displaby 属性：
元素 display 说明 1 html block html骨架 2 body block margin:8px(默认) 3 hr block 换行 4 p block 段落 5 div block div 盒子 6 h1-6 block 标题 7 ul block 无序列表 8 ol block 有序列表 9 li list-item 列表项 10 dl block 自定义列表 11 dt block 自定义列表项 12 dd block 自定义列表项 13 table table 表格 14 tbody table-row-group 可以不写，浏览器自动生成 15 caption table-caption 表格标题 16 th table-cell 表头 17 tr table-row 表格行 18 td table-cell 表格单元 19 form block form 表单 注意：table 里面的标签小毅也是不知道是哪类元素
块级元素简单的案例
<style>
table {
width: 500px;
border: 1px solid red;
}
td {
border: 1px solid blue;
}
</style>
<body>
<!-- 分割线 -->
<hr>
<!-- div 盒子 -->
<div>
这是一个div
</div>
<!-- 标题 -->
<h1>常见的块级元素</h1>
<h2>常见的块级元素</h2>
<h3>常见的块级元素</h3>
<h4>常见的块级元素</h4>
<h5>常见的块级元素</h5>
<h6>常见的块级元素</h6>
<!-- 段落 -->
<p>常见的块级元素</p>
<!-- 无序列表 -->
<ul>
<li>常见的块级元素</li>
<li>常见的块级元素</li>
<li>常见的块级元素</li>
</ul>
<!-- 有序列表 -->
<ol>
<li>水果</li>
<li>蔬菜</li>
<li>肉类</li>
</ol>
<!-- 自定义列表 -->
<dl>
<dt>广东省</dt>
<dd>广州</dd>
<dd>佛山</dd>
<dd>深圳</dd>
<dt>广西省</dt>
<dd>南宁市</dd>
<dd>桂林市</dd>
<dd>北海市</dd>
</dl>
<!-- 表格 -->
<table>
<caption>这是一个表格</caption>
<th>name</th>
<th>age</th>
<th>city</th>
<tr>
<td>小毅</td>
<td>20</td>
<td>北京</td>
</tr>
<tr>
<td>小强</td>
<td>18</td>
<td>上海</td>
</tr>
<tr>
<td>小杰</td>
<td>19</td>
<td>客村</td>
</tr>
</table>
<!-- form 表单 -->
<form action="#" method="get">
用户名：<input type="text"><br>
密码：<input type="password"><br>
<input type="submit" value="登录">
</form>
</body>
块级元素的特点：
-
块状元素独占一行，自上而下排列
-
块状元素可以作为一个容器包含其他的块状元素或内联元素
<div class="father"> <div class="son"></div> </div> -
块状元素可以定义自己的宽度和高度，以及盒模型中的margin,padding,border
-
宽度缺省是它的容器的100%除非设定一个宽度，高度默认是 0px所以填入内容撑开或者设置高度,
//在html中放两个div <div class= "a">填入内容撑开盒子</div>//宽度是100%， <div class = "b"></div> // 在style中设置样式 <style> .a{ background-color: blue; } .b{ background-color:brown; height:200px;//高度 width: 200px;// 宽度 margin:10px; // 外边距 padding: 10px; // 内边距 border:2px solid black; // 边框的大小： 2px 样式： 实线 颜色： 黑色 } </style>
内联元素（行内元素）
-
常见的内联元素
<font>文本标签</font> <strong>加粗</strong> <b>加粗</b> <em>倾斜</em> <i>倾斜</i> <del>删除线</del> <s>删除线</s> <ins>下划线</ins> <u>下划线</u> <br/> 换行标签 <sub>下标文本</sub> <sup>上标文本</sup> <span>盒子</span> -
内联元素的display属性：都是:inline
-
内联元素的特点
- 内联元素在一行逐个进行显示，不会自动换行，可以多个内联元素在同一行
- 设置宽高无效，不能直接设置内联元素的宽度和高度
- 内联元素设置左右填充和外间距是可以的
- 但是内联元素设置与高度相关的一些属性（如margin-top,margin-bottom,padding-top,padding-bottom,line-height），显示无效或显示不准确
- 对左右的margin 和padding 设置有效，但是对上下的margin和padding值设置无效
可变元素
-
常见的可以元素
img input -
. 可变元素的特点
-
不自动换行
-
能够识别宽高
-
排列方式为从左到右
-
即有了内联元素的特点（不会换行），也有块级元素的特点（可以设置宽高等）
-
-
可变元素的display:inline-block
- img ==> inline (虽然是inline，但是可以设置宽高，也可以多个img 在同一行显示)
- input == > inline-block （可以多个input 在同一行显示，也可以设置宽高）
-
可变元素即具有内联元素特点，也具有块状元素特点
-
注意：display:inline-block; float:left/right; position: absolute/fixed;可以将元素设置为内联块级元素
display的几个常见的属性
| 值 | 描述 |
|---|---|
| none | 将元素的显示隐藏，在网页中也不占位置 |
| hidden | 将元素隐藏，但是位置还是站着 |
| block | 此元素将显示为块级元素，此元素前后会带有换行符。 |
| inline | 此元素会被显示为内联元素，元素前后没有换行符。 |
| inline-block | 行内块元素。（CSS2.1 新增的值） |
| list-item | 此元素会作为列表显示。 |
| run-in | 此元素会根据上下文作为块级元素或内联元素显示。 |
| table | 此元素会作为块级表格来显示（类似 ），表格前后带有换行符。 |
| inline-table | 此元素会作为内联表格来显示（类似 ），表格前后没有换行符。 |
| table-row-group | 此元素会作为一个或多个行的分组来显示 类似 |
| table-header-group | 此元素会作为一个或多个行的分组来显示 类似 |
| table-footer-group | 此元素会作为一个或多个行的分组来显示 类似 |
| table-row | 此元素会作为一个表格行显示 类似 |
| table-column-group | 此元素会作为一个或多个列的分组来显示类似 |
| table-column | 此元素会作为一个单元格列显示 类似 |
| table-cell | 此元素会作为一个表格单元格显示 类似 td th |
| table-caption | 此元素会作为一个表格标题显示 类似 |
| inherit | 规定应该从父元素继承 display 属性的值。 |
本文地址：https://blog.csdn.net/XiaoYige_97/article/details/107577278
上一篇： ES6小结（未完待续···）
下一篇： 前端学习笔记（7）之页面构建的技巧扩充