布局化解方案,前端知识小总计2

CSS 布局消除方案(终结版)

2018/03/20 · CSS ·
布局

原稿出处: 无悔铭   

前端布局万分关键的一环正是页面框架的搭建,也是最基础的一环。在页面框架的搭建之中,又有居中布局、多列布局以及全局布局,昨天大家就来计算总计前端干货中的CSS布局。

CSS布局化解方案(终结版)

(最近丢掉内容、样式、行为的诀别)

居中布局

居中布局

前者布局格外首要的一环正是页面框架的搭建,也是最基础的一环。在页面框架的搭建之中,又有居中布局、多列布局以及全局布局,今日大家就来总结计算前端干货中的CSS布局。

一:

水平居中

水平居中

1)使用inline-block+text-align
(1)原理、用法

  • 原理:先将子框由块级成分改变为行内块成分,再通过安装行内块成分居中以完结水平居中。
  • 用法:对子框设置display:inline-block,对父框设置text-align:center。

(2)代码实例

<div class=”parent”> <div class=”child>DEMO</div>
</div>

1
2
3
<div class="parent">
    <div class="child>DEMO</div>
</div>

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

1
2
3
4
5
6
.child{
    display:inline-block;
}
.parent{
    text-align:center;
}

(3)优缺点

  • 可取:包容性好,甚至能够包容ie⑥ 、ie7
  • 症结:child里的文字也会水平居中,能够在.child添加text-align:left;还原

2)使用table+margin
(1)原理、用法

  • 规律:先将子框设置为块级表格来展现(类似
    <table>),再设置子框居中以达到水平居中。
  • 用法:对子框设置display:table,再安装margin:0 auto。

(2)代码实例

<div class=”parent”> <div class=”child>DEMO</div>
</div>

1
2
3
<div class="parent">
    <div class="child>DEMO</div>
</div>

JavaScript

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

1
2
3
4
.child {
    display:table;
    margin:0 auto;
}

(3)优缺点:

  • 可取:只设置了child,ie8以上都协理
  • 缺点:不支持ie6、ie7,将div换成table

3)使用absolute+transform
(1)原理、用法

  • 规律:将子框设置为相对定位,移动子框,使子框右边距离相对框右侧边框的距离为相对框宽度的二分一,再通过向左移动子框的四分之二大幅以高达水平居中。当然,以前,大家供给安装父框为相对稳定,使父框成为子框的相对框。
  • 用法:对父框设置position:relative,对子框设置position:absolute,left:百分之五十,transform:translateX(-二分一)。

(2)代码实例

JavaScript

<div class=”parent”> <div class=”child>DEMO</div>
</div>

1
2
3
<div class="parent">
    <div class="child>DEMO</div>
</div>

JavaScript

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

1
2
3
4
5
6
7
8
.parent {
    position:relative;
}
.child {
    position:absolute;
    left:50%;
    transform:translateX(-50%);
}

(3)优缺点

  • 亮点:居中成分不会对其它的发生影响
  • 缺点:transform属于css3剧情,包容性存在一定难题,高版本浏览器需求添加一些前缀

4)使用flex+margin
(1)原理、用法

  • 规律:通过CSS3中的布局利器flex将子框转换为flex
    item,再设置子框居中以实现居中。
  • 用法:先将父框设置为display:flex,再设置子框margin:0 auto。

(2)代码实例

JavaScript

<div class=”parent”> <div class=”child>DEMO</div>
</div>

1
2
3
<div class="parent">
    <div class="child>DEMO</div>
</div>

JavaScript

.parent { display:flex; } .child { margin:0 auto; }

1
2
3
4
5
6
.parent {
    display:flex;
}
.child {
    margin:0 auto;
}

(3)优缺点

  • 缺陷:低版本浏览器(ie6 ie7 ie8)不帮衬

5)使用flex+justify-content
(1)原理、用法

  • 规律:通过CSS3中的布局利器flex中的justify-content属性来达成水平居中。
  • 用法:先将父框设置为display:flex,再设置justify-content:center。

(2)代码实例

JavaScript

<div class=”parent”> <div class=”child>DEMO</div>
</div>

1
2
3
<div class="parent">
    <div class="child>DEMO</div>
</div>

JavaScript

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

1
2
3
4
.parent {
    display:flex;
    justify-content:center;
}

(3)优缺点

  • 优点:设置parent即可
  • 缺陷:低版本浏览器(ie6 ie7 ie8)不扶助

居中布局

1-语义化及语义化标签

1)使用inline-block+text-align

(1)原理、用法

原理:先将子框由块级成分改变为行内块元素,再通过安装行内块元素居中以高达水平居中。
用法:对子框设置display:inline-block,对父框设置text-align:center。

(2)代码实例

<div class="parent">
      <div class="child>DEMO</div>
</div>

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

(3)优缺点

亮点:包容性好,甚至足以包容ie六 、ie7
症结:child里的文字也会水平居中,能够在.child添加text-align:left;还原

垂直居中

1)使用table-cell+vertical-align
(1)原理、用法

  • 规律:通过将父框转化为一个报表单元格展现(类似 <td> 和
    <th>),再通过设置属性,使表格单元格内容垂直居中以完结垂直居中。
  • 用法:先将父框设置为display:table-cell,再设置vertical-align:middle。

(2)代码实例

JavaScript

<div class=”parent”> <div class=”child>DEMO</div>
</div>

1
2
3
<div class="parent">
    <div class="child>DEMO</div>
</div>

JavaScript

.parent { display:table-cell; vertical-align:middle; }

1
2
3
4
.parent {
    display:table-cell;
    vertical-align:middle;
}

(3)优缺点

  • 可取:包容性较好,ie8以上均帮助

2)使用absolute+transform
(1)原理、用法

  • 规律:类似于水平居中时的absolute+transform原理。将子框设置为相对定位,移动子框,使子框下面距离相对框上边边框的相距为相对框高度的二分一,再经过发展移动子框的5/10可观以达到垂直居中。当然,从前,我们须要安装父框为相对固定,使父框成为子框的相对框。
  • 用法:先将父框设置为position:relative,再设置子框position:absolute,top:百分之五十,transform:translateY(-百分之五十)。

(2)代码实例

JavaScript

<div class=”parent”> <div class=”child>DEMO</div>
</div>

1
2
3
<div class="parent">
    <div class="child>DEMO</div>
</div>

JavaScript

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

1
2
3
4
5
6
7
8
.parent {
    position:relative;
}
.child {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
}

(3)优缺点

  • 优点:居中成分不会对任何的爆发潜移默化
  • 缺陷:transform属于css3剧情,包容性存在必然难点,高版本浏览器须求充分一些前缀

3)使用flex+align-items
(1)原理、用法

  • 规律:通过安装CSS3中的布局利器flex中的属性align-times,使子框垂直居中。
  • 用法:先将父框设置为position:flex,再设置align-items:center。

(1)代码实例

JavaScript

<div class=”parent”> <div class=”child>DEMO</div>
</div>

1
2
3
<div class="parent">
    <div class="child>DEMO</div>
</div>

JavaScript

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

1
2
3
4
.parent {
    position:flex;
    align-items:center;
}

(3)优缺点

  • 优点:只设置parent
  • 缺点:包容性存在一定难题

水平居中

标签的语义化,是指在看到标签名的情状下中央能精通它所代表的含义,相比直观,便于浏览器的分析和阅读。

2)使用table+margin

(1)原理、用法

规律:先将子框设置为块级表格来体现(类似
),再设置子框居中以达到水平居中。
用法:对子框设置display:table,再设置margin:0 auto。

(2)代码实例

<div class="parent">
        <div class="child>DEMO</div>
</div>

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

(3)优缺点:

可取:只设置了child,ie8以上都辅助
缺点:不支持ie6、ie7,将div换成table

水平垂直居中

1)使用absolute+transform
(1)原理、用法

  • 规律:将水平居中时的absolute+transform和垂直居中时的absolute+transform相结合。详见:水平居中的3)和垂直居中的2)。
  • 见水平居中的3)和垂直居中的2)。

(2)代码实例

JavaScript

<div class=”parent”> <div class=”child>DEMO</div>
</div>

1
2
3
<div class="parent">
    <div class="child>DEMO</div>
</div>

JavaScript

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

1
2
3
4
5
6
7
8
9
.parent {
    position:relative;
}
.child {
    position:absolute;
    left:50%;
    top:50%;
    transform:tranplate(-50%,-50%);
}

(3)优缺点

  • 优点:child成分不会对此外因素发生潜移默化
  • 缺点:包容性存在一定难题

2)使用inline-block+text-align+table-cell+vertical-align
(1)原理、用法

  • 规律:使用inline-block+text-align水平居中,再用table-cell+vertical-align垂直居中,将双边组合起来。详见:水平居中的1)和垂直居中的1)。
  • 见水平居中的1)和垂直居中的1)。

(2)代码实例

JavaScript

<div class=”parent”> <div class=”child>DEMO</div>
</div>

1
2
3
<div class="parent">
    <div class="child>DEMO</div>
</div>

JavaScript

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

1
2
3
4
5
6
7
8
.parent {
    text-align:center;
    display:table-cell;
    vertical-align:middle;
}
.child {
    display:inline-block;
}

(3)优缺点

  • 优点:包容性较好

3)使用flex+justify-content+align-items
(1)原理、用法

  • 规律:通过安装CSS3布局利器flex中的justify-content和align-items,从而达成水平垂直居中。详见:水平居中的4)和垂直居中的3)。
  • 见水平居中的4)和垂直居中的3)。

(2)代码实例

JavaScript

<div class=”parent”> <div class=”child>DEMO</div>
</div>

1
2
3
<div class="parent">
    <div class="child>DEMO</div>
</div>

JavaScript

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

1
2
3
4
5
.parent {
    display:flex;
    justify-content:center;
    align-items:center;
}

(3)优缺点

  • 可取:只设置了parent
  • 缺陷:包容性存在一定难题

1)使用inline-block+text-align

语义化的优点, (1)为了在未曾css的场馆下,页面也能呈现出很好地内容结构、代码结构(2)有利于用户体验(3)有利于SEO和查找引擎建立杰出的交换。(4)方便其余装置解析以意义的法门来渲染网页、(5)便于团队开发和维护,扩张可读性。

3)使用absolute+transform

(1)原理、用法

原理:将子框设置为相对定位,移动子框,使子框左边距离相对框右边边框的偏离为相对框宽度的一半,再通过向左移动子框的八分之四肥瘦以达到水平居中。当然,在此以前,大家要求设置父框为相对固化,使父框成为子框的相对框。

用法:对父框设置position:relative,对子框设置position:absolute,left:二分一,transform:translateX(-二分一)。
(2)代码实例

<div class="parent">
        <div class="child>DEMO</div>
</div>
.parent {
            position:relative;
}
.child {
            position:absolute;
            left:50%;
            transform:translateX(-50%);
}

(3)优缺点

可取:居中元素不会对其余的产生影响
缺点:transform属于css3内容,包容性存在一定难点,高版本浏览器需求添加一些前缀

多列布局

(1)原理、用法

语义化的价签,<h1>~<h6>
、<p>、 <ul>、<ol>、<li>,<ul>
、<dl>、<dt>、<dd>,<dl>
、<em>、<strong>(<em> 是用作强调,<strong>
是用作第2强调)、<table>、<td>、<th>、<caption>、<
title></title>、<header></header>、<nav></nav>、<article></article>、<section></section>、<aside></aside>、<footer></footer>、<figure></figure>、<cite></cite>、<figcaption></figcaption>(figure的标题,必须是figure内嵌的首先个只怕最终3个要素。)、<cite></cite>(指明引用只怕参考)、<blockquoto></blockquoto>、<q></q>(短的引述)、<time></time>(标记时间)、<address></address>(小编、相关职员或团体的牵连音讯(电子邮件地址、指向联系新闻页的链接)。)等。

4)使用flex+margin

(1)原理、用法
规律:通过CSS3中的布局利器flex将子框转换为flex
item,再设置子框居中以高达居中。

用法:先将父框设置为display:flex,再设置子框margin:0 auto。
(2)代码实例

<div class="parent">
      <div class="child>DEMO</div>
</div>

.parent{
      display:flex;
}
.child{
      margin: 0 auto;
}

(3)优缺点

缺陷:低版本浏览器(ie6 ie7 ie8)不帮忙

定宽+自适应

1)使用float+overflow
(1)原理、用法

  • 原理:通过将左手框脱离文本流,设置右侧规定当内容溢出成分框时产生的工作以达成多列布局。
  • 用法:先将左框设置为float:left、width、margin-left,再安装实际的右框overflow:hidden。

