浅说CSS常用布局

一、前言

HTML常用标签有<div>、<p>、<li>和<table>以及<span>、<img>、<strong>和<em>等。虽然标签种类繁多，但通常分为两类：块级元素（block-level element）和 内联元素（inline element）。

所谓布局，就是指将元素设置为我们想要的大小，放置于我们想要的位置。

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

二、布局基础概念

1. 盒模型

盒子模型：每个元素，都会形成一个矩形块。如图：

css盒模型，分为4部分：

• content（内容）：显示元素内容区域，包含子孙元素的地方
• padding（内边距）：内容区域到边框的距离，也称内边距
• border（边框）：显示自身轮廓
• margin（外边距）: 用于设置元素自身和同级元素或者父级元素的距离

2. 文档流（正常流）

“文档流” 实际上是CSS世界中的一种基本的定位和布局机制，可以理解为所有元素的默认渲染规则。它的规则很简单：元素按照自己的默认布局特性进行渲染。

The document flow is the model by which elements are rendered by default in the CSS specifications. In this model, elements are rendered according by their default display rule. In other words, block-level elements are displayed on a new line and inline elements on the same line. Everything is stacked in an ordered way from top to bottom.
——《CSS: understanding the document flow》

2.1 元素的分类

元素按布局特性来划分，可以分为三类元素：

• 块级元素：display 属性取 block、table、flex、grid和list-item 等值的独占一行显示的元素。
• 内联元素：display 属性取 inline 值的可在同一行内排列显示的元素。
• 内联块级元素： display 属性取 inline-block、inline-table、inline-flex和inline-grid 等值的兼具块级元素和行内级元素布局特性的元素。

2.2 元素的布局特性

• 块级元素：每个元素独占一行，从上往下流动。
• 内联元素：从左往右流动。
• 内联块级元素：不独占一行，在一行内按从左到右的顺序排列；可以设置自己的宽度。

2.3 脱离文档流

如果css全部都以默认的文档流来渲染，就只能实现类似W3C那样的文档网页。为实现更多复杂的布局，可通过破坏文档流来实现。
常见的脱离文档流（不占文档流的高度）的方法有：

• 将元素设置为浮动元素
• 将元素的position属性设置为absolute、fixed

三、CSS布局方案

1. 左右布局

左右布局即两栏布局：一栏固定宽度，另一栏自适应撑满。

1.1 浮动元素float + 普通元素margin实现

1.2 flex实现

父容器设置 display：flex；Right部分设置 flex：1

2. 左中右布局

左中右布局即三栏布局：左右两栏固定宽度， 中间主要区块自适应撑满。

2.1 float实现，左右两列定宽，不可伸缩；中间内容区自适应

2.2 flex实现

若使用该布局，HTMl中块级元素按顺序排列即可

3. 水平居中

3.1. 行内元素

常见的行内元素有：span, a, img, input, label 等等。
在行内元素的父级元素上设定：

.parent{
    text-align: center;
}

3.2. 块级元素

3.2.1 确定宽度的块级元素

对其自身应用margin-left 和margin-right为auto来使它水平居中：

     margin: 0 auto;

3.2.2 未知宽度的块级元素

• table标签+margin左右auto
  使用table标签（或直接将块级元素设值为display:table），再通过给该标签添加左右margin为auto
• 修改为 inline-block 属性

.parent {
    text-align: center;
}
.child {
    display: inline-block;
}

• flex实现
  对其自身应用：

.child {
    display: flex;
    justify-content: center;
}

4. 垂直居中

垂直居中已成为CSS领域的圣杯，有那么一点点麻烦
表格布局法、行内块法不在此阐述。

4.1 绝对定位和负边距法

该方法可让宽高不固定的元素垂直居中，解除对固定尺寸的依赖（固定宽高的也可以用该方法）：

4.2 Flexbox（最佳方法）

在待居中元素的父元素上设置display: flex，再在其自身上设置 margin: auto:

Flexbox的另一种应用方法：

四、一些小技巧

• 万能调试大法
  border: 1px solid red;

• 导航栏
  当要达到一个元素hover状态下有边框，正常情况下无边框时，可以在普通情况下就添加透明色的边框，hover时改变颜色即可：

  
  导航栏_hover.jpg

• a 标签去掉其默认样式时，颜色可设置为继承父元素a { color:inherit; }