行内元素，块状元素

最新推荐文章于 2022-07-28 16:16:27 发布

riledog

最新推荐文章于 2022-07-28 16:16:27 发布

阅读量387

点赞数

分类专栏： CSS

CSS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

块级元素：div , p , form, ul, li , ol, dl, form, address, fieldset, hr, menu, table

行内元素：span, strong, em, br, img , input, label, select, textarea, cite,

区别：

1）块级元素会独占一行，其宽度自动填满其父元素宽度

行内元素不会独占一行，相邻的行内元素会排列在同一行里，知道一行排不下，才会换行，其宽度随元素的内容而变化

2）块级元素可以设置 width, height属性，行内元素设置width, height无效

【注意：块级元素即使设置了宽度，仍然是独占一行的】

3) 块级元素可以设置margin 和 padding. 行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果，但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。（水平方向有效，竖直方向无效）

*注意内联元素和替换元素的区别

例子：

<!DOCTYPE html>
<html>
<head>
<span style="white-space:pre">	</span><title></title>
<span style="white-space:pre">	</span><style type="">
 a{
 <span style="white-space:pre">	</span>height: 200px ; //无效
 <span style="white-space:pre">	</span>width: 200px;   //无效
 <span style="white-space:pre">	</span>margin-top: 100px; //无效
 <span style="white-space:pre">	</span>margin-left: 100px; //有效
 <span style="white-space:pre">	</span>background: green;
 }


<span style="white-space:pre">	</span></style>
</head>
<body>
<a href="#">hahahahaha</a>
</body>
</html>

riledog

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
行内元素，块状元素

块级元素：div , p , form, ul, li , ol, dl, form, address, fieldset, hr, menu, table行内元素：span, strong, em, br, img , input, label, select, textarea, cite, 区别： 1）块
复制链接

扫一扫