常见的块级元素及块级元素的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
内联元素的特点
常见的可以元素
img
input
. 可变元素的特点
不自动换行
能够识别宽高
排列方式为从左到右
即有了内联元素的特点（不会换行），也有块级元素的特点（可以设置宽高等）
可变元素的display:inline-block
可变元素即具有内联元素特点，也具有块状元素特点
注意：display:inline-block; float:left/right; position: absolute/fixed;可以将元素设置为内联块级元素
| 值 | 描述 |
|---|---|
| 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
如对本文有疑问， 点击进行留言回复！！
网友评论