(2)代码实例

JavaScript

<div class=”parent”> <div class=”left”>
<p>left</p> </div> <div class=”right”>
<p>right</p> <p>right</p> </div>
</div>

1
2
3
4
5
6
7
8
9
<div class="parent">
    <div class="left">
        <p>left</p>
    </div>
    <div class="right">
        <p>right</p>
        <p>right</p>
    </div>
</div>

JavaScript

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

1
2
3
4
5
6
7
8
.left {
    float:left;
    width:100px;
    margin-right:20px;
}
.right {
    overflow:hidden;
}

(3)优缺点

  • 优点:简单
  • 缺点:不支持ie6

2)使用float+margin
(1)原理、用法

  • 规律:通过将左框脱离文本流,加上右框向右移动一定的离开,以达到视觉上的多列布局。
  • 用法:先将左框设置为float:left、margin-left,再设置右框margin-left。

(2)代码实例

JavaScript

<div class=”parent”> <div class=”left”>
<p>left</p> </div> <div class=”right”>
<p>right</p> <p>right</p> </div>
</div>

1
2
3
4
5
6
7
8
9
<div class="parent">
    <div class="left">
        <p>left</p>
    </div>
    <div class="right">
        <p>right</p>
        <p>right</p>
    </div>
</div>

JavaScript

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

1
2
3
4
5
6
7
.left {
    float:left;
    width:100px;
}
.right {
    margin-left:120px;
}

(3)优缺点

  • 优点:简单,易理解
  • 缺陷:包容性存在必然难题,ie6下有3px的bug。right下的p清除浮动将时有产生bug

3)使用float+margin(改良版)
(1)原理、用法

  • 原理:在1)的基本功之上,通过向右框添加3个父框,再添加设置左、右父框属性使之产生BFC以去除bug。
  • 用法:先将左框设置为float:left、margin-left、position:relative,再安装右父框float:right、width:百分百、margin-left,最后设置实际的右框margin-left。

(2)代码实例

JavaScript

<div class=”parent”> <div class=”left”>
<p>left</p> </div> <div class=”rigth-fix”>
<div class=”right”> <p>right</p>
<p>right</p> </div> </div> </div>

1
2
3
4
5
6
7
8
9
10
11
<div class="parent">
    <div class="left">
        <p>left</p>
    </div>
    <div class="rigth-fix">
        <div class="right">
            <p>right</p>
            <p>right</p>
        </div>
    </div>
</div>

JavaScript

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

1
2
3
4
5
6
7
8
9
10
11
12
13
.left {
    float:left;
    width:100px;
    position:relative;
}
.right-fix {
    float:right;
    width:100%;
    margin-left:-100px;
}
.right {
    margin-left:120px;
}

(3)优缺点

  • 优点:简单,易理解

4)使用table
(1)原理、用法

  • 规律:通过将父框设置为表格,将左右侧框转化为接近于同一行的td,从而达到多列布局。
  • 用法:先将父框设置为display:table、width:百分百、table-layout:fixed,再设置左右框display:table-cell,最后设置左框width、padding-right。

(2)代码实例

JavaScript

<div class=”parent”> <div class=”left”>
<p>left</p> </div> <div class=”right”>
<p>right</p> <p>right</p> </div>
</div>

1
2
3
4
5
6
7
8
9
<div class="parent">
    <div class="left">
        <p>left</p>
    </div>
    <div class="right">
        <p>right</p>
        <p>right</p>
    </div>
</div>

JavaScript

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

1
2
3
4
5
6
7
8
9
10
11
12
.parent {
    display:table;
    width:100%;
    table-layout:fixed;
}
.left {
    width:100px;
    padding-right:20px;
}
.right,.left {
    display:table-cell;    
}

(5)使用flex
(1)原理、用法

  • 原理:通过设置CSS3布局利器flex中的flex属性以高达多列布局。
  • 用法:先将父框设置为display:flex,再安装左框flex:1,最后设置左框width、margin-right。

(2)代码实例

JavaScript

<div class=”parent”> <div class=”left”>
<p>left</p> </div> <div class=”right”>
<p>right</p> <p>right</p> </div>
</div>

1
2
3
4
5
6
7
8
9
<div class="parent">
    <div class="left">
        <p>left</p>
    </div>
    <div class="right">
        <p>right</p>
        <p>right</p>
    </div>
</div>

JavaScript

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

1
2
3
4
5
6
7
8
9
10
.parent {
    display:flex;
}
.left {
    width:100px;
    margin-right:20px;
}
.right {
    flex:1;
}

JavaScript

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

1
2
3
4
5
6
7
8
9
10
.parent {
    display:flex;
}
.left {
    width:100px;
    margin-right:20px;
}
.right {
    flex:1;
}

(3)优缺点

  • 优点:flex很强大
  • 症结:包容性存在必然难点,质量存在必然难点

原理:先将子框由块级成分改变为行内块成分,再经过设置行内块成分居中以达到水平居中。

2-布局

5)使用flex+justify-content

(1)原理、用法

原理:通过CSS3中的布局利器flex中的justify-content属性来达到水平居中。

用法:先将父框设置为display:flex,再安装justify-content:center。
(2)代码实例

<div class="parent">
      <div class="child>DEMO</div>
</div>

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

(3)优缺点

优点:设置parent即可

缺点:低版本浏览器(ie6 ie7 ie8)不协理

两列定宽+一列自适应

(1)原理、用法

  • 原理:那种状态与两列定宽查不多。
  • 用法:先将左、中框设置为float:left、width、margin-right,再安装右框overflow:hidden。

(2)代码实例

JavaScript

<div class=”parent”> <div class=”left”>
<p>left</p> </div> <div class=”center”>
<p>center</p> </div> <div class=”right”>
<p>right</p> <p>right</p> </div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
<div class="parent">
    <div class="left">
        <p>left</p>
    </div>
    <div class="center">
        <p>center</p>
    </div>
    <div class="right">
        <p>right</p>
        <p>right</p>
    </div>
</div>

JavaScript

<div class=”parent”> <div class=”left”>
<p>left</p> </div> <div class=”center”>
<p>center</p> </div> <div class=”right”>
<p>right</p> <p>right</p> </div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
<div class="parent">
    <div class="left">
        <p>left</p>
    </div>
    <div class="center">
        <p>center</p>
    </div>
    <div class="right">
        <p>right</p>
        <p>right</p>
    </div>
</div>

 

用法:对子框设置display:inline-block,对父框设置text-align:center。

(一)居中布局

垂直居中

不定宽+自适应

1)使用float+overflow
(1)原理、用法

  • 规律:那种景况与两列定宽查不多。
  • 用法:先将左框设置为float:left、margin-right,再安装右框overflow:
    hidden,最后设置左框中的内容width。

(2)代码实例

JavaScript

<div class=”parent”> <div class=”left”>
<p>left</p> </div> <div class=”right”>
<p>right</p> <p>right</p> </div>
</div>

1
2
3
4
5
6
7
8
9
<div class="parent">
    <div class="left">
        <p>left</p>
    </div>
    <div class="right">
        <p>right</p>
        <p>right</p>
    </div>
</div>

JavaScript

.left{ float: left; margin-right: 20px; } .right{ overflow: hidden; }
.left p{ width: 200px; }

1
2
3
4
5
6
7
8
9
10
.left{
        float: left;
        margin-right: 20px;
    }
.right{
    overflow: hidden;
}
.left p{
    width: 200px;
}

(3)优缺点

  • 优点:简单
  • 症结:ie6下包容性存在必然难点

2)使用table
(1)原理、用法

  • 原理:通过将父框改变为表格,将左右框转换为接近于同一行的td以达到多列布局,设置父框宽度百分百,给左框子元素1个固定宽度从而实现自适应。
  • 用法:先将父框设置为display: table、width:
    百分百,再安装左、右框display: table-cell,最终设置左框width:
    0.1%、padding-right以及左框中的内容width。

(2)代码实例

JavaScript

<div class=”parent”> <div class=”left”>
<p>left</p> </div> <div class=”right”>
<p>right</p> <p>right</p> </div>
</div>

1
2
3
4
5
6
7
8
9
<div class="parent">
    <div class="left">
        <p>left</p>
    </div>
    <div class="right">
        <p>right</p>
        <p>right</p>
    </div>
</div>

JavaScript

.parent{ display: table; width: 100%; } .left,.right{ display:
table-cell; } .left{ width: 0.1%; padding-right: 20px; } .left p{
width:200px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
.parent{
    display: table; width: 100%;
    }
.left,.right{
    display: table-cell;
}
.left{
    width: 0.1%;
    padding-right: 20px;
}
.left p{
    width:200px;
}

(3)优缺点

  • 缺点:ie6 ie7不支持

3)使用flex
(1)原理、用法

  • 规律:通过安装CSS3布局利器flex中的flex属性以达到多列布局,加上给左框中的内容定宽、给右框设置flex达到不定款+自适应。
  • 用法:先将父框设置为display:flex,再设置右框flex:1,最后设置左框margin-right:20px、左框中的内容width。

(2)代码实例

JavaScript

<div class=”parent”> <div class=”left”>
<p>left</p> </div> <div class=”right”>
<p>right</p> <p>right</p> </div>
</div>

1
2
3
4
5
6
7
8
9
<div class="parent">
    <div class="left">
        <p>left</p>
    </div>
    <div class="right">
        <p>right</p>
        <p>right</p>
    </div>
</div>

JavaScript

.parent { display:flex; } .left { margin-right:20px; } .right { flex:1;
} .left p{ width: 200px; }

1
2
3
4
5
6
7
8
9
10
11
12
.parent {
    display:flex;
}
.left {
    margin-right:20px;
}
.right {
    flex:1;
}
.left p{
    width: 200px;
}

(3)优缺点

  • 优点:flex很强大
  • 缺点:包容性存在一定难点,质量存在必然难点

(2)代码实例

(水平居中)

1)使用table-cell+vertical-align

(1)原理、用法

原理:通过将父框转化为3个表格单元格呈现(类似 <td> 和
<th>),再通过安装属性,使表格单元格内容垂直居中以达到垂直居中。

用法:先将父框设置为display:table-cell,再设置vertical-align:middle。
(2)代码实例

<div class="parent">
      <div class="child>DEMO</div>
</div>

.parent{
      display:table-cell;
      vertical-align:middle; 
}

(3)优缺点

亮点:兼容性较好,ie8以上均帮忙

两列不定宽+一列自适应

(1)原理、用法

  • 原理:那一个地方与一列不定宽+一列自适应查不多。
  • 用法:先将左、中框设置为float:left、margin-right,再设置右框overflow:hidden,最后给左中框中的内容设置width。

(2)代码实例

JavaScript

<div class=”parent”> <div class=”left”>
<p>left</p> </div> <div class=”center”>
<p>center</p> </div> <div class=”right”>
<p>right</p> <p>right</p> </div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
<div class="parent">
    <div class="left">
        <p>left</p>
    </div>
    <div class="center">
        <p>center</p>
    </div>
    <div class="right">
        <p>right</p>
        <p>right</p>
    </div>
</div>

JavaScript

.left,.center{ float: left; margin-right: 20px; } .right{ overflow:
hidden; } .left p,.center p{ width: 100px; }

1
2
3
4
5
6
7
8
9
10
.left,.center{
    float: left;
    margin-right: 20px;
}
.right{
    overflow: hidden;
}
.left p,.center p{
    width: 100px;
}

<div class=”parent”>

(1)  
文字水平居中:能够将文字放置在p标签内,然后对p标签设置text-align:center;

2)使用absolute+transform

(1)原理、用法

规律:类似于水平居中时的absolute+transform原理。将子框设置为相对定位,移动子框,使子框下边距离相对框上面边框的偏离为绝对框高度的八分之四,再经过升高移动子框的二分一冲天以高达垂直居中。当然,从前,大家要求安装父框为相对固定,使父框成为子框的相对框。

用法:先将父框设置为position:relative,再设置子框position:absolute,top:四分之二,transform:translateY(-四分之二)。
(2)代码实例

<div class="parent">
        <div class="child>DEMO</div>
</div>
.parent {
            position:relative;
}
.child {
            position:absolute;
            top:50%;
            transform:translateY(-50%);
}

(3)优缺点

可取:居中成分不会对其余的发出震慑
缺点:transform属于css3内容,包容性存在一定难点,高版本浏览器供给添加一些前缀

等分布局

澳门葡京 1

公式转化:

l = w * n + g * (n-1) -> l = w * n + g * n – g -> l + g = (w

  • g) * n

澳门葡京 2

