你的位置:首页 > 网页设计

[网页设计]CSS 布局说——可能是最全的

 

前言

 

现在,我们被称为前端工程师。然而,早年给我们的称呼却是页面仔。或许是职责越来越大,整体的前端井喷式的发展,使我们只关注了js,而疏远了css和html。

 

其实,我们可能经常在聊组件化,咋地咋地。但是,回过头来思考一下,如果你看到一张设计稿的时候,连布局都不清不楚,谈何组件化呢。所以,我们需要在分清楚组件之前,先来分清楚布局。废话说了这么多,只是想告诉你,布局这个东西真的很重要。本篇内容概括了布局的基础+基本的PC端布局+移动端适配等内容。如果你喜欢我的文章,欢迎评论,欢迎Star~。欢迎关注我的github博客

 

正文

 

或许对于你来说,喜欢js的背后,是看不懂css的深层。入门级的css非常简单,但是,精通它却没有想象的容易。我们本篇聊的是布局。前端开发,从拿到设计稿的那一刻,布局的思考就已经开始了。

 

举个例子,建筑师在设计房屋的时候,需要丈量开发地块的长度,以及每幢房屋相对于其他房屋的位置。

在css布局中,似乎也是这样开始的。我们也会去区分每个元素的尺寸和定位,力争完美的实现整个设计稿。所以,我们的布局应该从定位和尺寸开始聊起

 

定位

 

定位的概念就是它允许你定义一个元素相对于其他正常元素的位置,它应该出现在哪里,这里的其他元素可以是父元素,另一个元素甚至是浏览器窗口本身。还有就是浮动了,其实浮动并不完全算是定位,它的特性非常的神奇,以至于它在布局中被人广泛的应用。我们会在后文中专门提及它的。

 

