前端各种布局合集

圣杯布局

1. DOM结构

<div id="header"></div>
<div id="container">
  <div id="center" class="column"></div>
  <div id="left" class="column"></div>
  <div id="right" class="column"></div>
</div>
<div id="footer"></div>

首先定义出整个布局的DOM结构，主体部分是由container包裹的center,left,right三列，其中center定义在最前面。

2. CSS代码

假设左侧的固定宽度为200px，右侧的固定宽度为150px，则首先在container上设置：

#container {
  padding-left: 200px; 
  padding-right: 150px;
}

为左右两列预留出相应的空间，得到如下示意图：

随后分别为三列设置宽度与浮动，同时对footer设置清除浮动：

#container .column {
  float: left;
}

#center {
  width: 100%;
}

#left {
  width: 200px; 
}

#right {
  width: 150px; 
}

#footer {
  clear: both;
}

得到如下效果：

根据浮动的特性，由于center的宽度为100%，即占据了第一行的所有空间，所以left和right被“挤”到了第二行。

接下来的工作是将left放置到之前预留出的位置上，这里使用负外边距（nagetive margin）：

#left {
  width: 200px; 
  margin-left: -100%;
}

得到：

随后还需要使用定位(position)方法：

#left {
  width: 200px; 
  margin-left: -100%;
  position: relative;
  right: 200px;
}

这里使用position: relative和right: 200px将left的位置在原有位置基础上左移200px，以完成left的放置：

接下来放置right，只需添加一条声明即可：

#right {
  width: 150px; 
  margin-right: -150px; 
}

得到最终的效果图：

至此，布局效果完成。不过还需要考虑最后一步，那就是页面的最小宽度：要想保证该布局效果正常显示，由于两侧都具有固定的宽度，所以需要给定页面一个最小的宽度，但这并不只是简单的200+150=350px。回想之前left使用了position: relative，所以就意味着在center开始的区域，还存在着一个left的宽度。所以页面的最小宽度应该设置为200+150+200=550px：

body {
  min-width: 550px;
}

综上所述，圣杯布局的CSS代码为：

body {
  min-width: 550px;
}

#container {
  padding-left: 200px; 
  padding-right: 150px;
}

#container .column {
  float: left;
}

#center {
  width: 100%;
}

#left {
  width: 200px; 
  margin-left: -100%;
  position: relative;
  right: 200px;
}

#right {
  width: 150px; 
  margin-right: -150px; 
}

#footer {
  clear: both;
}

关于圣杯布局的示例，可参考：圣杯布局

最后提醒一下很多朋友可能会忽略的小细节：在#center中，包含了一条声明width: 100%，这是中间栏能够做到自适应的关键。可能会有朋友认为不需要设置这条声明，因为觉得center在不设置宽度的情况下会默认将宽度设置为父元素(container)的100%宽度。但需要注意到，center是浮动元素，由于浮动具有包裹性，在不显式设置宽度的情况下会自动“收缩”到内容的尺寸大小。如果去掉width: 100%，则当中间栏不包含或者包含较少内容时，整个布局会“崩掉”，而达不到这样的效果：

双飞翼布局

1. DOM结构

<body>
  <div id="header"></div>
  <div id="container" class="column">
    <div id="center"></div>
  </div>
  <div id="left" class="column"></div>
  <div id="right" class="column"></div>
  <div id="footer"></div>
<body>

双飞翼布局的DOM结构与圣杯布局的区别是用container仅包裹住center，另外将.column类从center移至container上。

2. CSS代码

按照与圣杯布局相同的思路，首先设置各列的宽度与浮动，并且为左右两列预留出空间，以及为footer设置浮动清除：

#container {
  width: 100%;
}

.column {
  float: left;
}

#center {
  margin-left: 200px;
  margin-right: 150px;
}

#left {
  width: 200px; 
}

#right {
  width: 150px; 
}

#footer {
  clear: both;
}

得到如下效果示意图：

以上代码将container,left,right设置为float: left，而在container内部，center由于没有设置浮动，所以其宽度默认为container的100%宽度，通过对其设置margin-left和margin-right为左右两列预留出了空间。

将left放置到预留位置：

#left {
  width: 200px; 
  margin-left: -100%;
}

