浅说CSS常用布局

作者: JaniceZD | 来源:发表于2018-10-16 22:13 被阅读107次

浅说CSS常用布局
CSS常用布局实现
web前端教程：CSS 布局十八般武艺都在这里了
##深入学习CSS布局系列（一）布局常用属性
css布局和居中
Css float属性的一些特点
Good Luck
前端技能
006_布局任务与答案第一期（四川师范大学JavaWeb）
CSS布局常用

一、前言

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

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

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

二、布局基础概念

1. 盒模型

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

css_box.png
在Chrome开发者工具中查看，如图：

chrome_css_box.PNG

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实现

两栏布局.png

1.2 flex实现

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

两栏布局_flex.png

2. 左中右布局

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

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

三栏布局_float.png
HTML中浮动元素需放在普通元素前，方可实现浮动效果

2.2 flex实现

三栏布局_flex.png

若使用该布局，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 绝对定位和负边距法

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

垂直居中_position.jpg

注： transform: translate(-50%,-50%); //使用transfrom修正偏移量，它以元素当前的宽和高为基础，实现垂直居中

4.2 Flexbox（最佳方法）

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

垂直居中_flex1.jpg
注意：使用Flexbox时, margin: auto不仅在水平方向上将元素居中，垂直方向亦是。

Flexbox的另一种应用方法：

垂直居中_flex2.jpg
注： align-items: center; //垂直居中
justify-content: center; //水平居中

四、一些小技巧

万能调试大法
border: 1px solid red;
导航栏
当要达到一个元素hover状态下有边框，正常情况下无边框时，可以在普通情况下就添加透明色的边框，hover时改变颜色即可：

导航栏_hover.jpg
一些图标素材可以使用 iconfont网站来查找
css日常搜索网站：caniuse网站，了解某属性在各版本浏览器中能否使用
a 标签去掉其默认样式时，颜色可设置为继承父元素a { color:inherit; }