CSS 布局说——多是最全的

时间  2019-11-17
标签 css 布局 栏目 CSS 繁體版
原文   原文链接

 

前言css

 

如今，咱们被称为前端工程师。然而，早年给咱们的称呼倒是页面仔。或许是职责愈来愈大，总体的前端井喷式的发展，使咱们只关注了js，而疏远了css和html。html

 

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

 

正文css3

 

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

 

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

在css布局中，彷佛也是这样开始的。咱们也会去区分每一个元素的尺寸和定位，力争完美的实现整个设计稿。因此，咱们的布局应该从定位和尺寸开始聊起浏览器

 

定位前端工程师

 

定位的概念就是它容许你定义一个元素相对于其余正常元素的位置，它应该出如今哪里，这里的其余元素能够是父元素，另外一个元素甚至是浏览器窗口自己。还有就是浮动了，其实浮动并不彻底算是定位，它的特性很是的神奇，以致于它在布局中被人普遍的应用。咱们会在后文中专门说起它的。app

 

谈及定位，咱们就得从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 class="left">定宽</div>

  <div class="right">自适应</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 class="left">左栏</div>

<div class="right">右栏</div>

<div class="middle">中间栏</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 class="left">左栏</div>

<div class="middle">中间栏</div>

<div class="right">右栏</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 class="wrapper">

    <div class="middle">

        <div class="main">中间</div>

    </div>

    <div class="left">

        左栏

    </div>

    <div class="right">

        右栏

    </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 class="wrapper">

    <div class="left">左栏</div>

    <div class="middle">中间</div>

    <div class="right">右栏</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传送门（http://www.cnblogs.com/lyzg/p/4877277.html）

 

总结

 

分析到这里，布局的不少东西都已经很是的清晰了。相信这是一篇值得去收藏的一篇文章。内容可能有点多，因此这里作一个总结：

 

  • 定位

  • 尺寸

  • 浮动

  • 最初的布局——table

  • 两栏布局

  • 三栏布局

  • 移动端的布局

 

相信你看完这些，在之后，必定能够拿到设计稿的时候，心里大体有个算盘，应该如何区分，如何布局。

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

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程