得到：

将right放置到预留位置：

#right {
  width: 150px; 
  margin-left: -150px;
}

得到最终效果：

最后计算最小页面宽度：由于双飞翼布局没有用到position:relative进行定位，所以最小页面宽度应该为200+150=350px。但是当页面宽度缩小到350px附近时，会挤占中间栏的宽度，使得其内容被右侧栏覆盖，如下所示：

因此在设置最小页面宽度时，应该适当增加一些宽度以供中间栏使用（假设为150px），则有：

body {
  min-width: 500px;
}

至此双飞翼布局大功告成！其布局整体代码为：

body {
  min-width: 500px;
}

#container {
  width: 100%;
}

.column {
  float: left;
}

#center {
  margin-left: 200px;
  margin-right: 150px;
}

#left {
  width: 200px; 
  margin-left: -100%;
}

#right {
  width: 150px; 
  margin-left: -150px;
}

#footer {
  clear: both;
}

关于双飞翼布局的示例，可参考：双飞翼布局

总结与思考

圣杯布局和双飞翼布局的实现方法略有差异，不过都遵循了以下要点：

两侧宽度固定，中间宽度自适应
中间部分在DOM结构上优先，以便先行渲染
允许三列中的任意一列成为最高列
只需要使用一个额外的<div>标签

通过对圣杯布局和双飞翼布局的介绍可以看出，圣杯布局在DOM结构上显得更加直观和自然，且在日常开发过程中，更容易形成这样的DOM结构（通常<aside>和<article>/<section>一起被嵌套在<main>中）；而双飞翼布局在实现上由于不需要使用定位，所以更加简洁，且允许的页面最小宽度通常比圣杯布局更小。

其实通过思考不难发现，两者在代码实现上都额外引入了一个<div>标签，其目的都是为了既能保证中间栏产生浮动（浮动后还必须显式设置宽度），又能限制自身宽度为两侧栏留出空间。

从这个角度出发，如果去掉额外添加的<div>标签，能否完成相同的布局呢？答案是肯定的，不过这需要在兼容性上做出牺牲：

DOM结构

<div id="header"></div>
<div id="center" class="column"></div>
<div id="left" class="column"></div>
<div id="right" class="column"></div>
<div id="footer"></div>

去掉额外的<div>标签后，得到的DOM结构如上所示，基于双飞翼布局的实现思路，只需要在center上做出修改：

1. 使用calc()

.column {
  float: left;
}

#center {
  margin-left: 200px;
  margin-right: 150px;
  width: calc(100% - 350px);
}

通过calc()可以十分方便地计算出center应该占据的自适应宽度，目前calc()支持到IE9。

2. 使用border-box

.column {
  float: left;
}

#center {
  padding-left: 200px;
  padding-right: 150px;
  box-sizing: border-box;
  width: 100%;
}

使用border-box可以将center的整个盒模型宽度设置为父元素的100%宽度，此时再利用padding-left和padding-right可以自动得到中间栏的自适应宽度。不过需要注意的是，由于padding是盒子的一部分，所以padding部分会具有中间栏的背景色，当中间栏高于侧栏时，会出现这样的情况：

目前box-sizing支持到IE8。

3. 使用flex

这里使用flex还是需要与圣杯布局相同的DOM结构，不过在实现上将更加简单：

<!-- DOM结构 -->
<div id="container">
  <div id="center"></div>
  <div id="left"></div>
  <div id="right"></div>
</div>

CSS代码如下：

#container {
    display: flex;
}

#center {
    flex: 1;
}

#left {
    flex: 0 0 200px;
    order: -1;
}

#right {
    flex: 0 0 150px;
}

多列布局

在我们日常开发中布局是我们必不可少的步骤，今天介绍日常开发中常见的几种页面布局方式，如有错误，欢迎指正，少废话，直接上代码。

1：左边定宽右边不定宽

如图：

html代码

 <div class="parent">
  <div class="left">
    <p>左边固定宽度100px</p>
  </div> 
  <div class="right">
    <p>右边宽度不固定</p>
    <p>右边宽度不固定</p>
  </div>
</div>

css代码一