谈及定位,我们就得从position属性说起。你能准确的说出position的属性值吗?相信你可以完美地说出这么六个属性值:static、relative、absolute、fixed、sticky和inherit。

 

  • static(默认):元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分;行内元素则会创建一个或多个行框,置于其父元素中。

  • relative:元素框相对于之前正常文档流中的位置发生偏移,并且原先的位置仍然被占据。发生偏移的时候,可能会覆盖其他元素。

  • absolute:元素框不再占有文档流位置,并且相对于包含块进行偏移(所谓的包含块就是最近一级外层元素position不为static的元素)

  • fixed:元素框不再占有文档流位置,并且相对于视窗进行定位

  • sticky:(这是css3新增的属性值)粘性定位,官方的介绍比较简单,或许你不能理解。其实,它就相当于relative和fixed混合。最初会被当作是relative,相对于原来的位置进行偏移;一旦超过一定阈值之后,会被当成fixed定位,相对于视口进行定位。demo地址(https://jsbin.com/moxetad/edit?html,css,output)

 

简单地,介绍一下position的属性值的含义后,在来看一下偏移量top、right、bottom、left四个属性。

 

不清楚,当初在初学css的时候,会不会与margin这个属性混淆?其实,它们之间是很容易去辨识地。因为这四个属性值,其实是,定位时的偏移量。偏移量不会对static的元素起到作用。而margin,相对应的是盒子模型的外边距,它会对每个元素框起到作用,使得元素框与其他元素之间产生空白。

 

下面:我们来看一下一些常用定位的偏移

 

  • relative:它的偏移是相对于原先在文档流中的位置,如图:relative relative-offset

 

 

这里设置了top:100px,left:100px。

 

  • absolute:它的偏移量是相对于最近一级position不是static的祖先元素的

  • fixed:它的偏移量是相对于视口的。

 

其实,这里说描述的内容,应该都是需要理解的。这些相对于布局来说是基础的,同时也是非常重要的。需要注意的是,这里的偏移量其实已经涉及到了接下来要说的尺寸。在做自适应布局设计时,往往希望这些偏移量的单位能够使用百分比,或者相对的单位例如rem等。

 

尺寸

 

那之前上面谈到过尺寸的单位——百分比。那么,下面部分我们就围绕着尺寸单位展开。

 

尺寸,我们就应该从单位聊起,对于px这个单位,做网页的应该在熟悉不过了,因此不多做介绍。

 

那么,我们可以来介绍一下下面几个单位:

 

  • 百分比:百分比的参照物是父元素,50%相当于父元素width的50%

  • rem:这个对于复杂的设计图相当有用,它是html的font-size的大小

  • em:它虽然也是一个相对的单位,相对于父元素的font-size,但是,并不常用,主要是计算太麻烦了。

 

单位只是一个来定义元素大小的相应参考。另一个概念,或许可以用房子来打一个比方,在早年每幢房子都会在房子的外围建一层栅栏,使得整一块地区可以看成房子+内部地块+栅栏+外围地块的模型。而在css中,每个元素也会有盒子模型的概念。

 

盒子模型:每个元素,都会形成一个矩形块,主要包括四部分:margin(外边距)+border(边框)+padding(内边距)+content(内容)

 

css中存在两种不同的盒子模型,可以通过box-sizing设置不同的模型。两种盒子模型,主要是width的宽度不同。如图:

 

 

这是标准盒子模型,可以看到width的长度等于content的宽度;而当将box-sizing的属性值设置成border-box时,盒子模型的width=border+padding+content的总和。

 

可以看出,对于不同的模型的宽度是不同的。宽度默认的属性值是auto,这个属性值会使得内部元素的长度自动填充满父元素的width。如图:

 

 

但是,height的属性值也是默认的auto,为什么没有像width一样呢?

 

其实,auto这个属性值表示的是浏览器自动计算。这种自动计算,需要一个基准,一般浏览器都是允许高度滚动的,所以,会导致一个问题——浏览器找不到垂直方向上的基准。

 

同样地道理也会被应用在margin属性上。相信如果考察居中时,水平居中你可能闭着眼睛都能写出来,但是垂直居中却绕着脑袋想。这是因为如果是块级元素水平居中只要将水平方向上的margin设置成auto就可以了。但是,垂直方向上却没有这么简单,因为你设置成auto时,margin为0。这个问题,还是需要仔细思考一下的。

 

到此为止,布局最基本的部分我们已经将去大半,还有就是一块浮动。

 

浮动

 

浮动,这是一个非常有意思的东西,在布局中被广泛的应用。最初,设计浮动时,其实并不是为了布局的,而是为了实现文字环绕的特效,如图:

 

 

但是,浮动并不是仅仅这样而已。何为浮动?浮动应该说是‘自成一派’,类似于ps中的图层一样,浮动的元素会在浮动层上面进行排布,而在原先文档流中的元素位置,会被以某种方式进行删除,但是还是会影响布局。你可能会觉得有疑问,什么叫影响布局?我们可以来举个例子:

 

首先,我们准备两个颜色块,如图:

 

 

之后我们将left的块设置成左浮动,如图:

 

 

可以,发现虽然left块因为左浮动,而使得原先元素在文档流中占有的位置被删除,但是,当right块补上原先的位置时,right块中的字体却被挤出来了。这就是所谓的影响布局。

 

浮动为什么会被使用在布局中呢?因为设置浮动后的元素会形成BFC(使得内部的元素不会被外部所干扰),并且元素的宽度也不再自适应父元素宽度,而是适应自身内容。这样就可以,轻松地实现多栏布局的效果。

 

浮动的内容还需要介绍一块——清除浮动。可以看到,浮动元素,其实对于布局来说,是特别危险的。因为你可能这一块做过浮动,但未做清除,那么造成高度塌陷的问题。就是上面图示的那种情况。

 

清除浮动,最常用的方法有两种:

 

  • overflow: 将父元素的overflow,设置成hidden。

  • after伪类:对子元素的after伪类进行设置。

 

这里只是稍微的提上一嘴。下面我们正式来介绍一下网页的布局,本篇最核心的东西。

 

最初的布局——table

 

最初的时候,网页简单到可能只有文字和链接。这时候,大家最常用的就是table。因为table可以展示出多个块的排布。

 

这种布局现在应该不常用了,因为在形色单一时,使用起来方便。但是,现在的网页变得越来越复杂,适配的问题也是越来越多,这种布局已经不再时候了。

 

主要是div块的出现,可以使得网页进行灵活的排布,使得网页变得繁荣。这时,开发者也开始思索如何去更加清晰地分辨网页的层次。接下来,我们可以看看有哪些比较出名的布局方式。

 

两栏布局

 

是否记得,那些一边主体内容,一边目录的网页,如图:

 

类似于上图的布局,可以定义为两栏布局。

 

两栏布局:一栏定宽,一栏自适应。这样子做的好处是定宽的那一栏可以做广告,自适应的可以作为内容主体。

 

实现的方式:

 

float + margin:

 

<body>

  <div >定宽</div>

  <div >自适应</div>

</body>

 

.left{

  width: 200px;

  height: 600px;

  background: red;

  float: left;

  display: table;

  text-align: center;

  line-height: 600px;

  color: #fff;

}

 

.right{

  margin-left: 210px;

  height: 600px;

  background: yellow;

  text-align: center;

  line-height: 600px;

}

 

如图所示:

 

 

其他的方法:还可以使用position的absolute,可以使用同样的效果

 

三栏布局

 

三栏布局,也是经常会被使用到的一种布局。

 

它的特点:两边定宽,然后中间的width是auto的,可以自适应内容,再加上margin边距,来进行设定。

 

三栏布局可以有4种实现方式,每种实现方式都有各自的优缺点。

 

1.使用左右两栏使用float属性,中间栏使用margin属性进行撑开,注意的是html的结果

 

<div >左栏</div>

<div >右栏</div>

<div >中间栏</div>

 

.left{

  width: 200px;height: 300px; background: yellow; float: left;    

}

.right{

  width: 150px; height: 300px; background: green; float: right;

}

.middle{

  height: 300px; background: red; margin-left: 220px; margin-right: 160px;

}

 

 

缺点是:1. 当宽度小于左右两边宽度之和时,右侧栏会被挤下去;2. html的结构不正确

 

2. 使用position定位实现,即左右两栏使用position进行定位,中间栏使用margin进行定位

 

<div >左栏</div>

<div >中间栏</div>

<div >右栏</div>

 

.left{

    background: yellow;

    width: 200px;

    height: 300px;

    position: absolute;

    top: 0;

    left: 0;

}

.middle{

    height: 300px;

    margin: 0 220px;

    background: red;

}

.right{

    height: 300px;

    width: 200px;

    position: absolute;

    top: 0;

    right: 0;

    background: green;

}

 

 

好处是:html结构正常。

缺点时:当父元素有内外边距时,会导致中间栏的位置出现偏差

 

3. 使用float和BFC配合圣杯布局

 

将middle的宽度设置为100%,然后将其float设置为left,其中的main块设置margin属性,然后左边栏设置float为left,之后设置margin为-100%,右栏也设置为float:left,之后margin-left为自身大小。

 

<div >

    <div >

        <div >中间</div>

    </div>

    <div >

        左栏

    </div>

    <div >

        右栏

    </div>

</div>

 

.wrapper{

    overflow: hidden;  //清除浮动

}

.middle{

    width: 100%;

    float: left;

}

.middle .main{

    margin: 0 220px;

    background: red;

}

.left{

    width: 200px;

    height: 300px;

    float: left;

    background: green;

    margin-left: -100%;

}

.right{

    width: 200px;

    height: 300px;

    float: left;

    background: yellow;

    margin-left: -200px;

}

 

缺点是:1. 结构不正确 2. 多了一层标签

 

4. flex布局

 

<div >

    <div >左栏</div>

    <div >中间</div>

    <div >右栏</div>

</div>

 

.wrapper{

    display: flex;

}

.left{

    width: 200px;

    height: 300px;

    background: green;

}

.middle{

    width: 100%;

    background: red;

    marign: 0 20px;

}

.right{

    width: 200px;

    height: 3000px;

    background: yellow;

}

 

 

除了兼容性,一般没有太大的缺陷

 

三栏布局使用较为广泛,不过也是比较基础的布局方式。对于PC端的网页来说,使用较多,但是移动端,本身宽度的限制,很难做到三栏的方式。因此,移动端盛行的现在,我们应该掌握一些自适应布局技巧和flex等方式。

 

移动端的时代

 

或许,手机占用了人们大部分的时间,对于前端工程师来说,不仅需要会h5和大前端的技术,还需要去适配不同的手机屏幕。PC端称王的时代已经过去,现在要求的网页都是需要能够去适配PC和移动端的。

 

之前,所聊的两栏和三栏布局,一般只能在PC中去使用,在移动端,由于屏幕尺寸有限,很难去做到类似的操作,所以,我们需要来了解新的东西。

 

1. 媒体查询

 

如果你需要一张网页能够在PC和移动端都能按照不同的设计稿显示出来,那么你需要做的就是去设置媒体查询。

 

媒体查询的css标识符是@media,它的媒体类型可以分为:

 

  1. all, 所有媒体

  2. braille 盲文触觉设备

  3. embossed 盲文打印机

  4. print 手持设备

  5. projection 打印预览

  6. screen 彩屏设备

  7. speech ‘听觉’类似的媒体类型

  8. tty 不适用像素的设备

  9. tv 电视

 

代码示例:

 

@media screen {

  p.test {font-family:verdana,sans-serif;font-size:14px;}

}

@media print {

  p.test {font-family:times,serif;font-size:10px;}

}

@media screen,print {

  p.test {font-weight:bold;}

}

/*移动端样式*/

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {

  /* Styles */

}

 

媒体查询的主要原理:它像是给整个css样式设置了断点,通过给定的条件去判断,在不同的条件下,显示不同的样式。例如:手机端的尺寸在750px,而PC端则是大于750px的,我们可以将样式写成:

 

@media screen and (min-width: 750px){

  .media{

    height: 100px;

    background: red;

  }

}

 

@media (max-width: 750px){

  .media{

    height: 200px;

    background: green;

  }

}

 

demo地址(https://jsbin.com/gopezum/edit?html,css,output)

 

效果图:

 

 

flex弹性盒子

 

其实移动端会经常使用到flex布局,因为在简单的页面适配方面,flex可以起到很好的拉伸的效果。我们先看几张图体会一下:

 

 

可以从图中看出,这个网页不管屏幕分辨率怎么发生变化,它的高度和位置都不变,而且里面的元素排布也没有发生变化,总是图标信息在左边和薪资状况在右边。

 

这就是很明显的,flex布局。flex可以在移动端适配比较简单的,元素比较单一的页面。

 

具体的flex布局内容,在这里不详细说明。flex传送门

 

rem适配

 

rem可以说是移动端适配的一个神器。类似于手淘等界面,都是使用的rem进行的适配。这种界面有个特点就是页面元素的复杂度比较高,而使用flex进行布局会导致页面被拉伸,但是上下的高度却没有变化等问题。示例图:

 

具体的讲解可以看这篇比较好的文章。rem传送门 >

  • 定位

  • 尺寸

  • 浮动

  • 最初的布局——table

  • 两栏布局

  • 三栏布局

  • 移动端的布局

  •  

    相信你看完这些,在以后,一定可以拿到设计稿的时候,内心大致有个算盘,应该如何区分,如何布局。

    【我有一个前端学习交流QQ群:328058344  如果你在学习前端的过程中遇到什么问题,欢迎来我的QQ群提问,群里每天还会更新一些学习资源。禁止闲聊,非喜勿进。】