广州北大青鸟计算机职业培训学校
互联网技术培训、软件技术培训、大数据培训、云计算培训、数据分析培训信息网
当前位置:网站首页 > 软件专业 > 前端开发专业 > 正文

网页布局中的块元素

作者:admin01发布时间:2021-06-30分类:前端开发专业浏览:896


导读:为了更好的了解块元素,我们首先要知道在浏览器的网页布局过程当中,为什么要使用块元素这个概念,以及在什么时候使用块元素。统一特征的盒子模型我们知道一个网页,它是有很多的标签按照一定的...

为了更好的了解块元素,我们首先要知道在浏览器的网页布局过程当中,为什么要使用块元素这个概念,以及在什么时候使用块元素。

统一特征的盒子模型

我们知道一个网页,它是有很多的标签按照一定的规则元素堆叠排放而成的。浏览器在解析标签的时候。会将每个标签解析成一个盒子模型。也就是说他把一个标签,分为了三个部分去解析并渲染。这三个部分,分别是内容区(content),内填充区(padding),边框区(border),外边距区(margin)。盒模型可以说是让我们整个页面布局中的每个元素都处于一种极其可控的状态,你可以利用这种机制,通过灵活控制元素内部的尺寸关系以及元素之间的距离关系,实现各种类型的网页布局需求。


元素基于盒模型的二次分类

在这个基于盒模型的元素堆叠过程当中,其堆叠的方向又分为两种情况:一种是纵向罗列,另一种是横向并列。为了能够使我们在不同情况下以合理便捷的方式去实现这两种情况的布局问题。浏览器在渲染标签的时候,在统一盒模型特征的基础之上,又按照整体需求对所有标签执行了进一步的分类:块元素、行内元素、行内块状元素。这三种分类的元素,就像是拥有三种不同性格的族群一样,将他们在不加任何额外css样式控制的条件下,都放在布局结构中的时候,他们会呈现出不同的布局结果。

各类型标签之间的灵活转换

在我们实际布局的过程当中,我们不可能有无限多个块元素、行内元素、行内块元素供我们选择使用。就算是有,我们也将需要花费很高的时间成本去掌握。为了我们能够更加灵活第使用各个标签元素。CSS提供了display的属性控制,让我们已有的各种类型的标签相互之间进行灵活的转换。


前端开发专业排行
标签列表
网站分类
文章归档
最近发表