于是,大家需求化解多少个难点:

  • 什么让总拉长率扩张g(即:L+g)
  • 何以让每一个宽包括g(即:w+g)

1)使用float
(1)原理、用法

  • 规律:增大父框的莫过于增加率后,使用CSS3属性box-sizing进行布局的支持。
  • 用法:先将父框设置为margin-left: -*px,再设置子框float:
    left、width: 百分之二十五、padding-left、box-sizing: border-box。

(2)代码实例

JavaScript

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

1
2
3
4
5
6
<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>

JavaScript

.parent{ margin-left: -20px;//l增加g } .column{ float: left; width: 25%;
padding-left: 20px; box-sizing: border-box;//包含padding区域 w+g }

1
2
3
4
5
6
7
8
9
.parent{
    margin-left: -20px;//l增加g
}
.column{
    float: left;
    width: 25%;
    padding-left: 20px;
    box-sizing: border-box;//包含padding区域 w+g
}

(3)优缺点

  • 可取:包容性较好
  • 缺点:ie6 ie7百分比包容存在一定难点

2)使用table
(1)原理、用法

  • 规律:通过扩张2个父框的改进框,增大其上涨幅度,并将父框转换为table,将子框转换为tabel-cell进行布局。
  • 用法:先将父框的改进框设置为margin-left: -*px,再设置父框display:
    table、width:百分百、table-layout: fixed,设置子框display:
    table-cell、padding-left。

(2)代码实例

JavaScript

<div class=”parent-fix”> <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>

1
2
3
4
5
6
7
8
<div class="parent-fix">
    <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>

JavaScript

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

1
2
3
4
5
6
7
8
9
10
11
12
.parent-fix{
    margin-left: -20px;//l+g
}
.parent{
    display: table;
    width:100%;
    table-layout: fixed;
}
.column{
    display: table-cell;
    padding-left: 20px;//w+g
}

(3)优缺点

  • 优点:结构和块数毫无干系联
  • 缺点:增添了一层

3)使用flex
(1)原理、用法

  • 原理:通过安装CSS3布局利器flex中的flex属性以达到等分布局。
  • 用法:将父框设置为display: flex,再设置子框flex:
    1,最终设置子框与子框的距离margin-left。

(2)代码实例

JavaScript

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

1
2
3
4
5
6
<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>

JavaScript

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

1
2
3
4
5
6
7
8
9
.parent{
    display: flex;
}
.column{
    flex: 1;
}
.column+.column{
    margin-left:20px;
}

(3)优缺点

  • 可取:代码量少,与块数无关
  • 缺点:包容性存在一定难题

    <div class=”child>DEMO</div>

(2)  
图片水平居中:将图纸设置为block块状展现,然后设置margin:0
auto;或然将img标签放置在div内,然后同样地设置margin。

3)使用flex+align-items

(1)原理、用法

规律:通过设置CSS3中的布局利器flex中的属性align-times,使子框垂直居中。

用法:先将父框设置为position:flex,再设置align-items:center。
(2)代码实例

<div class="parent">
      <div class="child>DEMO</div>
</div>

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

(3)优缺点

优点:只设置parent
症结:包容性存在必然难题

定宽+自适应+两块高度一致高

1)使用float
(1)原理、用法

  • 规律:通过过度加大左右子框的惊人,扶助超出隐藏,以达到视觉上的等高。
  • 用法:将父框设置overflow: hidden,再安装左右子框padding-bottom:
    9999px、margin-bottom: -9999px,最终设置左框float:
    left、width、margin-right,右框overflow: hidden。

(2)代码实例

JavaScript

<div class=”parent”> <div class=”left”>
<p>left</p> </div> <div class=”right”>
<p>right</p> <p>right</p> </div>
</div>

1
2
3
4
5
6
7
8
9
<div class="parent">
    <div class="left">
        <p>left</p>
    </div>
    <div class="right">
        <p>right</p>
        <p>right</p>
    </div>
</div>

JavaScript

p{ background: none!important; } .left,.right{ background: #444; }
.parent{ overflow: hidden; } .left,.right{ padding-bottom: 9999px;
margin-bottom: -9999px; } .left{ float: left; width: 100px;
margin-right: 20px; } .right{ overflow: hidden; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
p{
    background: none!important;
}
.left,.right{
    background: #444;
}
.parent{
    overflow: hidden;
}
.left,.right{
    padding-bottom: 9999px;
    margin-bottom: -9999px;
}
.left{
    float: left;
    width: 100px;
    margin-right: 20px;
}
.right{
    overflow: hidden;
}

(3)优缺点

  • 优点:包容性好
  • 症结:伪等高,不是实在意义上的等高

2)使用table
(1)原理、用法

  • 原理:将父框转化为tabel,将子框转化为tabel-cell布局,以实现定宽+自适应+两块中度一致高。
  • 用法:先将父框设置为display:table、width:百分百、table-layout:fixed,再安装左右框为display:table-cell,最终设置左框width、padding-right。

(2)代码实例

JavaScript

<div class=”parent”> <div class=”left”>
<p>left</p> </div> <div class=”right”>
<p>right</p> <p>right</p> </div>
</div>

1
2
3
4
5
6
7
8
9
<div class="parent">
    <div class="left">
        <p>left</p>
    </div>
    <div class="right">
        <p>right</p>
        <p>right</p>
    </div>
</div>

JavaScript

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

1
2
3
4
5
6
7
8
9
10
11
12
.parent {
    display:table;
    width:100%;
    table-layout:fixed;
}
.left {
    width:100px;
    padding-right:20px;
}
.right,.left {
    display:table-cell;
}

3)使用flex
(1)原理、用法

  • 规律:通过安装CSS3布局利器flex中的flex属性以高达定宽+自适应+两块中度一样高。
  • 用法:将父框设置为display:
    flex,再安装左框width、margin-right,最终设置右框flex:1。

(2)代码实例

JavaScript

<div class=”parent”> <div class=”left”>
<p>left</p> </div> <div class=”right”>
<p>right</p> <p>right</p> </div>
</div>

1
2
3
4
5
6
7
8
9
<div class="parent">
    <div class="left">
        <p>left</p>
    </div>
    <div class="right">
        <p>right</p>
        <p>right</p>
    </div>
</div>

JavaScript

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

1
2
3
4
5
6
7
8
9
10
.parent {
    display:flex;
}
.left {
    width:100px;
    margin-right:20px;
}
.right {
    flex:1;
}

(3)优缺点

  • 优点:代码少,flex很强大
  • 症结:包容性存在一定问题

4)使用display
(1)原理、用法

  • 原理:通过安装display中的CSS3的-webkit-box属性以完结定宽+自适应+两块高度一致高。
  • 用法:将父框设置为display: -webkit-box、width:
    百分百,再安装左框width、margin-right,最终设置右框-webkit-box-flex:
    1。

(2)代码实例

JavaScript

<div class=”parent”> <div class=”left”>left</div>
<div class=”right”>right </div> </div>

1
2
3
4
<div class="parent">
    <div class="left">left</div>
    <div class="right">right </div>
</div>

JavaScript

.parent { width: 100%; display: -webkit-box; } .left { width:100px;
margin-right: 20px; } .right { -webkit-box-flex: 1; }

1
2
3
4
5
6
7
8
9
10
11
.parent {
    width: 100%;
    display: -webkit-box;
}
.left {
    width:100px;
    margin-right: 20px;
}
.right {
    -webkit-box-flex: 1;
}

(3)优缺点

  • 症结:包容性存在较大的题材

</div>

(3)  
定宽块状成分:设置宽高背景象,然后设置margin:0 auto;

水平垂直居中

全屏布局

.child{

(4)  
不定宽成分:方法1,将display设置为table,margin:0
auto;方法2,父成分设置text-align:center;
,子成分中设置display:inline-block;
居中剧情放在父成分或子成分都得以。方法3,position:absolute;left:二分一;transform:translateX(-四分之二);方法4,display:flex;
justify-content: center;
方法5,父成分设置float:left;position:relative;left:1/2;,子成分设置position:relative;left:-二分一;且水平居中剧情放在子成分中。

1)使用absolute+transform

(1)原理、用法
规律:将水平居中时的absolute+transform和垂直居中时的absolute+transform相结合。详见:水平居中的3)和垂直居中的2)。

见水平居中的3)和垂直居中的2)。
(2)代码实例

<div class="parent">
        <div class="child>DEMO</div>
</div>
.parent {
            position:relative;
}
.child {
            position:absolute;
            left:50%;
            top:50%;
            transform:translateY(-50%,-50%);
}

(3)优缺点

亮点:child成分不会对其他因素发生影响
症结:兼容性存在一定难点

全屏布局的性状

  • 滚动条不是大局滚动条,而是出未来内容区域里,往往是主内容区域
  • 浏览器变大时,撑满窗口

    display:inline-block;

(垂直居中)

2)使用inline-block+text-align+table-cell+vertical-align

(1)原理、用法

规律:使用inline-block+text-align水平居中,再用table-cell+vertical-align垂直居中,将二者组合起来。详见:水平居中的1)和垂直居中的1)。
(2)代码实例

<div class="parent">
        <div class="child>DEMO</div>
</div>
.parent {
            text-align:center;
            display:table-cell;
            vertical-align:middle;
}
.child {
            display:inline-block;
}

(3)优缺点

可取:包容性较好

全屏布局的主意

澳门葡京 3

1)使用position
(1)原理、用法

  • 原理:将左右部分定位,中间部分应用定宽+自适应+两块中度一致高。
  • 用法:见实例。

(2)代码实例

JavaScript

<div class=”parent”> <div class=”top”>top</div>
<div class=”left”>left</div> <div class=”right”>
<div class=”inner”>right</div> </div> <div
class=”bottom”>bottom</div> </div>

1
2
3
4
5
6
7
8
<div class="parent">
    <div class="top">top</div>
    <div class="left">left</div>
    <div class="right">
        <div class="inner">right</div>
    </div>
    <div class="bottom">bottom</div>
</div>

JavaScript

html,body,.parent{ margin:0; height:100%; overflow:hidden; } body{
color:white; } .top{ position:absolute; top:0; left:0; right:0;
height:100px; background:blue; } .left{ position:absolute; left:0;
top:100px; bottom:50px; width:200px; background:red; } .right{
position:absolute; left:200px; top:100px; bottom:50px; right:0;
background:pink; overflow: auto; } .right .inner{ min-height: 1000px; }
.bottom{ position:absolute; left:0; right:0; bottom:0; height:50px;
background: black; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
html,body,.parent{
    margin:0;
    height:100%;
    overflow:hidden;
}
body{
    color:white;
}
.top{
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:100px;
    background:blue;
}
.left{
    position:absolute;
    left:0;
    top:100px;
    bottom:50px;
    width:200px;
    background:red;
}
.right{
    position:absolute;
    left:200px;
    top:100px;
    bottom:50px;
    right:0;
    background:pink;
    overflow: auto;
}
.right .inner{
    min-height: 1000px;
}
.bottom{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:50px;
    background: black;
}

(3)优缺点

  • 亮点:兼容性好,ie6下不扶助

2)使用flex
(1)原理、用法

  • 规律:通过灵活运用CSS3布局利器flex中的flex属性和flex-direction属性以达到全屏布局。
  • 用法:见实例。

(2)代码实例

JavaScript

<div class=”parent”> <div class=”top”>top</div>
<div class=”middle”> <div class=”left”>left</div>
<div class=”right”> <div class=”inner”>right</div>
</div> </div> <div class=”bottom”>bottom</div>
</div>

1
2
3
4
5
6
7
8
9
10
<div class="parent">
    <div class="top">top</div>
    <div class="middle">
        <div class="left">left</div>
        <div class="right">
            <div class="inner">right</div>
        </div>
    </div>
    <div class="bottom">bottom</div>
</div>

JavaScript

html,body,.parent{ margin:0; height:100%; overflow:hidden; } body{
color: white; } .parent{ display: flex; flex-direction: column; } .top{
height:100px; background: blue; } .bottom{ height:50px; background:
black; } .middle{ flex:1; display:flex; } .left{ width:200px;
background: red; } .right{ flex: 1; overflow: auto; background:pink; }
.right .inner{ min-height: 1000px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
html,body,.parent{
    margin:0;
    height:100%;
    overflow:hidden;
}
body{
    color: white;
}
.parent{
    display: flex;
    flex-direction: column;
}
.top{
    height:100px;
    background: blue;
}
.bottom{
    height:50px;
    background: black;
}
.middle{
    flex:1;
    display:flex;
}
.left{
    width:200px;
    background: red;
}
.right{
    flex: 1;
    overflow: auto;
    background:pink;
}
.right .inner{
    min-height: 1000px;
}

(3)优缺点

  • 缺陷:包容性差,ie9及ie9以下分裂盟澳门葡京 4

1)使用flex
(1)原理、用法

  • 规律:通过灵活利用CSS3布局利器flex中的flex属性和flex-direction属性以达到全屏布局。
  • 用法:见实例。