.left{
  width: 100px;
  float: left;
}
  .left p{
    background:red;
  }
  .right{
    margin-left: 120px;
  }
  .right p{
    background: pink;
  }

css代码二

  .left{
    width: 100px;
    float: left;
  }
    .left p{
      background:red;
    }
    .right{
      overflow: hidden;
    }
    .right p{
      background: pink;
    }

css代码三

.parent{
  display: table;
  width: 100%;
  table-layout: fixed;
}
  .left,.right{
    display: table-cell;
  }
  .left{
    width: 100px
  }
  .left p{
    background:red;
  }
  .right p{
    background: pink;
  }

css代码四

.parent{
  display: flex;
}
  .left{
    width: 100px; 
    margin-right: 20px;
    background:red;
  }
  .right {
    background: pink;
    flex: 1
  }

现代开发不考虑老版本浏览器兼容更多喜欢flex布局，尤其是移动端，如果pc端考虑到兼容问题则前面的比较合适,还有两列定宽右边不定宽道理一样

2：左右等高布局

如图：

html代码

<div class="parent">
  <div class="left">
    <p>我的高度跟随右边的高度</p>
  </div> 
  <div class="right">
    <p>右边宽度不固定</p>
    <p>右边宽度不固定</p>
    <p>右边宽度不固定</p>
    <p>右边宽度不固定</p>
    <p>右边宽度不固定</p>
    <p>右边宽度不固定</p>
    <p>右边宽度不固定</p>
    <p>右边宽度不固定</p>
  </div>
 </div>

css代码一

.parent{
  display: table;
  width: 100%;
  table-layout: fixed;
}
  .left,.right{
    display: table-cell;
  }
  .left {
    width: 100px;
    background: red;
    margin-right: 60px;
  }
  .right{
    background: pink;
  }

css代码二

.parent{
  display: flex;
}
.left {
  width: 100px;
  background: red;
  margin-right: 20px;
 }
.right{
  flex: 1;
  background: pink;
}

3：等宽布局

如图：

html代码

<div class="parent_flex">
  <div class="parent">
    <div class="column"><p>1</p></div>
    <div class="column"><p>2</p></div>
    <div class="column"><p>3</p></div>
    <div class="column"><p>4</p></div>
  </div>
 </div>

css代码一

 .parent_flex{
  margin-left: -20px;
}
  .parent{
    display: table;
    width: 100%;
    table-layout: fixed;
    background: #ccc;
    height: 200px;
  }
  .parent .column{
    display: table-cell;
    padding-left: 20px;
  } 
  .parent .column p{
    background: pink;
  }

css代码二

  .parent{
    width: 80%;
    background: #ccc;
    height: 300px;
    display: flex;
    margin:0 auto;
  }
    .parent .column{
      height: 150px;
      background: pink;
      flex: 1;
    }
    .column+.column{
      margin-left: 20px;
    }

4：两边定宽中间不定宽

如图：

html代码：

<div class="parent">
  <div class="left"><p>左边</p></div>
  <div class="right"><p>右边</p></div>
  <div class="center"><p>中间</p></div>
</div>

css代码一

.parent{
  width: 80%;
  background: #ccc;
  margin:0 auto;
}
  .left{
    width: 100px;
    float: left;
    margin-right: 10px;
    background: red;
  }
  .right{ 
    width: 100px;
    float: right;
    margin-left: 10px;
    background: red;
  }
  .center{
    overflow: hidden;
    background: pink;
  }

上面的写法就是需要交换div center 的代码放到后面浮动的方式来布局下面用table或flex 就不需要

html代码二

<div class="parent">
  <div class="left"><p>左边</p></div>
  <div class="center"><p>中间</p></div>
  <div class="right"><p>右边</p></div>
</div>

css代码一

.parent{
  width: 100%;
  background: #ccc;
  margin:0 auto;
  display: table;
  table-layout: fixed;
}
  .left{
    width: 100px;
    padding-right: 10px;
    display: table-cell;
  }
  .right{
    width: 100px;
    padding-left: 10px;
    display: table-cell;
  }
  .center{
    display: table-cell;
  }
  p{
    background: pink;
  }

css代码二

