CSS进阶(二)

2019-08-12 本文已影响0人 Arvin_zhea

BFC
渐进增强和优雅降级
CSS验证 / 压缩
圣杯布局与双飞翼布局

BFC(块级格式化上下文)

BFC（Block formatting context）块级格式化上下文。

元素的显示模式

元素的显示模式 display:

那些元素会具有BFC的条件

不是所有的元素模式都能产生BFC，w3c 规范：

display 属性为 block, list-item, table 的元素，会产生BFC。

display属性，比如 line 等等，他们创建的是 IFC ，暂不研究。

这个BFC 有着具体的布局特性：

有宽度和高度，有外边距margin有内边距padding有边框 border。

什么情况下可以让元素产生BFC

float / position / display / overflow

以上盒子具有BFC条件了，就是说有资质了，但是怎样触发才会产生BFC，从而创造这个封闭的环境呢？要给这些元素添加如下属性就可以触发BFC。

float属性不为none。

position为absolute或fixed。

display为inline-block, table-cell, table-caption, flex, inline-flex。

overflow不为visible。

BFC元素所具有的特性

BFC布局规则特性：

在BFC中，盒子从顶端开始垂直地一个接一个地排列.

盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠。

在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）。

BFC的区域不会与浮动盒子产生交集，而是紧贴浮动边缘。

计算BFC的高度时，自然也会检测浮动或者定位的盒子高度。

它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

BFC的主要用途

BFC能用来做什么？

清除元素内部浮动

解决外边距合并问题

制作右侧自适应的盒子问题

(1) 清除元素内部浮动

只要把父元素设为BFC就可以清理子元素的浮动了，最常见的用法就是在父元素上设置overflow: hidden样式，对于IE6加上zoom:1就可以了。
计算BFC的高度时，自然也会检测浮动或者定位的盒子高度。

(2) 解决外边距合并问题

盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠，那么我们创建不属于同一个BFC，就不会发生margin重叠了。也就是说：在其中一个盒子外再套一个BFC盒子(加overflow: hidden;)。

<div class="father">
    <div class="over"> // 在一个盒子外再套一个盒子
        <div class="son1">
        </div>
    </div>
    <div class="son2">
    </div>
</div>

.over {
    overflow: hidden;
}
.son1 {
    background-color: red;
    margin-top: 50px;
}
.son2 {
    background-color: purple;
    margin-top: 100px;
}

(3) 制作右侧自适应的盒子问题

为了和浮动元素不产生任何交集，普通流体元素BFC后，会顺着浮动边缘形成自己的封闭上下文

<div class="father">
    <div class="box"></div>
    <div class="txt">我是文字，我不是文字，我还是文字吧我是文字，我不是文字，我还是文字吧我是文字，我不是文字，我还是文字吧我是文字，我不是文字，我还是文字吧我是文字，我不是文字，我还是文字吧我是文字，我不是文字，我还是文字吧</div>
</div>

.father {
    width: 400px;
    height: 500px;
    border: 1px solid #000;
    margin: 0 auto;
}
.box {
    width: 100px;
    height: 100px;
    background-color: pink;
    float: left;
}
.txt {
    height: 100px;
    background-color: purple;
    overflow: hidden;
}

BFC 总结

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。包括浮动，和外边距合并等等，因此，有了这个特性，我们布局的时候就不会出现意外情况了。

优雅降级和渐进增强

渐进增强 progressive enhancement：

针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级 graceful degradation

一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

区别：渐进增强是向上兼容，优雅降级是向下兼容。

建议：现在互联网发展很快，连微软公司都抛弃了ie浏览器，转而支持 edge这样的高版本浏览器，我们很多情况下没有必要再时刻想着低版本浏览器了，而是一开始就构建完整的效果，根据实际情况，修补低版本浏览器问题。优雅降级

浏览器前缀

浏览器前缀	浏览器
`-webkit-`	Google Chrome, Safari, Android Browser
`-moz-`	Mozilla Firefox
`-o-`	Opera
`-ms-`	Internet Explorer, Edge
`-khtml-`	Konqueror

常用的解决H5和C3 的兼容解决文件待续...

CSS W3C 统一验证工具

W3C 统一验证工具： http://validator.w3.org/unicorn/ ☆☆☆☆☆
它可以检测本地文件

CssStats 是一个在线的 CSS 代码分析工具 http://www.cssstats.com/

CSS 压缩

通过上面的检测没有错误，为了提高加载速度和节约空间（相对来说，css量很少的情况下，几乎没啥区别），可以通过css压缩工具把css进行压缩。

站长之家快速压缩: http://tool.chinaz.com/Tools/CssFormat.aspx ☆☆☆☆☆

w3c css压缩 http://tool.chinaz.com/Tools/CssFormat.aspx 网速比较慢

圣杯布局与双飞翼布局

圣杯布局的两侧在浏览器宽度之外，会拉宽整个浏览器。
双飞翼布局的两侧在浏览器之内。

<div class="container">
    <div class="div_m">中间</div>
    <div class="div_l">左边</div>
    <div class="div_r">右边</div>
</div>

<div class="content">
    <div class="main">
        <div class="middle">中间</div>
    </div>
    <div class="left">左边</div>
    <div class="right">右边</div>
</div>

* {
    padding: 0;
    margin: 0;
}

/* 圣杯布局 */
.container {
    width: 100%;
    background-color: #eee;
    height: 200px;
    padding: 0px 200px;
}
.div_m {
    width: 100%;
    height: 200px;
    background-color: blue;
    float: left;
}
.div_l,
.div_r {
    width: 200px;
    height: 200px;
    background-color: red;
    float: left;
}
.div_l {
    margin-left: -100%;
    position: relative;
    left: -201px;
}
.div_r {
    margin-left: -200px;
    position: relative;
    right: -201px;
}

/* 双飞翼布局 */
.content {
    width: 100%;
    background-color: #eee;
    height: 200px;
    margin-top: 100px;
}
.main {
    width: 100%;
    height: 200px;
    background-color: blue;
    float: left;
}
.left,
.right {
    width: 200px;
    height: 200px;
    background-color: red;
    float: left;
}
.left {
    margin-left: -100%;
}
.right {
    margin-left: -200px;
}
.middle {
    margin: 0 200px;
}

先布局中间部分，后布局两边。
通过 float 进行同行排布。