(2)代码实例

JavaScript

<div class=”parent”> <div class=”top”>top</div>
<div class=”middle”> <div class=”left”>left</div>
<div class=”right”> <div class=”inner”>right</div>
</div> </div> <div class=”bottom”>bottom</div>
</div>

1
2
3
4
5
6
7
8
9
10
<div class="parent">
    <div class="top">top</div>
    <div class="middle">
        <div class="left">left</div>
        <div class="right">
            <div class="inner">right</div>
        </div>
    </div>
    <div class="bottom">bottom</div>
</div>

JavaScript

html,body,.parent{ margin:0; height:100%; overflow:hidden; } body{
color:white; } .parent{ display:flex; flex-direction:column; } .top{
background:blue; } .bottom{ background:black; } .middle{ flex:1;
display:flex; } .left{ background: red; } .right{ flex:1; overflow:auto;
background: pink; } .right .inner{ min-height:1000px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
html,body,.parent{
    margin:0;
    height:100%;
    overflow:hidden;
}
body{
    color:white;
}
.parent{
    display:flex;
    flex-direction:column;
}
.top{
    background:blue;
}
.bottom{
    background:black;
}
.middle{
    flex:1;
    display:flex;
}
.left{
    background: red;
}
.right{
    flex:1;
    overflow:auto;
    background: pink;
}
.right .inner{
    min-height:1000px;
}

}

(1)  
单元格中内容:直接设置vetical-align:middle;

3)使用flex+justify-content+align-items

(1)原理、用法

规律:通过安装CSS3布局利器flex中的justify-content和align-items,从而达成水平垂直居中。详见:水平居中的4)和垂直居中的3)。
(2)代码实例

<div class="parent">
        <div class="child>DEMO</div>
</div>
.parent {
            display:flex;
            justify-content:center;
            align-items:center;
}

(3)优缺点

优点:只设置了parent
症结:包容性存在必然难题

全屏布局相关方案的兼容性、质量和自适应一览表

方案 兼容性 性能 是否自适应
Position 部分自适应
Flex 较差 可自适应
Grid 较好 可自适应

自然,最最最最末尾,若是你喜欢那片作品,能够疯狂点赞和收藏喔!!

 

1 赞 5 收藏
评论

澳门葡京 5

.parent{

(2)  
定宽成分:单行文本:垂直居中的方法是由此安装父成分的 height 和
line-height 中度一致来落实height:100px;line-height: 100px;

多列布局

    text-align:center;

(3)  
不定宽成分:方法1,position: absolute;top:四分之二;transform:
translateY(-二分之一); 方法2,<div
><div>awdfad</div></div>I E9以上。

定宽+自适应

}

(水平垂直居中)

1)使用float+overflow

(1)原理、用法

规律:通过将左手框脱离文本流,设置左侧规定当内容溢出成分框时发生的事情以完成多列布局。

用法:先将左框设置为float:left、width、margin-left,再设置实际的右框overflow:hidden。
(2)代码实例

<div class="parent">
        <div class="left">
                <p>left</p>
        </div>
        <div class="right">
                <p>right</p>
                <p>right</p>
        </div>
</div>
.left {
        float:left;
        width:100px;
        margin-right:20px;
}
.right {
        overflow:hidden;
}

(3)优缺点
优点:简单
缺点:不支持ie6

(3)优缺点

(1)  
定宽成分:width:100px; height:80px; position:absolute; left:3/6;
top:50%; margin:-40px 0 0 -50px; background-color: blanchedalmond;
要让DIV水平和垂直居中,必需知道该DIV得宽度和可观,然后设置职务为相对地点,距离页面窗口左边框和上边框的相距设置为八分之四,这一个四分之二正是指页面窗口的宽度和可观的二分一,最后将该DIV分别左移和前进,左移和进化的高低就是该DIV宽度和惊人的四分之二。

2)使用float+margin

(1)原理、用法

规律:通过将左框脱离文本流,加上右框向右移动一定的相距,以达到视觉上的多列布局。

用法:先将左框设置为float:left、margin-left,再设置右框margin-left。
(2)代码实例

<div class="parent">
        <div class="left">
                <p>left</p>
        </div>
        <div class="right">
                <p>right</p>
                <p>right</p>
        </div>
</div>
.left {
        float:left;
        width:100px;
}
.right {
        margin-left:120px;
}

(3)优缺点

优点:简单,易理解

缺陷:包容性存在必然难点,ie6下有3px的bug。right下的p清除浮动将发出bug

亮点:包容性好,甚至足以包容ie陆 、ie7

(2)  
不定宽成分:方法1,position: absolute;left:5/10;top:一半;transform:
translate(-四分之二,-3/6); 。(IE9以上包容,适合移动端)方法2,display:
flex;justify-content: center;align-items:
center;(IE9以上包容,适合移动端,测试有题目)。方法3,<div
><div >sdscsddd</div></div> (测试不正常)

3)使用float+margin(改良版)

(1)原理、用法

规律:在1)的功底之上,通过向右框添加四个父框,再加上设置左、右父框属性使之产生BFC以去除bug。

用法:先将左框设置为float:left、margin-left、position:relative,再安装右父框float:right、width:百分之百、margin-left,最终设置实际的右框margin-left。
(2)代码实例

<div class="parent">
        <div class="left">
                <p>left</p>
        </div>
        <div class="rigth-fix">
                <div class="right">
                        <p>right</p>
                        <p>right</p>
                </div>
        </div>
</div>
.left {
        float:left;
        width:100px;
        position:relative;
}
.right-fix {
        float:right;
        width:100%;
        margin-left:-100px;
}
.right {
        margin-left:120px;
}

(3)优缺点

优点:简单,易理解

缺陷:child里的文字也会水平居中,能够在.child添加text-align:left;还原

Js完成程度垂直居中:(IE中得以,Chrome只是垂直居中)

4)使用table

(1)原理、用法

原理:通过将父框设置为表格,将左右侧框转化为接近于同一行的td,从而实现多列布局。

用法:先将父框设置为display:table、width:百分百、table-layout:fixed,再设置左右框display:table-cell,最终设置左框width、padding-right。
(2)代码实例

<div class="parent">
        <div class="left">
                <p>left</p>
        </div>
        <div class="right">
                <p>right</p>
                <p>right</p>
        </div>
</div>
.parent {
        display:table;
        width:100%;
        table-layout:fixed;
}
.left {
        width:100px;
        padding-right:20px;
}
.right,.left {
        display:table-cell; 
}

2)使用table+margin

<!DOCTYPE
html>

<html>
<head
lang=”en”>

    <meta
charset=”UTF-8″>

   
<title></title>

    <script
type=”text/javascript”
src=”../js/jquery-3.1.1.min.js”></script>

</head>
<body>
<script
type=”text/javascript”>

  
$(window).resize(function(){

      
$(“.mydiv”).css({

          
position:”absolute”,

布局化解方案,前端知识小总计2。          
left:($(window).width()-$(“.mydiv”).outerWidth())/2,

          
top:($(window).height()-$(“.mydiv”).outerHeight())/2,

      
});

   });
   
$(function(){

       
$(window).resize();

    })
</script>
</body>
</html>

5)使用flex

(1)原理、用法

原理:通过安装CSS3布局利器flex中的flex属性以达成多列布局。

用法:先将父框设置为display:flex,再设置左框flex:1,最终设置左框width、margin-right。
(2)代码实例

<div class="parent">
        <div class="left">
                <p>left</p>
        </div>
        <div class="right">
                <p>right</p>
                <p>right</p>
        </div>
</div>
.parent {
        display:flex;
}
.left {
        width:100px;
        margin-right:20px;
}
.right {
        flex:1;
}

(3)优缺点

优点:flex很强大

缺点:包容性存在一定难题,品质存在必然难点

(1)原理、用法

(二)多列布局

两列定宽+一列自适应

(1)原理、用法

规律:那种场所与两列定宽查不多。

用法:先将左、中框设置为float:left、width、margin-right,再安装右框overflow:hidden。
(2)代码实例

<div class="parent">
        <div class="left">
                <p>left</p>
        </div>
        <div class="center">
                <p>center</p>
        </div>
        <div class="right">
                <p>right</p>
                <p>right</p>
        </div>
 </div>

.left,.center {
        float:left;
        width:100px;
        margin-right:20px;
}
.right {
    overflow:hidden;
}

原理:先将子框设置为块级表格来呈现(类似
<table>),再设置子框居中以高达水平居中。

(一列定宽+一列自适应)

不定宽+自适应

用法:对子框设置display:table,再安装margin:0 auto。

(1)float+margin:右侧左浮动,右侧的左外边界与左侧成分宽度一致。
    <style
type=”text/css”>

       
.left{

           
float:left;

           
width:100px;

           
background-color: antiquewhite;

        }
       
.right{

           
margin-left:100px;

 
          background-color: aqua;

        }
   
</style>

1)使用float+overflow

(1)原理、用法

规律:那种情状与两列定宽查不多。

用法:先将左框设置为float:left、margin-right,再设置右框overflow:
hidden,最后设置左框中的内容width。
(2)代码实例

<div class="parent">
        <div class="left">
                <p>left</p>
        </div>
        <div class="right">
                <p>right</p>
                <p>right</p>
        </div>
 </div>

.left {
        float:left;
        margin-right:20px;
}
.right {
        overflow:hidden;
}
.left p{
        width:200px;
}

(3)优缺点

优点:简单

缺点:ie6下包容性存在必然难点

(2)代码实例

<body>
<div>
    <div
class=”left”><p>left</p></div>

    <div
class=”right”><p>right</p><p>right</p></div>

</div>
</body>

2)使用table

(1)原理、用法

原理:通过将父框改变为表格,将左右框转换为接近于同一行的td以高达多列布局,设置父框宽度百分百,给左框子成分1个固定宽度从而达成自适应。

用法:先将父框设置为display: table、width: 百分百,再设置左、右框display:
table-cell,最终设置左框width:
0.1%、padding-right以及左框中的内容width。
(2)代码实例

<div class="parent">
        <div class="left">
                <p>left</p>
        </div>
        <div class="right">
                <p>right</p>
                <p>right</p>
        </div>
 </div>
.parent{
        display:table;
        width:100%;
}
.left,right {
        display: table-cell;
}
.left {
        width: 0.1%;
        padding-right:20px;
}
.left p{
        width:200px;
}

(3)优缺点

缺点:ie6 ie7不支持

<div class=”parent”>

(2)float+overflow:右边元素左浮动,并安装宽度,及右外边界为0;右侧元素设置overflow属性,值为hidden。

3)使用flex

(1)原理、用法

原理:通过设置CSS3布局利器flex中的flex属性以实现多列布局,加上给左框中的内容定宽、给右框设置flex达到不定款+自适应。

用法:先将父框设置为display:flex,再安装右框flex:1,最终设置左框margin-right:20px、左框中的内容width。

(2)代码实例

<div class="parent">
        <div class="left">
                <p>left</p>
        </div>
        <div class="right">
                <p>right</p>
                <p>right</p>
        </div>
 </div>
.parent{
        display:flex;
}
.left{
        margin-right:20px;
}
.right {
        flex:1;
}
.left p{
        width:200px;
}

(3)优缺点

优点:flex很强大

缺陷:兼容性存在一定难点,性能存在必然难点

    <div class=”child>DEMO</div>

    <style type="text/css"> 
        .left{ 
            float:left; 
            width:100px; 
            background-color: antiquewhite; 
            margin-right:0px; 
        } 
        .right{ 
            overflow:hidden; 
            background-color: aqua; 
        } 
    </style> 

<body> 
<div> 
    <div class="left"><p>left</p></div> 
    <div class="right"><p>right</p><p>right</p></div> 
</div> 
</body> 
ps:overflow属性规定当内容溢出时元素框发生的事情。其属性值有:visible(默认值,内容不会被裁剪,会呈现在元素框之外)、hidden(内容会被裁剪,且其余内容是不可见的)、scroll(内容会被裁剪,但浏览器会显示滚动条以方便查看其余内容)、auto(如果内容被裁剪,则浏览器会显示滚动条方便查看其余内容)、inherit(规定从父元素继承overflow属性值)。
两列不定宽+一列自适应

(1)原理、用法

原理:那么些情况与一列不定宽+一列自适应查不多。

