html5 块级元素默认宽度是多少 html的块级元素

转载

编程小达人之心 2023-07-12 15:37:53

html标签它分为块级元素和内联元素（也可以叫做行内元素），如下：

常见块级元素有：html、body、div、header、footer、nav、section、aside、article、p、hr、h1~h6、ul、ol、dl、form、table、tbody、thead、tfoot、tr等；
常见行内元素有：span、a、img、textarea、button、input、br、label、select、canvas、progress、cite、code、strong、em、audio、video等

块级元素：块级元素是指本身属性为display:block;的元素。
独占一行，每一个块级元素都会从新的一行重新开始，从上到下排布
可以直接控制宽度、高度以及盒子模型的相关css属性
在不设置宽度的情况下，块级元素的宽度是它父级元素内容的宽度
在不设置高度的情况下，块级元素的高度是它本身内容的高度
内联元素：内联元素是指本身属性为display:inline;的元素
和其他内联元素从左到右在一行显示
不能直接控制宽度、高度以及盒子模型的相关css属性，但是直接设置内外边距的左右值是可以的
内联元素的宽高是由本身内容的大小决定（文字、图片等）
内联元素只能容纳文本或者其他内联元素（此处请注意，不要在内联元素中嵌套块级元素）
注意：内联元素设置宽高无效（但是行内置换元素可以设置宽高，下面有详细解释）、设置margin上下无效，设置padding上下类似无效（不影响文档流排列)

测试

<div style="border:1px solid red;width:200px;">设置块级元素的宽，依旧会自动换行，因为它要独占一行</div>
<span style="border:1px solid green;width:200px;height:25px;">行内元素设置宽高无效</span>
<span style="border:1px solid blue;margin:20px;">行内元素设置上下的margin无效</span>
<span style="border:1px solid black;padding:20px;">行内元素设置上下的padding也无效</span><br>
<div>块状元素多行多行文字，块状元素多行多行文字，块状元素多行多行文字，块状元素多行多行文字，块状元素多行多行文字，块状元素多行多行文字</div>

html5 块级元素默认宽度是多少 html的块级元素_行内元素

当我们使用内边距时，只有左右方向有效；当我们设置四个方向的内边距时，对于该行内元素，确实显示出效果，但是竖直方向的内边距只有效果，对其他元素无任何影响。
因此，行内元素的padding-top，padding-bottom和margin-top,margin-bottom是真的是无效；不过要注意一点，对于竖直方向的内边距该行内元素的内容范围是增大了，不过只是表象，对周围元素无任何影响。(由图中也可看出)

可替换元素和不可替换元素的分类

替换元素：替换元素根据其标签和属性来决定元素的具体显示内容，<img><input><textarea><select><object>等。替换一般有内在尺寸如img默认的src属性引用的图片的宽高，表单元素如input也有默认的尺寸。img和input的宽高可以设定。
不可替换元素：即将内容直接表现给用户端。
注意：几乎大部分的替换元素都是行内元素，所以说如input、img、textarea是行内元素但是是可以设置宽高的说法。
img属于行内替换元素。height/width/padding/margin均可用。效果等于块元素。