.parent{
  width: 100%;
  background: #ccc;
  display: flex;
  height: 200px;
}
  .left,.right{
    background: red;
    width: 100px;
  }
  .left{
    margin-right: 10px;
  }
  .right{
    margin-left: 10px;
  }
  .center{
    flex: 1;
    background: pink;
  }

弹性布局

一、CSS3弹性盒子

弹性盒子是CSS3的一种新布局模式。
CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

二、浏览器支持

图片中的数字表示支持该属性的第一个浏览器的版本号。紧跟在数字后面的 -webkit- 或 -moz- 为指定浏览器的前缀。

三、CSS3 弹性盒子内容

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器通过设置 display属性的值为flex或inline-flex将其定义为弹性容器。
弹性容器内包含了一个或多个弹性子元素。

注意： 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。

弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

以下元素展示了弹性子元素在一行内显示，从左到右:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>FLEX</title>
    <style>
      .flex-container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 1200px;
        height: 640px;
        background-color: lightsteelblue;
      }
      .flex-container .flex-item {
        width: 320px;
        height: 240px;
        margin: 10px;
        background-color:lightsalmon;
      }
    </style>
</head>
<body>
  <div class="flex-container">
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
  </div>
</body>
</html>

四、CSS3 弹性盒子常用属性

属性	描述
flex-direction	指定弹性容器中子元素排列方式
flex-wrap	设置弹性盒子的子元素超出父容器时是否换行
flex-flow	flex-direction 和 flex-wrap 的简写
align-items	设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式
align-content	修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐
justify-content	设置弹性盒子元素在主轴（横轴）方向上的对齐方式

1. flex-direction 属性

决定项目的方向。

注意：如果元素不是弹性盒对象的元素，则 flex-direction 属性不起作用。

.flex-container { 
  flex-direction: row | row-reverse | column | column-reverse; 
}

属性值

值	描述
row	默认值。元素将水平显示，正如一个行一样。
row-reverse	与 row 相同，但是以相反的顺序。
column	元素将垂直显示，正如一个列一样。
column-reverse	与 column 相同，但是以相反的顺序。

2. flex-wrap 属性

flex-wrap 属性规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。

值	描述
nowrap	默认值。规定元素不拆行或不拆列。
wrap	规定元素在必要的时候拆行或拆列。
wrap-reverse	规定元素在必要的时候拆行或拆列，但是以相反的顺序。

.flex-container { 
  flex-wrap: nowrap | wrap | wrap-reverse; 
}

可以取三个值：
（1） nowrap (默认)：不换行。

（2）wrap：换行，第一行在上方。

（3）wrap-reverse：换行，第一行在下方。

3. flex-flow 属性

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

.flex-container { 
  flex-flow: <flex-direction> <flex-wrap> 
}

4. align-items属性

align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。

值	描述
stretch	默认值。项目被拉伸以适应容器。
center	项目位于容器的中心。
flex-start	项目位于容器的开头。
flex-end	项目位于容器的结尾。
baseline	项目位于容器的基线上。

5. justify-content属性

justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。

值	描述
flex-start	默认值。项目位于容器的开头。
flex-end	项目位于容器的结尾。
center	项目位于容器的中心。
space-between	项目位于各行之间留有空白的容器内。
space-around	项目位于各行之前、之间、之后都留有空白的容器内。

五、弹性子元素属性

属性	描述
order	设置弹性盒子的子元素排列顺序。
flex-grow	设置或检索弹性盒子元素的扩展比率。
flex-shrink	指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。
flex-basis	用于设置或检索弹性盒伸缩基准值。
flex	设置弹性盒子的子元素如何分配空间。
align-self	在弹性子元素上使用。覆盖容器的 align-items 属性。

1. order属性

.flex-container .flex-item { 
  order: <integer>; 
}

<integer>：用整数值来定义排列顺序，数值小的排在前面。可以为负值，默认为0。

2. flex-grow属性

.flex-container .flex-item { 
  flex-grow: <integer>; 
}

<integer>：一个数字，规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0。

3. flex-shrink属性

.flex-container .flex-item { 
  flex-shrink: <integer>; 
}

<integer>：一个数字，规定项目将相对于其他灵活的项目进行收缩的量。默认值是 1。

4. flex-basis属性

.flex-container .flex-item { 
  flex-basis: <integer> | auto; 
}

