网站建设—前端CSS块状元素和内联元素详解

2023-01-08 分类：网站建设

在css盒子模型中，我们提到了html元素中的块元素和内联元素。那么它们究竟是什么呢？

块元素一般是其他元素的容器元素，能容纳其他块元素或内联元素。常见的就是P标签及DIV标签。块元素就好比一个四方块，可以放其他的四方块，并可以呈现在页面上任何地方。

我们用div标签举个例子，给div标签设置一个"宽高各200px 背景颜色红色“的样式，得到一个宽高各200px的方块，如下图：

试着再添加一个div标签，加入margin-bottom下边距，区分他们的位置，接下来把宽度去掉，可以看到宽度变宽了，从浏览器的左边到右边，现在有两个红色块逐行显示仿佛表现的很霸道，如下图：

由此得知块元素的特性：

1.在没有设置宽度的情况下默认撑满一行

2. 默认块元素不在一行

3.支持所有CSS命令

内联元素也叫内嵌元素或行内元素，内联元素只能容纳文本或者其他内联元素，常见内联元素有a和span。

用span标签为例，添加三个span标签，设置”宽高200px 背景颜色红色 margin10px“样式，发现并没有按200*200去展示，margin标签对上下并没有改变，对比块元素由此得知：

内联元素的特性：

1.宽高由内容撑开

2.不支持宽高

3.一行上可以继续显示跟同类的标签

4.不支持margin的上下特性

5.代码换行被解析

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有网站建设等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容