CSS布局

作者: 如梦初醒Tel | 来源:发表于2019-03-11 17:12 被阅读88次

文章收藏
css
css flex布局详解
经典CSS布局：双飞翼和圣杯布局
圣杯布局2019-12-18
##深入学习CSS布局系列（一）布局常用属性
块状元素和内联元素、盒子模型
CSS布局
CSS Grid 布局完全指南1-grid基础知识
CSS布局

前言

网页的布局有很多种，下面我来介绍一些常见的布局方式和小的Demo

单列布局

特征：中间盒子水平居中，宽度固定

一种是header、content、footer宽度都相同，其一般不会占满浏览器的最宽宽度，但当浏览器宽度缩小低于其最大宽度时，宽度会自适应。

image.png

一种是header、footer宽度为浏览器宽度，但content以及header和footer里的内容却不会占满浏览器宽度。

image.png

二列布局

浮动布局 float + margin (流体布局)
左边浮动，右边margin-left，实现左边固定，右边自适应的布局

image.png

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="parent">
    <div class="left"></div>
    <div class="right"></div>
  </div>
</body>
</html>

div{
   height:100px;
}
.left {
  border:1px red solid;
  float:left;
  background:grey;
  width:200px
}

.right{
  width:300px;
  background:red;
  border:1px black solid;
  margin-left:200px
}

浮动 float + margin + (fix)

image.png

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="parent">
    <div class="del left">
    </div>
    <div class="right-fix">
       <div class="del right">
       </div>
    </div>
  </div>
</body>
</html>

div .del{
  width: 100px;
  height:20px;
}

.left {
  float: left;
  background:red;
  position: relative; 
}

.right-fix {
  float: right;
  width: 100%;
  margin-left: -100px;
}

.right {
  background:grey;
  margin-left: 120px;
}

通过在 right 上套上一层 right-fix，然后对 right-fix 设置浮动，然后提高 left 的层级设置定位属性为 relative，可以解决 IE6 的兼容性问题

浮动 float + overflow (BFC布局)

image.png

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="parent">
    <div class="left">
      <p>left</p>
    </div>
    <div class="right">
      <p>right</p>
    </div>
  </div>
</body>
</html>

.left {
  border:1px red solid;
  float: left;
  width: 100px;
  margin-right: 20px;
  background:green;
}

.right{
  border:1px red solid;
  overflow: hidden;
  background:grey;
}

三列布局 (传统布局方法)

三列布局的特点就是中间自适应，左右等宽

float+margin 流体布局

<div id="content">
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="main">main</div>
</div>

.left {
  float: left;
  height: 200px;
  width: 100px;
  background-color: red;
}
.right {
  width: 200px;
  height: 200px;
  background-color: blue;
  float: right;
}
.main {
  margin-left: 120px;
  margin-right: 220px;
  height: 200px;
  background-color: green;
}

缺点就是主要内容无法最先加载，当页面内容较多时会影响用户体验。

BFC 三栏布局

<div id="content">
  <div class="left">left</div>
  <div class="right">right</div>
  <div class="main">main</div>
</div>

.left {
  float: left;
  height: 200px;
  width: 100px;
  margin-right: 20px;
  background-color: red;
}
.right {
  width: 200px;
  height: 200px;
  float: right;
  margin-left: 20px;
  background-color: blue;
}   
.main {
  height: 200px;
  overflow: hidden;
  background-color: green;
}

主要内容模块无法最先加载，当页面中内容较多时会影响用户体验。

注意DOM文档的书写顺序，先写两侧栏，再写主面板，更换后则侧栏会被挤到下一列（圣杯布局和双飞翼布局都会用到）。　
这种布局方式比较简单明了，但缺点是渲染时先渲染了侧边栏，而不是比较重要的主面板。

双飞翼布局

<div class="content">
  <div class="main"></div>
</div>
<div class="left"></div>
<div class="right"></div>

 .content {
   float: left;
   width: 100%;
}
.main {
  height: 200px;
  margin-left: 110px;
  margin-right: 220px;
  background-color: green;
}
.left {
  float: left;
  height: 200px;
  width: 100px;
  margin-left: -100%;
  background-color: red;
}
.right {
  width: 200px;
  height: 200px;
  float: right;
  margin-left: -200px;
  background-color: blue;
}

先把main中的内容显示，main 的margin-left和margin-right的宽度设置成下面两个div的宽度，而之后两个div的margin-left都取负值，左侧的负100%，右侧的负(宽度)

圣杯布局

  <div class="container">
    <div class="main"></div>
    <div class="left"></div>
    <div class="right"></div>
  </div>

.container {
  margin-left: 120px;
  margin-right: 220px;
}
.main {
  float: left;
  width: 100%;
  height: 300px;
  background-color: red;
}
.left {
  float: left;
  width: 100px;
  height: 300px;
  margin-left: -100%;
  position: relative;
  left: -120px;
  background-color: blue;
}
.right {
  float: left;
  width: 200px;
  height: 300px;
  margin-left: -200px;
  position: relative;
  right: -220px;
  background-color: green;
}

跟双飞翼布局很像，有一些细节上的区别，相对于双飞翼布局来说，HTML 结构相对简单，但是样式定义就稍微复杂，也是优先加载内容主体。

绝对定位布局

<div class="container">
    <div class="main"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>

.container {
  position: relative;
}
.main {
  height: 300px;
  margin: 0 120px;
  background-color: green;
}
.left {
  position: absolute;
  width: 100px;
  height: 300px;
  left: 0;
  top: 0;
  background-color: red;
}
.right {
  position: absolute;
  width: 100px;
  height: 300px;
  background-color: blue;
  right: 0;
  top: 0;
}

简单实用，并且主要内容可以优先加载。

简书 - 圣杯布局和双飞翼布局（前端面试必看）
百度前端学院笔记 - 三栏式布局之双飞翼与圣杯

居中布局

Centering in CSS: A Complete Guide

水平居中

行内元素(inline)：text-align: center;
块级元素(block)：设置宽度且 marigin-left 和 margin-right是设成 auto 。比如：margin:0 auto;
多个块级元素：对父元素设置 text-align: center;，对子元素设置 display: inline-block;或者使用 flex 布局

垂直居中

行内元素(inline)
单行：设置上下 pandding 相等；或者设置 line-height 和 height 相等

# 第一种
.link{
padding-top: 30px;
padding-bottom: 30px;
}
# 第二种
.center-text-trick {
  height: 100px;
  line-height: 100px;
  white-space: nowrap;
}

多行：设置上下 pandding 相等；或者设置 display: table-cell; 和 vertical-align: middle; 或者使用 flex 布局；或者使用伪元素

块级元素(block)：下面前两种方案，父元素需使用相对布局
a. 已知高度：子元素使用绝对布局 top: 50%;，再用负的 margin-top 把子元素往上拉一半的高度
b. 未知高度：子元素使用绝对布局 position: absolute; top: 50%; transform: translateY(-50%);
c. 使用 Flexbox：选择方向，justify-content: center;