首页 > 其他分享 >CSS - 块元素,行内元素,行内块元素与显示模式的转换

CSS - 块元素,行内元素,行内块元素与显示模式的转换

时间:2023-01-04 17:14:40浏览次数:59  
标签:行内 转换 元素 默认 宽度 display CSS

1.块元素

div,p,h1,ol,ul,dl,tabel,form

块元素的特点:

1.独占一行

2.宽度 高度 内外边距 都可以控制

3.宽度默认是容器(父级容器)的100%

4.里面可以放 块元素,行内元素,行内块元素

5.特殊的 p标签与h1~h6标签 只能放文字

 

2.行内元素

span,a,strong,em,del,ins,i

行内元素的特点:

1.一行可以显示多个

2.宽高直接设置是无效的

3.默认宽度就是本身内容的宽度

4.只能容纳文本或其它行内元素

 

3.行内块元素

img,input,td

行内块元素的特点:

1.一行可以显示多个,但是它们之间会有空白缝隙

2.默认宽度就是本身内容的宽度

3.宽度 高度 内外边距 都可以控制

 

4.显示模式的转换

/*转换为块元素*/
display: block;

/*转换为行内元素*/
display: inline;

/*转换为行内块元素*/
display: inline-block;

 

标签:行内,转换,元素,默认,宽度,display,CSS
From: https://www.cnblogs.com/ErenYeager/p/17025406.html

相关文章