用法:先将左、中框设置为float:left、margin-right,再设置右框overflow:hidden,最后给左中框中的内容设置width。

(2)代码实例

<div class="parent">
        <div class="left">
                <p>left</p>
        </div>
        <div class="center">
                <p>center</p>
        </div>
        <div class="right">
                <p>right</p>
                <p>right</p>
        </div>
 </div>

.left,.center {
        float:left;
        margin-right:20px;
}
.right {
        overflow:hidden;
}
.left p, .right p{
        width:100px;
}

</div>

(3)flex:父成分设置display:flex;左侧设置宽度和右外边界margin为0,;右成分设置flex为1。
    <style
type=”text/css”>

      
.parent{

           display:
flex;

          
display:-webkit-box;

       }
       
.left{

           
width:100px;

           
background-color: antiquewhite;

           
margin-right:0px;

        }
       
.right{

            flex:
1;

           
-webkit-box:1;

           
background-color: aqua;

        }
   
</style>

<div
class=”parent”>

    <div
class=”left”><p>left</p></div>

    <div
class=”right”><p>righsddst</p><p>risdfddsssdght</p></div>

</div>

等分布局

.child {

1)使用float

(1)原理、用法

规律:增大父框的其实增进率后,使用CSS3属性box-sizing实行布局的帮扶。

用法:先将父框设置为margin-left: -*px,再设置子框float: left、width:
四分一、padding-left、box-sizing: border-box。

(2)代码实例

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

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

(3)优缺点

亮点:包容性较好
缺陷:ie6 ie7百分比包容存在必然难题

    display:table;

    <style
type=”text/css”>

       
.mydiv{

           
display:flex;//Opera12.1,Firefox20+,

           
display:-webkit-box;//Safari3.1-6,iOS 6-

           
display:-moz-box;// IE9-,

           
display:-ms-flexbox;//IE10,

           
display:-webkit-flex;//Chrome

       
    height:60px;

        }
        .mydiv
div{

           
background-color: blue;

            flex:1;
//Opera12.1,Firefox20+,

           
-webkit-box-flex:1; //Safari3.1-6,iOS 6-

           
-moz-box-flex:1; // IE9-,

           
-webkit-flex:1; //Chrome

           
-ms-flex:1; //IE10

2)使用table

(1)原理、用法

原理:通过扩张一个父框的改正框,增大其调幅,并将父框转换为table,将子框转换为tabel-cell进行布局。

用法:先将父框的改良框设置为margin-left: -*px,再安装父框display:
table、width:百分百、table-layout: fixed,设置子框display:
table-cell、padding-left。

(2)代码实例

<div class="parent-fix">
        <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>
.parent-fix{
        margin-left: -20px;
}
.parent{
        display: table;
        width:100%;
        table-layout: fixed;
}
.column{
        display: table-cell;
        padding-left: 20px;
}

(3)优缺点

亮点:结构和块数无涉及
缺陷:扩大了一层

    margin:0 auto;

        }
        .mydiv
div+div{

           
margin-left:10px;

        }
   
</style>

<div
class=”mydiv”>

    <div
class=”div1″>1</div>

    <div
class=”div2″>2</div>

    <div
class=”div3″>3</div>

    <div
class=”div4″>4</div>

</div>

3)使用flex

(1)原理、用法

原理:通过设置CSS3布局利器flex中的flex属性以高达等分布局。

用法:将父框设置为display: flex,再设置子框flex:
1,最终设置子框与子框的区间margin-left。

(2)代码实例

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

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

(3)优缺点

亮点:代码量少,与块数非亲非故

缺陷:包容性存在必然难题

}

ps:chrome52.0、IE11、Firefox48.0、Opera44.0、
Safari5.1.7

定宽+自适应+两块中度一致高

(3)优缺点:

(多列定宽+一列自适应)

1)使用float

(1)原理、用法

规律:通过过度加大左右子框的万丈,帮助超出隐藏,以达到视觉上的等高。

用法:将父框设置overflow: hidden,再设置左右子框padding-bottom:
9999px、margin-bottom: -9999px,最终设置左框float:
left、width、margin-right,右框overflow: hidden。

(2)代码实例

<div class="parent">
        <div class="left">
                <p>left</p>
        </div>
        <div class="right">
                <p>right</p>
                <p>right</p>
        </div>
 </div>
p{
        background: none!important;
}
.parent{
        overflow: hidden;
}
.left,.right{
        padding-bottom: 9999px;
        margin-bottom: -9999px;
}
.left{
        float: left; 
        width:100px;
        margin-right: 20px;
}
.right {
        overflow: hidden;
}

(3)优缺点

亮点:包容性好

症结:伪等高,不是的确含义上的等高

亮点:只设置了child,ie8以上都援救

定宽列样式基本相同。

2)使用table

(1)原理、用法

原理:将父框转化为tabel,将子框转化为tabel-cell布局,以达到定宽+自适应+两块高度一致高。

用法:先将父框设置为display:table、width:百分百、table-layout:fixed,再安装左右框为display:table-cell,最终设置左框width、padding-right。

(2)代码实例

<div class="parent">
        <div class="left">
                <p>left</p>
        </div>
        <div class="right">
                <p>right</p>
                <p>right</p>
        </div>
 </div>

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

缺点:不支持ie6、ie7,将div换成table

(1)float+overflow:

3)使用flex

(1)原理、用法

原理:通过设置CSS3布局利器flex中的flex属性以高达定宽+自适应+两块中度一致高。

用法:将父框设置为display:
flex,再安装左框width、margin-right,最终设置右框flex:1。

(2)代码实例

<div class="parent">
        <div class="left">
                <p>left</p>
        </div>
        <div class="right">
                <p>right</p>
                <p>right</p>
        </div>
 </div>

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

(3)优缺点

优点:代码少,flex很强大

缺陷:包容性存在一定难点

3)使用absolute+transform

    <style
type=”text/css”>

       
.left,.center{

            float:
left;

           
width:100px;

           
background-color: antiquewhite;

           
margin-right:0px;

        }
       
.right{

           
overflow: hidden;

           
background-color: aqua;

        }
   
</style>

<div
class=”parent”>

    <div
class=”left”><p>left</p></div>

    <div
class=”center”><p>center</p></div>

    <div
class=”right”><p>righsddst</p><p>risdfddsssdght</p></div>

</div>

全屏布局

(1)原理、用法

(一列不定宽+一列自适应)

全屏布局的特点

滚动条不是全局滚动条,而是出今后剧情区域里,往往是主内容区域
浏览器变大时,撑满窗口

规律:将子框设置为相对定位,移动子框,使子框左边距离绝对框左侧边框的偏离为相对框宽度的5/10,再经过向左移动子框的二分之一增幅以达到水平居中。当然,从前,我们必要安装父框为相对稳定,使父框成为子框的相对框。

(1)float+overflow:左边左浮动,左边overflow为hidden。

全屏布局的艺术

澳门葡京 6

用法:对父框设置position:relative,对子框设置position:absolute,left:5/10,transform:translateX(-3/6)。

    <style
type=”text/css”>

       
.left{

           
float:left;

           
background-color: antiquewhite;

           
margin-right:0px;

        }
       
.right{

           
overflow: hidden;

           
background-color: aqua;

        }
   
</style>

1)使用position

(1)原理、用法

规律:将左右部分定位,中间有些应用定宽+自适应+两块中度一致高。

用法:见实例。

(2)代码实例

<div class="parent">
        <div class="top">top</div>
        <div class="left">left</div>
        <div class="right">
                <div class="inner">right</div>
        </div>
        <div class="bottom">bottom</div>
</div>
html,body,.parent{
        margin:0;
        height:100%;
        overflow:hidden;
}
body{
        color:white;
}
.top{
       position:absolute;
       top:0;
       left:0;
       rigth:0;
       height:100px;
       background:blue;
}
.left{
       position:absolute;
       top:100px;
       left:0;
       bottom:50px;
       width:200px;
       background:red;
}
.right{
       position:absolute;
       top:100px;
       left:200px;
       bottom:50px;
       right:0;
       width:200px;
       background:pink;
       overflow: auto;
}
.right .inner{
        min-height:1000px;
}
.bottom{
       position:absolute;
       bottom:0;
       left:0;
       rigth:0;
       height:50px;
       background:black;
}

(3)优缺点

可取:包容性好,ie6下不援助

(2)代码实例

<body>
<div
class=”parent”>

    <div
class=”left”><p>leftleft</p></div>

    <div
class=”right”><p>righsddst</p><p>risdfddsssdght</p></div>

</div>

2)使用flex

(1)原理、用法

原理:通过灵活利用CSS3布局利器flex中的flex属性和flex-direction属性以实现全屏布局。

用法:见实例。

(2)代码实例

<div class="parent">
        <div class="top">top</div>
        <div class="middle">
               <div class="left">left</div>
               <div class="right">
                        <div class="inner">right</div>
               </div>
        </div>
        <div class="bottom">bottom</div>
</div>
html,body,.parent{
        margin:0;
        height:100%;
        overflow:hidden;
}
body{
        color:white;
}
.parent{
        display: flex;
        flex-direction: column;
}
.top{
       height:100px;
       background:blue;
}
.bottom{
       height:50px;
       background:black;
}
.middle{
        flex:1;
}
.left{
        width:200px;
        background: red;
}
.right{
        flex:1;
        overflow: auto;
        background:pink;
}
.right .inner{
        min-height: 1000px;
}

(3)优缺点

缺陷:兼容性差,ie9及ie9以下不协作

<div class=”parent”>

(2)flex:父成分display设为flex;左成分设置右外边界为0,右成分flex为1

全屏布局相关方案的包容性、质量和自适应一览表
方案 兼容性 性能 是否自适应
Position 部分自适应
Flex 较差 可自适应
Grid 较好 可自适应

    <div class=”child>DEMO</div>

  <style
type=”text/css”>

       
.parent{

            display:
flex;

            display:
-webkit-box;

        }
       
.left{

</div>

           
background-color: antiquewhite;

           
margin-right:0px;

        }
       
.right{

           
flex:1;

           
-webkit-box:1;

           
background-color: aqua;

        }
   
</style>

</head>
<body>
<div
class=”parent”>

    <div
class=”left”><p>leftleft</p></div>

    <div
class=”right”><p>righsddst</p><p>risdfddsssdght</p></div>

</div>

.parent {

(多列不定宽+一列自适应)

    position:relative;

 
跟不定宽一列样式基本相同。

}

(1)float+overflow:

.child {

    <style
type=”text/css”>

       
.left{

            float:
left;

           
background-color: antiquewhite;

           
margin-right:0px;

        }
       
.center{

            float:
left;

           
background-color: aquamarine;

           
margin-right:0;

        }
       
.right{

           
overflow: hidden;

           
background-color: aqua;

        }
   
</style>

    position:absolute;

<div
class=”parent”>

    <div
class=”left”><p>left</p></div>

    <div
class=”center”><p>center</p></div>

    <div
class=”right”><p>righsddst</p><p>risdfddsssdght</p></div>

</div>

    left:50%;

(三)等列布局

    transform:translateX(-50%);

(1)flex:

}

    <style
type=”text/css”>

       
.mydiv{

           
display:flex;

           
display:-webkit-box;

           
height:60px;

        }
        .mydiv
div{

           
background-color: blue;

           
flex:1;

           
-webkit-box:1;

        }
        .mydiv
div+div{

           
margin-left:10px;

        }
   
</style>

(3)优缺点

<div
class=”mydiv”>

    <div
class=”div1″>1</div>

    <div
class=”div2″>2</div>

    <div
class=”div3″>3</div>

    <div
class=”div4″>4</div>

</div>
(2)float+margin-left:

可取:居中成分不会对其他的发出震慑

  <style
type=”text/css”>

       
.div1{

           
float:left;

           
background-color: aqua;

           
width:100px;

        }
       
.div2{

           
float:left;

           
margin-left:6px;

           
background-color: antiquewhite;

           
width:100px;

        }
     
.div3{

         
float:left;

         
margin-left:6px;

         
background-color: blueviolet;

         
width:100px;

      }
     
.div4{

         
float:left;

         
margin-left:6px;

         
background-color: chartreuse;

         
width:100px;

      }
 
    </style>

<div
class=”mydiv”>

    <div
class=”div1″>1</div>

    <div
class=”div2″>2</div>

    <div
class=”div3″>3</div>

    <div
class=”div4″>4</div>

</div>

缺陷:transform属于css3内容,包容性存在一定难点,高版本浏览器要求加上一些前缀

(3)百分比

4)使用flex+margin

