行内表单inline_详解块级元素、行内元素、行内块级元素类型、区别及相互转化...

Bertha 。 2023-01-07 15:30 85阅读 0赞

#### 1)块级元素 ####

##### 特点： #####

1.总是从新的一行开始

2.高度、宽度都是可控的

3.宽度没有设置时，默认为100%

4.块级元素中可以包含块级元素和行内元素

5.块级文字元素中不能放入其他块级元素

6.块级大多为结构性标记

##### 常见块级元素： #####

<center>...center>  地址文字  <h1>...h1>  标题一级  <h2>...h2>  标题二级  <h3>...h3>  标题三级  <h4>...h4>  标题四级  <h5>...h5>  标题五级  <h6>...h6>  标题六级  <hr>  水平分割线  <p>...p>  段落  <pre>...pre>  预格式化  <blockquote>...blockquote>  段落缩进   前后5个字符  <marquee>...marquee>  滚动文本  <ul>...ul>  无序列表  <ol>...ol>  有序列表  <dl>...dl>  定义列表  <table>...table>  表格  <form>...form>  表单  <div>...div>

#### (2)行内元素 ####

##### 特点： #####

1.和其他元素都在一行

2.高度、宽度以及内边距都是不可控的

3.宽高就是内容的高度，依靠自身字体大小和图形支撑结构的，不可以改变

4.行内元素只能行内元素，不能包含块级元素

5.行内元素的paddding可以设置

6.margin只能够设置水平方向的边距，即：margin-left和margin-right，设置margin-top和margin-bottom无效

7.块级大多为结构性标记

##### 常见行内标签: #####

##### 特点： #####

1.和其他元素都在一行

2.高度、宽度以及内边距都是不可控的

3.宽高就是内容的高度，不可以改变

4.行内元素只能行内元素，不能包含块级元素

5.行内大多为描述性标记

<b>...b>  加粗  <strong>...strong>  加粗    <sup>...sup>  上标  <sub>...sub>  下标  <i>...i>  斜体  <em>...em>  斜体  <del>...del>  删除线  <u>...u>  下划线

#### 3)行内块级元素 ####

##### 特点： #####

综合块级元素与行内元素的特性，可设宽高(默认是内容宽高)，也可以设置内外边距

##### 常见行内块级元素： #####

<span>...span>  <a>...a>  <img/>  <textarea>...textarea>  <button>..button>  <input>  <br>  <label>...label>  <select>...select>  <canvas>...canvas>  <progress>...progress>  <cite>...cite>  <code>...code>  <strong>...strong>  <em>...em>  <audio>...audio>    <video>...video>

#### (4)显示模式转换 ####

display:block|inline|inline-block

##### (1)块级转行内、行内块级 #####

将前两行转为行内元素，而将后两行转为行内块级元素：

.inline{
               display: inline;      background: #ccc;    }    .inline-block{
               display: inline-block;      background-color: #ccc;    }    hr{
               height:5px;      background: green;    }

有时间大家可以尝试一下

![6f1d416e8c2741cb59d98e0ca1c2bece.png][]

‍

[6f1d416e8c2741cb59d98e0ca1c2bece.png]: /images/20221119/86ee6252f08d4617b3a30103fa14155b.png