<integer>：一个长度单位或者一个百分比，规定元素的初始长度。
auto：默认值。长度等于元素的长度。如果该项目未指定长度，则长度将根据内容决定。

5. flex属性

flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。
flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。

.flex-container .flex-item {
  flex: flex-grow flex-shrink flex-basis | auto | initial | inherit; 
}

值	描述
flex-grow	一个数字，规定项目将相对于其他元素进行扩展的量。
flex-shrink	一个数字，规定项目将相对于其他元素进行收缩的量。
flex-basis	项目的长度。合法值："auto"、"inherit" 或一个后跟 "%"、"px"、"em" 或任何其他长度单位的数字。
auto	与 1 1 auto 相同。
none	与 0 0 auto 相同。
initial	设置该属性为它的默认值，即为 0 1 auto。
inherit	从父元素继承该属性。

6. align-self属性

.flex-container .flex-item {
    align-self: auto | stretch | center | flex-start | flex-end | baseline | initial | inherit;
}

值	描述
auto	默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"。
stretch	元素被拉伸以适应容器。
center	元素位于容器的中心。
flex-start	元素位于容器的开头。
flex-end	元素位于容器的结尾。
baseline	元素位于容器的基线上。
initial	设置该属性为它的默认值。
inherit	从父元素继承该属性。

取值同 align-items。

响应式布局

响应式布局等于流动网格布局，而自适应布局等于使用固定分割点来进行布局。

自适应布局给了你更多设计的空间，因为你只用考虑几种不同的状态。而在响应式布局中你却得考虑上百种不同的状态。虽然绝大部分状态差异较小，但仍然也算做差异。它使得把握设计最终效果变得更难，同样让响应式布局更加的难以测试和预测。但同时说难，这也算是响应式布局美的所在。在考虑到表层级别不确定因素的过程中，你也会因此更好的掌握一些基础知识。当然，要做到精确到像素级别的去预测设943*684像素视区里的样子是很难的，但是你至少可以很轻松的确定它是能够正常工作的，因为页面的基本特性和布局结构都是根据语义结构来部署的。

响应式布局概念

Responsive design，意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。

响应式设计的方法和注意点。其实很简单。

响应式设计的步骤

1. 设置 Meta 标签

大多数移动浏览器将HTML页面放大为宽的视图（viewport）以符合屏幕分辨率。你可以使用视图的meta标签来进行重置。下面的视图标签告诉浏览器，使用设备的宽度作为视图宽度并禁止初始的缩放。在<head>标签里加入这个meta标签。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

(<small>user-scalable = no 属性能够解决 iPad 切换横屏之后触摸才能回到具体尺寸的问题。</small> ）

3. 通过媒介查询来设置样式 Media Queries

Media Queries 是响应式设计的核心。
它根据条件告诉浏览器如何为指定视图宽度渲染页面。假如一个终端的分辨率小于 980px，那么可以这样写：

@media screen and (max-width: 980px) {
  #head { … }
  #content { … }
  #footer { … }
}

这里的样式就会覆盖上面已经定义好的样式。

4. 设置多种试图宽度

假如我们要设定兼容iPad和 iphone的视图，那么可以这样设置：

/** iPad **/
@media only screen and (min-width: 768px) and (max-width: 1024px) {}
/** iPhone **/
@media only screen and (min-width: 320px) and (max-width: 767px) {}

恩，差不多就这样的一个原理。

一些注意的

1. 宽度需要使用百分比

例如这样：

#head { width: 100% }
#content { width: 50%; }

2. 处理图片缩放的方法

简单的解决方法可以使用百分比，但这样不友好，会放大或者缩小图片。那么可以尝试给图片指定的最大宽度为百分比。假如图片超过了，就缩小。假如图片小了，就原尺寸输出。

img { 
  width: auto; 
  max-width: 100%; 
}

用::before和::after伪元素 +content 属性来动态显示一些内容或者做其它很酷的事情，在css3 中，任何元素都可以使用 content 属性了，这个方法就是结合 css3 的 attr 属性和 HTML 自定义属性的功能： HTML结构：

<img src="image.jpg" data-src-600px="image-600px.jpg" data-src-800px="image-800px.jpg" alt="">

CSS控制：

@media (min-device-width:600px) {
  img[data-src-600px] {
    content: attr(data-src-600px, url);
  }
}

@media (min-device-width:800px) {
  img[data-src-800px] {
    content: attr(data-src-800px, url);
  }
}

3. 其他属性

例如 pre ，iframe，video 等，都需要和img一样控制好宽度。对于table，建议不要增加 padding 属性，低分辨率下使用内容居中：

table th, table td { 
  padding: 0 0; 
  text-align: center; 
}

更多资源

Morten Hjerde和他的同事们对2005至2008年市场中的400余种移动设备进行了统计(查看报告)，下图展示了大致的统计结果：

打造布局结构

我们可以监测页面布局随着不同的浏览环境而产生的变化，如果它们变的过窄过短或是过宽过长，则通过一个子级样式表来继承主样式表的设定，并专门针对某些布局结构进行样式覆写。我们来看下代码示例：

/* Default styles that will carry to the child style sheet */
html,body{
  background...
  font...
  color...
}
h1,h2,h3{}
p, blockquote, pre, code, ol, ul{}
/* Structural elements */
#wrapper{
  width: 80%;
  margin: 0 auto;
  background: #fff;
  padding: 20px;
}
#content{
  width: 54%;
  float: left;
  margin-right: 3%;
}
#sidebar-left{
  width: 20%;
  float: left;
  margin-right: 3%;
}
#sidebar-right{
  width: 20%;
  float: left;
}