<style
type=”text/css”>

       
.div1{

           
background-color: chartreuse;

           
float:left;

           
width:20%;

        }
       
.div2{

           
background-color: aqua;

           
margin-left:6.6%;

           
float:left;

     
      width:20%;

        }
       
.div3{

           
background-color: blueviolet;

           
margin-left:6.6%;

           
float:left;

           
width:20%;

        }
      
.div4{

           
background-color: coral;

           
margin-left:6.6%;

   
        float:left;

           
width:20%;

澳门葡京 ,        }
   
</style>

<div
class=”mydiv”>

    <div
class=”div1″>1</div>

    <div
class=”div2″>2</div>

    <div
class=”div3″>3</div>

    <div
class=”div4″>4</div>

</div>

(1)原理、用法

原理:通过CSS3中的布局利器flex将子框转换为flex
item,再设置子框居中以高达居中。

  <style
type=”text/css”>

      
.div1{

          
background-color: chartreuse;

          
float:left;

          
width:25%;

       }
      
.div2{

          
background-color: aqua;

          
/\margin-left:6.6%;*/
          * float:left;

          
width:25%;

       }
      
.div3{

          
background-color: blueviolet;

          
/\margin-left:6.6%;*/
          * float:left;

          
width:25%;

       }
      
.div4{

          
background-color: coral;

          
/\margin-left:6.6%;*/
          * float:left;

          
width:25%;

       }
   
</style>

<div
class=”mydiv”>

    <div
class=”div1″>1</div>

    <div
class=”div2″>2</div>

    <div
class=”div3″>3</div>

    <div
class=”div4″>4</div>

</div>

用法:先将父框设置为display:flex,再设置子框margin:0 auto。

(2)代码实例

<style
type=”text/css”>

      
.mydiv{

          
margin-left:-20px;

       }
       
.div1{

           
background-color: chartreuse;

           
float:left;

           
width:25%;

           
padding-left:20px;

           
box-sizing:border-box;

        }
       
.div2{

           
background-color: aqua;

           
float:left;

           
width:25%;

           
padding-left:20px;

           
box-sizing:border-box;

        }
       
.div3{

           
background-color: blueviolet;

           
float:left;

           
width:25%;

           
padding-left:20px;

           
box-sizing:border-box;

        }
       
.div4{

           
background-color: coral;

           
float:left;

           
width:25%;

           
padding-left:20px;

           
box-sizing:border-box;

        }
   
</style>

<div
class=”mydiv”>

    <div
class=”div1″>1</div>

    <div
class=”div2″>2</div>

    <div
class=”div3″>3</div>

    <div
class=”div4″>4</div>

</div>

<div class=”parent”>

    <div class=”child>DEMO</div>

    <style
type=”text/css”>

        
.div1{

          
background-color: aqua;

           
float:left;

           
width:calc(25% – 15px);

           
width:-webkit-calc(25% – 15px);

           
width:-moz-calc(25% – 15px);

     
        }

       
.div2{

           
float:left;

           
margin-left:20px;

           
background-color: antiquewhite;

           
width:calc(25% – 15px);

           
width:-webkit-calc(25% – 15px);

           
width:-moz-calc(25% – 15px);

</div>

        }
       
.div3{

           
float:left;

           
margin-left:20px;

           
background-color: blue;

           
width:calc(25% – 15px);

           
width:-webkit-calc(25% – 15px);

           
width:-moz-calc(25% – 15px);

        }
       
.div4{

           
float:left;

           
margin-left:20px;

           
background-color: cyan;

           
width:calc(25% – 15px);

           
width:-webkit-calc(25% – 15px);

           
width:-moz-calc(25% – 15px);

        }
   
</style>

<div
class=”mydiv”>

    <div
class=”div1″><p>1</p></div>

    <div
class=”div2″><p>1</p></div>

    <div
class=”div3″><p>1</p></div>

    <div
class=”div4″><p>1</p></div>

</div>

.parent {

Ps:Safari5.1.7不支持calc()

    display:flex;

Ps:calc():能够计算成分的尺寸,能够行使比例、em、px、rem等。Width:calc(表明式);能够因而+、-、*、/运算符;能够运用比例、px、em、rem;运算符+、-其前后必须有空格。

}

Ps:box-sizing属性值有content-box/border-box/inherit。个中,content-box,宽度和惊人分别使用到成分的内容框,在拉长率和冲天之外绘制成分的内边距和边框。border-box为元素设定的上涨幅度和惊人决定了成分的边框盒,即为成分内定的其余内边距和边框都将在已设定的大幅度和冲天内展开绘图,通过从已设定的宽度和惊人分别削减边框和内边距才能博取内容的幅度和可观。inherit规定从父成分继承bo-sizing属性值。

.child {

(四)内容分歧时,背景等高

    margin:0 auto;

(1)flex:暗许等高

}

    <style
type=”text/css”>

       
.parent{

           
display:flex;

        }
       
.left{

           
width:100px;

          
 background-color: blueviolet;

        }
       
.right{

           
flex:1;

           
background-color: antiquewhite;

        }
   
</style>

(3)优缺点

<div
class=”parent”>

    <div
class=”left”>

       
<p>left</p>

   
</div>

    <div
class=”right”>

       
<p>right</p>

       
<p>right</p>

   
</div>

</div>

缺陷:低版本浏览器(ie6 ie7 ie8)不帮忙

(2)float伪等高

5)使用flex+justify-content

<style
type=”text/css”>

       
.parent{

           
overflow:hidden;

        }
       
.left,.right{

           
padding-bottom:9999px;

           
margin-bottom:-9999px;

        }
       
.left{

           
float:left;

           
width:100px;

           
margin-right:6px;

           
background-color: coral;

        }
       
.right{

           
overflow: hidden;

           
background-color: aquamarine;

        }
   
</style>

<div
class=”parent”>

    <div
class=”left”>

       
<p>left</p>

   
</div>

    <div
class=”right”>

       
<p>right</p>

       
<p>right</p>

   
</div>

</div>

(1)原理、用法

3-盒子模型

规律:通过CSS3中的布局利器flex中的justify-content属性来实现水平居中。

网页中的成分得以看做贰个盒子模型,而盒子模型包含content/padding/border/margin/四有个别。盒子模型首要有两类,即W3C盒子模型和IE盒子模型。在那之中,W3C盒子模型加以的width不包涵padding/border;而IE盒子模型的加以的width已经包括padding/border。height类似。

用法:先将父框设置为display:flex,再设置justify-content:center。

eg.三个盒子模型margin为20px,border为1px,padding为10px,content宽为200px,高为50px。

(2)代码实例

  • 假诺用W3C盒子模型解释,则这几个盒子须要占用的任务为宽:200+10*2+1*2+20*2=262px,高为:50+10*2+1*2+20*2=12px,盒子的实际尺寸为:宽200+10*2+1*2=222px,高50+10*2+1*2=72px。
  • 一经用IE盒子模型解释,则那些盒子须求占用的岗位为宽:200+20*2=240px,高为:50+20*2=70px;盒子的骨子里尺寸:宽200px,高50px。

<div class=”parent”>

4-包容性难题

    <div class=”child>DEMO</div>

Safari
5.1.7不支持calc(),而flex需要css hack解决

</div>

5-H5 canvas

.parent {

<canvas>
标签定义图形,比如图片和其余图像。<canvas>
标签只是图形容器,您必须采纳脚本来绘制图形。

    display:flex;

 
canvas成分绘制图像的二种艺术:context.fill()//填充
context.stroke()//绘制边框

    justify-content:center;

 绘图的样式:context.fillStyle//填充的样式
context.strokeStyle//边框样式

}

 context.lineWidth//图形边框宽度

(3)优缺点

eg.

优点:设置parent即可

矩形:

<canvas id="myCanvas"></canvas>

症结:低版本浏览器(ie6 ie7 ie8)不协助

<script
type=”text/javascript”>

笔直居中

var
canvas=document.getElementById(‘myCanvas’);

1)使用table-cell+vertical-align

var
ctx=canvas.getContext(‘2d’);

(1)原理、用法

ctx.fillStyle=’blue’;

原理:通过将父框转化为三个表格单元格展现(类似 <td> 和
<th>),再通过安装属性,使表格单元格内容垂直居中以达到垂直居中。

ctx.fillRect(0,0,60,66);

用法:先将父框设置为display:table-cell,再安装vertical-align:middle。

</script>

(2)代码实例

圆:

<div class=”parent”>

var
c=document.getElementById(“myCanvas”);

    <div class=”child>DEMO</div>

var
cxt=c.getContext(“2d”);

</div>

cxt.fillStyle=”#FF0000″;

.parent {

cxt.beginPath();

    display:table-cell;

cxt.arc(70,18,15,0,Math.PI*2,true);

    vertical-align:middle;

cxt.closePath();

}

cxt.fill();

(3)优缺点

 

可取:兼容性较好,ie8以上均援救

线条:

2)使用absolute+transform

var
c=document.getElementById(“myCanvas”);

(1)原理、用法

var
cxt=c.getContext(“2d”);

原理:类似于水平居中时的absolute+transform原理。将子框设置为相对定位,移动子框,使子框上面距离相对框上边边框的离开为相对框高度的五成,再经过发展移动子框的一半可观以达成垂直居中。当然,在此之前,我们必要安装父框为绝对固化,使父框成为子框的相对框。

cxt.moveTo(10,10);//定义线条起先坐标

用法:先将父框设置为position:relative,再设置子框position:absolute,top:四分之二,transform:translateY(-贰分一)。

cxt.lineTo(150,50);//定义线条截止坐标

(2)代码实例

cxt.lineTo(10,50);

<div class=”parent”>

cxt.stroke();//stroke()方法绘制线条

    <div class=”child>DEMO</div>

渐变色:

</div>

创制渐变线条:createLinerGradient(x,y,x1,y1)

.parent {

开创三个朝着/圆渐变:createRadialGradient(x,y,r,x1,y1,r1);

    position:relative;

 

}

//创立二个线性渐变,使用渐变填充矩形

.child {

var
c=document.getElementById(“myCanvas”);

    position:absolute;

var
cxt=c.getContext(“2d”);

    top:50%;

 

    transform:translateY(-50%);

//创立渐变

}

var
grd=cxt.createLinearGradient(0,0,175,50);//渐变色

(3)优缺点

grd.addColorStop(0,”#FF0000″);
//钦定颜色结束,参数用坐标描述,0至1.

亮点:居中成分不会对其他的产生潜移默化

grd.addColorStop(1,”#00FF00″);

缺陷:transform属于css3内容,包容性存在一定难题,高版本浏览器须要丰裕一些前缀

 

3)使用flex+align-items

//填充渐变

(1)原理、用法

cxt.fillStyle=grd;

原理:通过设置CSS3中的布局利器flex中的属性align-times,使子框垂直居中。

cxt.fillRect(0,0,175,50);** **

用法:先将父框设置为position:flex,再设置align-items:center。

 

(1)代码实例

//创制3个通向/圆渐变,使用渐变填充矩形

<div class=”parent”>

var
c=document.getElementById(“myCanvas”);

    <div class=”child>DEMO</div>

var

</div>

ctx=c.getContext(“2d”);

.parent {

// 创建渐变

    position:flex;

 

    align-items:center;

var**grd=ctx.createRadialGradient(75,50,5,90,60,100);**

}

grd**.addColorStop(0,”red”);
grd.addColorStop(1,”white”);**

(3)优缺点

// 填充渐变

优点:只设置parent

 **ctx**.fillStyle=grd;

缺点:包容性存在必然难题

ctx.fillRect(10,10,150,80);

水平垂直居中

 

1)使用absolute+transform

图像:把一幅图像放到画布上,drawImage(image,x,y)

(1)原理、用法

var
c=document.getElementById(“myCanvas”);

规律:将水平居中时的absolute+transform和垂直居中时的absolute+transform相结合。详见:水平居中的3)和垂直居中的2)。

var
ctx=c.getContext(“2d”);

见水平居中的3)和垂直居中的2)。

var

(2)代码实例

img=document.getElementById(“scream”);

<div class=”parent”>

ctx.drawImage(img,10,10);** **

    <div class=”child>DEMO</div>

ps:canvas左上角的左标为(0,0)

</div>

圆:

.parent {

var
c=document.getElementById(“myCanvas”);

    position:relative;

var
ctx=c.getContext(“2d”);

}

ctx.beginPath(); 
//arc(x,y,r,start,stop)

.child {

ctx.arc(95,50,40,0,2*Math.PI);

    position:absolute;

ctx

    left:50%;

.stroke()

    top:50%;

运用 canvas
绘制文本:

    transform:tranplate(-50%,-50%);

font –
定义字体

}

