CSS 布局

一. 概述

任何一个页面都是由各种布局组成的，而不同的布局方式适应不同的页面类型。与布局有关的属性主要有以下一些：position，display，padding，margin，width，height，min-width，max-width，min-height，max-height，box-sizing，float，clear，z-inde 等。

以上布局的划分，是由个人喜好便于记忆划分，如有不当，望多多指出。

按表现结构分类

通栏布局

通栏布局即只有单列的布局，页面通栏布局是最基础布局的方式。

  • 水平居中

    • 使用inline-block和text-align实现

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

      优点：兼容性好；缺点：需要同时设置子元素和父元素

    • 使用margin实现

      .child {
    width: 200px;
    margin: 0 auto;
}

      优点：兼容性好。缺点: 需要指定宽度

    • 使用table实现

      .child {
    display: table;
    margin: 0 auto;
}

      优点:只需要对自身进行设置；不足:IE7+支持

    • 使用flex实现

      .parent {
    display:flex;
    justify-content:center;
}
/*或*/
.parent {
    display:flex;
}
.child {
    margin:0 auto;
}

      缺点：兼容性差，如果进行大面积的布局可能会影响效率

    • 绝对定位

      .parent {
    position: relative;
}
.child {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
}

      如果自身宽度确定，可以使用 margin-left为 - 1/2 自身宽度。
      缺点：兼容性差,IE9+

  • 垂直居中

    • 使用vertical-align

      vertical-align 需要依赖 inline或者inline-block使用。
      在使用vertical-align的时候，由于对齐的基线是用行高的基线作为标记，故需要设置line-height或设置display:table-cell;

      .parent {
    display: table-cell;
    vertical-align: middle;
}
/*或*/
.parent {
    display: inline-block;
    vertical-align: middle;
    line-height: 20px;
}

    • 使用绝对定位

      .parent {
    position: relative;
}
.child {
    positon:absolute;
    top: 50%;
    transform: translate(0,-50%);
}

      如果自身高度确定，可以使用 margin-top为 - 1/2 自身高度。
      缺点：兼容性差,IE9+

    • 使用flex实现

      .parent {
    display: flex;
    align-items:
    center;
}

      缺点：兼容性差，如果进行大面积的布局可能会影响效率

  • 水平垂直居中

    • 使用vertical-align，text-align，inline-block实现，推荐使用

      .parent {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.child {
    display:block;
}

    • 使用绝对定位

      .parent {
    position:relative;
}
.child {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

    • 使用flex

      .parent {
    display: flex;
    justify-content: center;
    align-items: center;
}

  • 全屏布局

    .parent {
    position: relative;
}
.child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
多栏布局

  • 等宽布局

    • 使用float实现，含间距。推荐使用

      .parent {
    margin-left: -20px
}
.column {
    float: left;
    width: 25%;
    padding-left: 20px;
    box-sizing: border-box;
}

    • 使用table实现

      .parent-fix {
    margin-left: -20px;
}
.parent {
    display: table;
    table-layout: fixed;
    width: 100%;
}
.column {
    display: table-cell;
    padding-left: 20px;
}

    • 使用flex实现

      .parent {
    display: flex;
}
.column {
    flex: 1;
}
.column + .column {
    margin-left: 20px;
}

  • 九宫格布局

    • 使用table实现

      <div class="parent">
    <div class="row">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div class="row">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div class="row">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</div>

      .parent {
    display: table;
    table-layout: fixed;
    width: 100%;
}
.row {
    display: table-row;
}
.item {
    display: table-cell;
    width: 33.3%;
    height: 200px;
}

    • 使用flex实现

      .parent {
    display: flex;
    flex-direction: column;
}
.row {
    height: 100px;
    display: flex;
}
.item {
    width: 100px;
    background: red;
}

  • 非等宽布局

    • 使用float与margin实现，推荐使用

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

      IE6会有3px的bug

      也可以这样实现：

      <div class="parent">
    <div class="left"></div>
    <div class="right-fix">
        <div class="right"></div>
    </div>
</div>

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

    • 使用float与overflow实现 推荐使用

      .left {
    width: 100px;
    float: left;
}
.right {
    overflow: hidden;
}

    • 使用table实现

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

    • 使用flex实现

      .parent{
    display: flex;
}
.left{
    width: 100px;
}
.right{
    flex: 1;
}

    上诉各种方式列举 左列定宽，右列自适应 ，其他 右列定宽，左列自适应 ， 两列定宽，一列自适应 ， 两侧定宽，中栏自适应 ，一列不定宽，一列自适应 情况类似，可以参考上诉方法写出。

按适应性划分

固定布局

固定宽度，固定高度。

  • 固定宽高与弹性宽高转换

    利用min-width，min-height，max-width，max-height控制固定宽度与弹性宽度的变化。如：

    .box {
    max-width: 800px;
    margin: 0 auto;
}
.box2 {
    min-width: 800px;
}
.text {
    min-height: 80px;
}
弹性布局

这里指的弹性布局，是指页面内容的宽度、高度能够随窗口、内容变化而弹性变化。

  • 默认弹性

    • 默认display:inline宽度适应内容。
    • 默认display:block宽度适应父级宽度。

  • 设置弹性

    • 使用相对单位与%

      详见：取值与单位 > 长度 > 相对长度

    • 使用属性

      • 利用display:table-cell
      • 利用display:flex
混合布局

固定布局与弹性布局组合使用。

响应式布局

响应式布局的理念是页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。使用同一种模板，用合适的CSS来制定内容在各种尺寸的屏幕上的呈现方式。

响应式布局的具体处理方式是利用媒体查询Media Queries，来控制使用其他布局方式来使页面更够适应屏幕。其适应性具体可能会表现在以下方面：

  • 尺寸变化
  • 位置变化
  • 增减变化

响应式布局一般实施原则： 移动端优先，从移动端向上设计。

  • Media Queries

    @media mediatype and|not|only (media feature) {
    CSS-Code;
}

    • mediatype

      • all：用于所有设备
      • aural：已废弃。用于语音和声音合成器
      • braille：已废弃。 应用于盲文触摸式反馈设备
      • embossed：已废弃。 用于打印的盲人印刷设备
      • handheld：已废弃。 用于掌上设备或更小的装置，如PDA和小型电话
      • print：用于打印机和打印预览
      • projection：已废弃。 用于投影设备
      • screen：用于电脑屏幕，平板电脑，智能手机等。
      • speech：应用于屏幕阅读器等发声设备

    • media feature

      • aspect-ratio：定义输出设备中的页面可见区域宽度与高度的比率
      • color：定义输出设备每一组彩色原件的个数。如果不是彩色设备，则值等于0
      • color-index：定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0
      • device-aspect-ratio：定义输出设备的屏幕可见宽度与高度的比率。
      • device-height：定义输出设备的屏幕可见高度。
      • device-width：定义输出设备的屏幕可见宽度。
      • grid：用来查询输出设备是否使用栅格或点阵。
      • height：定义输出设备中的页面可见区域高度。
      • max-aspect-ratio：定义输出设备的屏幕可见宽度与高度的最大比率。
      • max-color：定义输出设备每一组彩色原件的最大个数。
      • max-color-index：定义在输出设备的彩色查询表中的最大条目数。
      • max-device-aspect-ratio：定义输出设备的屏幕可见宽度与高度的最大比率。
      • max-device-height：定义输出设备的屏幕可见的最大高度。
      • max-device-width：定义输出设备的屏幕最大可见宽度。
      • max-height：定义输出设备中的页面最大可见区域高度。
      • max-monochrome：定义在一个单色框架缓冲区中每像素包含的最大单色原件个数。
      • max-resolution：定义设备的最大分辨率。
      • max-width：定义输出设备中的页面最大可见区域宽度。
      • min-aspect-ratio：定义输出设备中的页面可见区域宽度与高度的最小比率。
      • min-color：定义输出设备每一组彩色原件的最小个数。
      • min-color-index：定义在输出设备的彩色查询表中的最小条目数。
      • min-device-aspect-ratio：定义输出设备的屏幕可见宽度与高度的最小比率。
      • min-device-width：定义输出设备的屏幕最小可见宽度。
      • min-device-height：定义输出设备的屏幕的最小可见高度。
      • min-height：定义输出设备中的页面最小可见区域高度。
      • min-monochrome：定义在一个单色框架缓冲区中每像素包含的最小单色原件个数
      • min-resolution：定义设备的最小分辨率。
      • min-width：定义输出设备中的页面最小可见区域宽度。
      • monochrome：定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0
      • orientation：定义输出设备中的页面可见区域高度是否大于或等于宽度。
      • resolution：定义设备的分辨率。如：96dpi, 300dpi, 118dpcm
      • scan：定义电视类设备的扫描工序。
      • width：定义输出设备中的页面可见区域宽度。
      @media only screen and (max-width: 500px) {
    .gridmenu {
        width:100%;
    }

    .gridmain {
        width:100%;
    }

    .gridright {
        width:100%;
    }
}

按标签或属性划分

表格布局

使用table布局。

定位布局

使用positon布局。

  • positon:absolute
  • positon:fixed
浮动布局

使用float布局。

Flexbox布局

使用flex布局。

Grid布局

使用display:grid布局

具体详见：

z-index层级

z-index属性设置元素的堆叠顺序，可拥有负的属性值，仅能在定位元素上奏效。

CSS中的层级优先级 (同级元素、z-index生效)：
z-index较大者优先
定位元素优先于未定位元素
文档中靠后元素优先于靠前元素

系统中z-index约定，试拟

z-index 区间 内容与功能
0，1 隐藏的内容与结构
9 ~ 1 页面主体布局
99 ~ 10 页面内容
999 ~ 100 页面基本弹层
9999 ~ 1000 页面顶级弹层
posted @ 2017-02-09 19:31  Ciimoo  阅读(165)  评论(0)    收藏  举报