0
点赞
收藏
分享

微信扫一扫

[初级]5个你必须知道的页面布局知识

本文尽量以简洁通俗的语言阐述页面布局的5个知识点,不细数每个知识的所有细节,旨在让大家理解其核心要点。

块级元素、行内元素、行内块级元素

在我们使用html标签的时候,我们会发现,有的元素单独占了一行(比如div),而有的元素则并排在一行(比如span),知道块级元素与行内元素的概念,能帮助我们更快地进行页面布局。

一、行内元素(css属性值为:display: inline)

  • 并排依次展示

  • 不能设置宽高,默认的宽度就是文字的宽度
    二、块级元素(css属性值为:display: block)

  • 单独一行展示

  • 可以设置宽高,宽度默认变为父级的100%
    三、行内块级元素(css属性值为display: inline-block)

  • 并排依次展示

  • 可以设置宽高,默认宽度为文字的宽度
    总结下来就是:

  • 1.行内元素与行内块级元素都是并排展示的,但是行内块级元素能够设置宽高

  • 2.块级元素只能单独一行展示

  • 3.可以设置元素的css属性值为display:xxx,让其变为行内/块级/行内块级元素

css盒模型

掌握css盒模型,能让我们更好地控制元素的大小,一个元素内到外由4个部分合并组成。

  • 一、content(上图的content edge,通过设置width和height可以控制此部分的大小)

  • 二、padding(上图的padding edge,通过设置padding: 5px 可以控制此部分宽度为5px)

  • 三、border(上图的border edge,border: 1px solid #eee 可以控制边线宽度为1px、为实线、颜色为#eee)

  • 四、margin(上图的margin edge,通过设置margin: 5px 可以控制此部分宽度为5px)

css盒模型有2个实际应用场景:

  • 1.box-sizing: content-box和box-sizing: border-box。现在的浏览器一般默认为box-sizing: content-box,在此模式下,对元素设置的width和height仅包含content区域;如果设置该元素css为box-sizing: border-box,则设置的width和height包含content、padding、border 这三个部分。

  • 2.background-color设置的颜色会包含content与padding部分

脱离文档流

我们常常会看到“脱离文档流”相关的字眼,什么是文档流呢,英文原词为Normal flow,其实也可以理解为正常的布局。

传统的HTML文档按照从左至右,从上而下的规则进行排列,这是默认的布局方式;而脱离文档流则是不按照正常的排列方式,不受正常元素排列的影响。绝对定位(position:absolute)、固定定位(position:fixed)、浮动(float:xxx)这三种css属性的元素会脱离文档流。

BFC

BFC 即 Block Formatting Contexts (块级格式化上下文),属于正常的文档流,BFC是一个独立的布局环境,其中的元素布局是不受外界的影响,并且在一个BFC中,块盒与行盒(行盒由一行中所有的内联元素所组成)都会垂直的沿着其父元素的边框排列。

要理解BFC的规则,需要在实际应用中回顾相关要点,当碰到以下应用时,尝试去回忆BFC的一些知识点,主要应用包括清除浮动、解决margin重合、float相关布局等。

以下条件会生成一个新的BFC容器

  • 浮动元素:float 除 none 以外的值

  • 绝对定位元素:position (absolute、fixed)

  • display 为 inline-block、table-cells、flex

  • overflow 除了 visible 以外的值

单位

页面上常用的单位有这几种:rem、em、px、vw、vh

  • 1.rem:以html元素的font-size为基准
  • 2.em:继承父字体的大小(使用较少)
  • 3.px:像素
  • 4.vw:将屏幕可视区域宽度分为100份,1vw为其中一份
  • 5.vh:将屏幕可视区域高度分为100份,1vh为其中一份
    在移动端,由于屏幕长宽不同,可以多使用vw、vh单位。

在开发项目时,通常会使用postcss插件(比如postcss-px-to-viewport)来对单位统一进行转换。

举报

相关推荐

0 条评论