*fillText(text,x,y*)

(3)优缺点

  • 在 canvas 上制图实心的文件**

亮点:child元素不会对其他因素爆发潜移默化

strokeText(text,x,y) –
在 canvas 上制图空心的文本

症结:包容性存在一定难题

eg.

2)使用inline-block+text-align+table-cell+vertical-align

率真文本:

(1)原理、用法

var
c=document.getElementById(“myCanvas”);

规律:使用inline-block+text-align水平居中,再用table-cell+vertical-align垂直居中,将两者组合起来。详见:水平居中的1)和垂直居中的1)。

var

见水平居中的1)和垂直居中的1)。

ctx=c.getContext(“2d”);

(2)代码实例

ctx

<div class=”parent”>

.font=”30px
Arial”;

    <div class=”child>DEMO</div>

ctx.fillText(“Hello
World”,10,50);

</div>

中空文本:

.parent {

var
c=document.getElementById(“myCanvas”);

    text-align:center;

var

    display:table-cell;

ctx=c.getContext(“2d”);

    vertical-align:middle;

 ctx.font=”30px
Arial”;

}

ctx

.child {

.strokeText(“Hello
World”,10,50);

    display:inline-block;

 

}

超过四分之一 Canvas 绘图
API 都未曾定义在 <canvas>
成分本人上,而是定义在经过画布的 getContext()
方法获得的一个”绘图环境”对象上。

(3)优缺点

Canvas API
也利用了路线的表示法。可是,路径由一体系的方法调用来定义,如调用
begin帕特h() 和 arc() 方法。一旦定义了门道,其他的点子,如
fill(),都是对此路径操作。绘图环境的各样品质,比如
fillStyle,表明了这么些操作怎么着选用。

优点:包容性较好

HTML5 的 canvas
元素使用 JavaScript 在网页上制图图像。

3)使用flex+justify-content+align-items

画布是叁个矩形区域,您能够操纵其每一像素。canvas
成分自个儿是未曾绘图能力的。全部的绘图工作务必在 JavaScript
内部形成:

(1)原理、用法

canvas
拥有多样绘制路径、矩形、圆形、字符以及丰硕图像的点子。

原理:通过安装CSS3布局利器flex中的justify-content和align-items,从而达到水平垂直居中。详见:水平居中的4)和垂直居中的3)。

6-Localstorage、sessionstorage、cookie

见水平居中的4)和垂直居中的3)。

H5中的webstorage包涵了三种存款和储蓄形式:sessionStorage和localStorage。存款和储蓄空间相对较大,仅仅是为着本地存款和储蓄数据而生,越多接口,独立的积存空间

(2)代码实例

sessionStorage:会话级其余贮存,会话截至数据没有,

<div class=”parent”>

localStorage:持久化的本土存款和储蓄,除非主动删除数据,不然数据不会晚点,

    <div class=”child>DEMO</div>

cookie:存款和储蓄空间小,与服务器举办交互,作为http的一有些而留存,

</div>

7-质量优化

.parent {

  • 减少http请求:

    display:flex;

² 
css天使:将两个图片合并到二个独立的图纸中。

    justify-content:center;

<div
style=”background-image:url(‘a_lot_of_imgs.gif’);
background-position:-260px -90px ; width:26px;
height:24px;”>

    align-items:center;

</div>

}

<style
type=”text/css”>

       
#navbar{

           
width:31px;

           
height:31px;

           
display:inline;

           
float:left;

           
background-image: url(.gif);

        }
       
.home{

           
background-position: 0 0;

           
margin-right:4px;

 
          margin-left:4px;

        }
       
.gifts{

           
background-position: -32px 0;

           
margin-right:4px;

        }
       
.cart{

           
background-position: -64px 0;

           
margin-right: 4px;

        }
       
.settings{

   
        background-position: -96px 0;

           
margin-right:4px;

        }
       
.help{

           
background-position: -128px 0;

           
margin-right:4px;

        }
   
</style>

<div id=”navbar”
style=”border:2px ridge #333;width:180px;height:32px;padding:4px 0 4px
0;” >

    <a
href=”javascript:alert(‘home’)” title=”Home”><span
class=”home”></span></a>

    <a
href=”javascript:alert(‘gifts’)” title=”Gifts”><span
class=”gifts”></span></a>

    <a
href=”javascript:alert(‘cart’)” title=”Cart”><span
class=”cart”></span></a>

    <a
href=”javascript:alert(‘settings’)” title=”Settings”><span
class=”settings”></span></a>

    <a
href=”javascript:alert(‘help’)” title=”Help”><span
class=”help”></span></a>

</div>

(3)优缺点

² 
图片地图:在三个图纸上涉及七个超链接的图纸。蕴涵劳动器端图片地图(将有着点击提交到同四个对象UQX56L,向其传递用户点击的x、y坐标,web应用程序遵照该x、y坐标映射为适龄的操作。)与客户端图片地图(将用户的点击映射到1个操作,无需向后端应用程序发送请求。映射通过HTML的map标签完成。)三种。

可取:只设置了parent

<img
usemap=”#map1″ border=0
src=”.gif?t=1196816255″/>

<map
name=”map1″>

    <area
shape=”rect” coords=”0 0 31 31″ href=”home.html”
title=”home”>

    <area
shape=”rect” coords=”36 0 66 31″ href=”gifts.html”
title=”gifts”>

    <area
shape=”rect” coords=”71 0 101 31″ href=”cart.html”
title=”cart”>

    <area
shape=”rect” coords=”106 0 136 31″ href=”settings.html”
title=”settings”>

    <area
shape=”rect” coords=”141 0 171 31″ href=”help.html”
title=”help”>

</map>

缺点:包容性存在一定难题

² 
内联图片:通过选拔data:UQashqaiL形式能够在web页面中包括图表但无需附加的http请求。

多列布局

² 
合并样式及脚本文件、

定宽+自适应

 

1)使用float+overflow

  • 采取内容发布网络

(1)原理、用法

内容宣布互连网(CDN)是一组分布在几个分裂地理地方的web服务器,用于特别使得地向用户公布内容。

原理:通过将左手框脱离文本流,设置左侧规定当内容溢出成分框时爆发的事务以高达多列布局。

  • 添加Expires头

用法:先将左框设置为float:left、width、margin-left,再设置实际的右框overflow:hidden。

久远的Expires头,能够使组件存在于缓存,防止不供给的http请求,其得以用来图片、脚本、样式表等

(2)代码实例

Expires:Mon,15 Apr
2024 20:00:00 GMT

<div class=”parent”>

Cache-Control:
max-age=3153陆仟0   
Cache-Control使用max-age指令钦命组件被缓存多长时间,以秒为单位。Cache-Control具有优先权。

    <div class=”left”>

  • 压缩组件

        <p>left</p>

由此减小http响应的大大小小来收缩响应时间。

    </div>

Web客户端能够因而http请求中的Accept-Encoding头来表示对收缩的支撑。Accept-Encoding:
gzip,deflate

    <div class=”right”>

Web服务器通过响应中的Content-Encoding头来布告web客户端。Content-Encoding:gzip

        <p>right</p>

压缩对象:html文书档案、样式表、脚本

        <p>right</p>

假诺是浏览器通过代办发送请求,能够选用在web服务器的响应头中添加Vary头,web服务器能够告知代理遵照3个或三个请求头来改变缓存的响应。Vary:Accept-Encoding

    </div>

  • 将样式表放在顶部

</div>

    
为了幸免无样式内容闪烁及白屏

.left {

  • 将脚本放在底部
  • 避免css表达式

    float:left;

   
css表明式导致频繁的求值操作,能够透过一回性表明式与事件处理器来顶替css表明式。

    width:100px;

  • 利用外部JavaScript和css

    margin-right:20px;

    
首要根源外部文件能够缓存

}

  • 减少DNS查询

.right {

Dns查找能够被缓存起来进步品质。

    overflow:hidden;

  • 精简JavaScript

}

     
精简,从代码中移除不供给的字符以减小尺寸。混淆,同样移除注释和空域,还大概改写代码,将较长的变量名改为更短的变量名。

(3)优缺点

  • 防止重定向

优点:简单

   
重定向指将用户从3个USportageL重新路由到另一个USportageL,301,302常用的二种重定向方式。

缺点:不支持ie6

  • 除去重复脚本

2)使用float+margin

    
重复脚本的产生恐怕是出于分化团体进献能源时,大概还要提供了扳平的剧本,那恐怕引致不须要的http请求和推行JavaScript浪费的光阴。

(1)原理、用法

=》脚本管理模块

原理:通过将左框脱离文本流,加上右框向右移动一定的距离,以达成视觉上的多列布局。

  • 配置ETag

用法:先将左框设置为float:left、margin-left,再安装右框margin-left。

    
Etag:实体标签,是web服务器和浏览器用于确认缓存组件有效性的一种机制。Etag能够用于检查和测试浏览器缓存中的组件与原来服务器上的零部件是还是不是合营。(实体,组件的另一种叫做)Etag为申明实体提供了比最新修改日期越来越灵活的编写制定。

(2)代码实例

Etag难题:平日使用组件的少数质量来组织它,这个属性对于特定的、寄宿了网站的服务器来说是唯一的。当浏览器从一台服务器上获得了土生土长组件,然后再向别的一台不一样的服务器发起条件GET请求时,Etag是不会合作的。那样将会回落有效性验证的成功率,也下落了代办缓存的频率。=》配置或移除Etag

<div class=”parent”>

  • 使用ajax可缓存

    <div class=”left”>

   
确认保障ajax请求坚守品质辅导,特别应享有悠久的Expires头

        <p>left</p>

8-文书档案类型

    </div>

² 
HTML5:<!doctype>

    <div class=”right”>

²  HTML
4.01:

        <p>right</p>

Ø  HTML 4.01 Strict: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Ø  HTML 4.01 Transitional: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">

Ø  HTML 4.01 Frameset: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"  "http://www.w3.org/TR/html4/frameset.dtd">

        <p>right</p>

²  XHTML
1.0:

    </div>

Ø  XHTML 1.0 Strict: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Ø  XHTML 1.0 Transitional:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Ø  XHTML 1.0 Frameset: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

</div>

9-行内成分、块成分、空标签

.left {

行内元素:

    float:left;

  • 不占用一整行,随内容而定
  • 不得以设置宽高,也不能够安装行高,其宽度随着剧情充实,中度随字体大小而变更。 
  • 能够设置外边界,可是唯有左、右外边界起功能。 
  • 能够设置内边界,然而唯有左、右内边界起功效
  • <a>、<b>、<br>、<em>、<font>、<i>、<select>、<input>、<label>、<span>、<strong>、、、

    width:100px;

块元素:

}

  • 连天在新行上起来,占据一整行; 
  • 中度,行高以及外省距和内边距都可决定; 
  • 宽带始终是与浏览器宽度一样,与内容非亲非故;
  • 它能够包容内联成分和其他块成分。
  • <div>、<dl>、<dt>、<dd>、<form>、<h1>、<ol>、<p>、<ul>、、、

.right {

空标签:

    margin-left:120px;

    <br>
、<hr>、<img>

}

(3)优缺点

优点:简单,易理解

症结:兼容性存在必然问题,ie6下有3px的bug。right下的p清除浮动将发生bug

3)使用float+margin(改良版)

(1)原理、用法

原理:在1)的功底之上,通过向右框添加八个父框,再拉长设置左、右父框属性使之发生BFC以去除bug。

用法:先将左框设置为float:left、margin-left、position:relative,再设置右父框float:right、width:百分百、margin-left,最终设置实际的右框margin-left。

(2)代码实例

<div class=”parent”>

    <div class=”left”>

        <p>left</p>

    </div>

    <div class=”rigth-fix”>

        <div class=”right”>

            <p>right</p>

            <p>right</p>

        </div>

    </div>

</div>

.left {

    float:left;

    width:100px;

    position:relative;

}

.right-fix {

    float:right;

    width:100%;

    margin-left:-100px;

}

.right {

    margin-left:120px;

}

(3)优缺点

优点:简单,易理解

4)使用table

(1)原理、用法

规律:通过将父框设置为表格,将左右侧框转化为接近于同一行的td,从而落成多列布局。

用法:先将父框设置为display:table、width:百分之百、table-layout:fixed,再安装左右框display:table-cell,最终设置左框width、padding-right。

(2)代码实例

<div class=”parent”>

    <div class=”left”>

        <p>left</p>

    </div>

    <div class=”right”>

        <p>right</p>

        <p>right</p>

    </div>

</div>