下面的代码可以放在子级样式表Mobile.css中，专门针对移动设备进行样式覆写：

#wrapper{
  width: 90%;
}
#content{
  width: 100%;
}
#sidebar-left{
  width: 100%;
  clear: both;
  /* Additional styling for our new layout */
  border-top: 1px solid #ccc;
  margin-top: 20px;
}
#sidebar-right{
  width: 100%;
  clear: both;
  /* Additional styling for our new layout */
  border-top: 1px solid #ccc;
  margin-top: 20px;
}

大致的视觉效果如下图所示：

图中上半部分是大屏幕设备所显示的完整页面，下面的则是该页面在小屏幕设备的呈现方式。页面HTML代码如下：

Media Queries

Ethan的文章中的“Meet the media query”部分有更多的范例及解释。更有效率的做法是，将多个media queries整合在一个样式表文件中

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}

最后编辑于：2020.09.03 14:39:35

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 205,132评论 6赞 478
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 87,802评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 151,566评论 0赞 338
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,858评论 1赞 277
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,867评论 5赞 368
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,695评论 1赞 282
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,064评论 3赞 399
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,705评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 42,915评论 1赞 300
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,677评论 2赞 323
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,796评论 1赞 333
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,432评论 4赞 322
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,041评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,992评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,223评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,185评论 2赞 352
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,535评论 2赞 343

前端各种布局合集

圣杯布局

1. DOM结构

2. CSS代码

双飞翼布局

1. DOM结构

2. CSS代码

总结与思考

DOM结构

1. 使用calc()

2. 使用border-box

3. 使用flex

多列布局

1：左边定宽右边不定宽

html代码

css代码一

css代码二

css代码三

css代码四

2：左右等高布局

html代码

css代码一

css代码二

3：等宽布局

html代码

css代码一

css代码二

4：两边定宽中间不定宽

html代码：

css代码一

html代码二

css代码一

css代码二

弹性布局

一、CSS3弹性盒子

二、浏览器支持

三、CSS3 弹性盒子内容

四、CSS3 弹性盒子常用属性

1. flex-direction 属性

2. flex-wrap 属性

3. flex-flow 属性

4. align-items属性

5. justify-content属性

五、弹性子元素属性

1. order属性

2. flex-grow属性

3. flex-shrink属性

4. flex-basis属性

5. flex属性

6. align-self属性

响应式布局

响应式布局概念

响应式设计的步骤

1. 设置 Meta 标签

3. 通过媒介查询来设置样式 Media Queries

4. 设置多种试图宽度

一些注意的

1. 宽度需要使用百分比

2. 处理图片缩放的方法

3. 其他属性

更多资源

Media Queries

推荐阅读更多精彩内容