.parent {

    display:table;

    width:100%;

    table-layout:fixed;

}

.left {

    width:100px;

    padding-right:20px;

}

.right,.left {

    display:table-cell;   

}

5)使用flex

(1)原理、用法

规律:通过设置CSS3布局利器flex中的flex属性以高达多列布局。

用法:先将父框设置为display:flex,再安装左框flex:1,最后设置左框width、margin-right。

(2)代码实例

<div class=”parent”>

    <div class=”left”>

        <p>left</p>

    </div>

    <div class=”right”>

        <p>right</p>

        <p>right</p>

    </div>

</div>

.parent {

    display:flex;

}

.left {

    width:100px;

    margin-right:20px;

}

.right {

    flex:1;

}

(3)优缺点

优点:flex很强大

症结:包容性存在必然难点,品质存在一定难题

两列定宽+一列自适应

(1)原理、用法

原理:那种情景与两列定宽查不多。

用法:先将左、中框设置为float:left、width、margin-right,再安装右框overflow:hidden。

(2)代码实例

<div class=”parent”>

    <div class=”left”>

        <p>left</p>

    </div>

    <div class=”center”>

        <p>center</p>

    </div>

    <div class=”right”>

        <p>right</p>

        <p>right</p>

    </div>

</div>

.left,.center {

    float:left;

    width:100px;

    margin-right:20px;

}

.right {

    overflow:hidden;

}

不定宽+自适应

1)使用float+overflow

(1)原理、用法

原理:那种场馆与两列定宽查不多。

用法:先将左框设置为float:left、margin-right,再安装右框overflow:
hidden,最后设置左框中的内容width。

(2)代码实例

<div class=”parent”>

    <div class=”left”>

        <p>left</p>

    </div>

    <div class=”right”>

        <p>right</p>

        <p>right</p>

    </div>

</div>

.left{

        float: left;

        margin-right: 20px;

    }

.right{

    overflow: hidden;

}

.left p{

    width: 200px;

}

(3)优缺点

优点:简单

缺陷:ie6下包容性存在必然难点

2)使用table

(1)原理、用法

原理:通过将父框改变为表格,将左右框转换为接近于同一行的td以完结多列布局,设置父框宽度百分百,给左框子成分两个稳住宽度从而完结自适应。

用法:先将父框设置为display: table、width: 100%,再安装左、右框display:
table-cell,最终设置左框width:
0.1%、padding-right以及左框中的内容width。

(2)代码实例

<div class=”parent”>

    <div class=”left”>

        <p>left</p>

    </div>

    <div class=”right”>

        <p>right</p>

        <p>right</p>

    </div>

</div>

.parent{

    display: table; width: 100%;

    }

.left,.right{

    display: table-cell;

}

.left{

    width: 0.1%;

    padding-right: 20px;

}

.left p{

    width:200px;

}

(3)优缺点

缺点:ie6 ie7不支持

3)使用flex

(1)原理、用法

规律:通过安装CSS3布局利器flex中的flex属性以高达多列布局,加上给左框中的内容定宽、给右框设置flex达到不定款+自适应。

用法:先将父框设置为display:flex,再安装右框flex:1,最终设置左框margin-right:20px、左框中的内容width。

(2)代码实例

<div class=”parent”>

    <div class=”left”>

        <p>left</p>

    </div>

    <div class=”right”>

        <p>right</p>

        <p>right</p>

    </div>

</div>

.parent {

    display:flex;

}

.left {

    margin-right:20px;

}

.right {

    flex:1;

}

.left p{

    width: 200px;

}

(3)优缺点

优点:flex很强大

缺点:包容性存在必然难点,品质存在一定难题

两列不定宽+一列自适应

(1)原理、用法

原理:那个情况与一列不定宽+一列自适应查不多。

用法:先将左、中框设置为float:left、margin-right,再设置右框overflow:hidden,最终给左中框中的内容设置width。

(2)代码实例

<div class=”parent”>

    <div class=”left”>

        <p>left</p>

    </div>

    <div class=”center”>

        <p>center</p>

    </div>

    <div class=”right”>

        <p>right</p>

        <p>right</p>

    </div>

</div>

.left,.center{

    float: left;

    margin-right: 20px;

}

.right{

    overflow: hidden;

}

.left p,.center p{

    width: 100px;

}

等分布局

公式转化:

l = w * n + g * (n-1) -> l = w * n + g * n – g -> l + g = (w

  • g) * n

为此,我们要求化解多个难点:

怎么着让总拉长率增加g(即:L+g)

何以让每一个宽包罗g(即:w+g)

1)使用float

(1)原理、用法

规律:增大父框的实在增进率后,使用CSS3属性box-sizing进行布局的协理。

用法:先将父框设置为margin-left: -*px,再设置子框float: left、width:
百分之二十五、padding-left、box-sizing: border-box。

(2)代码实例

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

.parent{

    margin-left: -20px;//l增加g

}

.column{

    float: left;

    width: 25%;

    padding-left: 20px;

    box-sizing: border-box;//包含padding区域 w+g

}

(3)优缺点

可取:包容性较好

缺陷:ie6 ie7百分比包容存在一定难题

2)使用table

(1)原理、用法

规律:通过增添二个父框的立异框,增大其宽度,并将父框转换为table,将子框转换为tabel-cell进行布局。

用法:先将父框的校勘框设置为margin-left: -*px,再设置父框display:
table、width:百分百、table-layout: fixed,设置子框display:
table-cell、padding-left。

(2)代码实例

<div class=”parent-fix”>

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

.parent-fix{

    margin-left: -20px;//l+g

}

.parent{

    display: table;

    width:100%;

    table-layout: fixed;

}

.column{

    display: table-cell;

    padding-left: 20px;//w+g

}

(3)优缺点

亮点:结构和块数非亲非故乎

缺陷:扩展了一层

3)使用flex

(1)原理、用法

原理:通过安装CSS3布局利器flex中的flex属性以完成等分布局。

用法:将父框设置为display: flex,再设置子框flex:
1,最终设置子框与子框的间隔margin-left。

(2)代码实例

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

.parent{

    display: flex;

}

.column{

    flex: 1;

}

.column+.column{

    margin-left:20px;

}

(3)优缺点

可取:代码量少,与块数非亲非故

缺点:包容性存在必然难点

定宽+自适应+两块中度一样高

1)使用float

(1)原理、用法

原理:通过过度加大左右子框的冲天,接济超出隐藏,以高达视觉上的等高。

用法:将父框设置overflow: hidden,再安装左右子框padding-bottom:
9999px、margin-bottom: -9999px,最终设置左框float:
left、width、margin-right,右框overflow: hidden。

(2)代码实例

<div class=”parent”>

    <div class=”left”>

        <p>left</p>

    </div>

    <div class=”right”>

        <p>right</p>

        <p>right</p>

    </div>

</div>

p{

    background: none!important;

}

.left,.right{

    background: #444;

}

.parent{

    overflow: hidden;

}

.left,.right{

    padding-bottom: 9999px;

    margin-bottom: -9999px;

}

.left{

    float: left;

    width: 100px;

    margin-right: 20px;

}

.right{

    overflow: hidden;

}

(3)优缺点

可取:包容性好

缺点:伪等高,不是实在含义上的等高

2)使用table

(1)原理、用法

原理:将父框转化为tabel,将子框转化为tabel-cell布局,以高达定宽+自适应+两块中度一样高。

用法:先将父框设置为display:table、width:百分百、table-layout:fixed,再设置左右框为display:table-cell,最后设置左框width、padding-right。

(2)代码实例

<div class=”parent”>

    <div class=”left”>

        <p>left</p>

    </div>

    <div class=”right”>

        <p>right</p>

        <p>right</p>

    </div>

</div>

.parent {

    display:table;

    width:100%;

    table-layout:fixed;

}

.left {

    width:100px;

    padding-right:20px;

}

.right,.left {

    display:table-cell;

}

3)使用flex

(1)原理、用法

规律:通过设置CSS3布局利器flex中的flex属性以高达定宽+自适应+两块高度一样高。

用法:将父框设置为display:
flex,再设置左框width、margin-right,最终设置右框flex:1。

(2)代码实例

<div class=”parent”>

    <div class=”left”>

        <p>left</p>

    </div>

    <div class=”right”>

        <p>right</p>

        <p>right</p>

    </div>

</div>

.parent {

    display:flex;

}

.left {

    width:100px;

    margin-right:20px;

}

.right {

    flex:1;

}

(3)优缺点

优点:代码少,flex很强大

缺陷:兼容性存在必然难点

4)使用display

(1)原理、用法

原理:通过设置display中的CSS3的-webkit-box属性以高达定宽+自适应+两块中度一致高。

用法:将父框设置为display: -webkit-box、width:
100%,再安装左框width、margin-right,最终设置右框-webkit-box-flex: 1。

(2)代码实例

<div class=”parent”>

    <div class=”left”>left</div>

    <div class=”right”>right </div>

</div>

.parent {

    width: 100%;

    display: -webkit-box;

}

.left {

    width:100px;

    margin-right: 20px;

}

.right {

    -webkit-box-flex: 1;

}

(3)优缺点

缺陷:包容性存在较大的标题

全屏布局

全屏布局的性状

滚动条不是大局滚动条,而是出现在剧情区域里,往往是主内容区域

浏览器变大时,撑满窗口

全屏布局的法子

1)使用position

(1)原理、用法

规律:将左右部分定位,中间某些应用定宽+自适应+两块高度一样高。

用法:见实例。

(2)代码实例

<div class=”parent”>

    <div class=”top”>top</div>

    <div class=”left”>left</div>

    <div class=”right”>

        <div class=”inner”>right</div>

    </div>

    <div class=”bottom”>bottom</div>

</div>

html,body,.parent{

    margin:0;

    height:100%;

    overflow:hidden;

}

body{

    color:white;

}

.top{

    position:absolute;

    top:0;

    left:0;

    right:0;

    height:100px;

    background:blue;

}

.left{

    position:absolute;

    left:0;

    top:100px;

    bottom:50px;

    width:200px;

    background:red;

}

.right{

    position:absolute;

    left:200px;

    top:100px;

    bottom:50px;

    right:0;

    background:pink;

    overflow: auto;

}

.right .inner{

    min-height: 1000px;

}

.bottom{

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    height:50px;

    background: black;

}

(3)优缺点

亮点:包容性好,ie6下不援救

2)使用flex

(1)原理、用法

原理:通过灵活利用CSS3布局利器flex中的flex属性和flex-direction属性以完毕全屏布局。

用法:见实例。

(2)代码实例

<div class=”parent”>

    <div class=”top”>top</div>

    <div class=”middle”>

        <div class=”left”>left</div>

        <div class=”right”>

            <div class=”inner”>right</div>

        </div>

    </div>

    <div class=”bottom”>bottom</div>

</div>

html,body,.parent{

    margin:0;

    height:100%;

    overflow:hidden;

}

body{

    color: white;

}

.parent{

    display: flex;

    flex-direction: column;

}

.top{

    height:100px;

    background: blue;

}

.bottom{

    height:50px;

    background: black;

}

.middle{

    flex:1;

    display:flex;

}

.left{

    width:200px;

    background: red;

}

.right{

    flex: 1;

    overflow: auto;

    background:pink;

}

.right .inner{

    min-height: 1000px;

}

(3)优缺点

症结:包容性差,ie9及ie9以下不般配

1)使用flex

(1)原理、用法

规律:通过灵活应用CSS3布局利器flex中的flex属性和flex-direction属性以达到全屏布局。

用法:见实例。

(2)代码实例

<div class=”parent”>

    <div class=”top”>top</div>

    <div class=”middle”>

        <div class=”left”>left</div>

        <div class=”right”>

            <div class=”inner”>right</div>

        </div>

    </div>

    <div class=”bottom”>bottom</div>

</div>

html,body,.parent{

    margin:0;

    height:100%;

    overflow:hidden;

}

body{

    color:white;

}

.parent{

    display:flex;

    flex-direction:column;

}

.top{

    background:blue;

}

.bottom{

    background:black;

}

.middle{

    flex:1;

    display:flex;

}

.left{

    background: red;

}

.right{

    flex:1;

    overflow:auto;

    background: pink;

}

.right .inner{

    min-height:1000px;

}

全屏布局相关方案的包容性、品质和自适应一览表

方案 包容性 品质 是不是自适应

Position 好 好 部分自适应

Flex 较差 差 可自适应

Grid 差 较好 可自适应

当然,最最最最末尾,假设您喜爱那片小说,能够疯狂点赞和收

爱工作,爱念书,爱生活,爱前端 追求优异,成功也会再不注意间追上你

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website