【前端必备】二、CSS篇

1.CSS盒模型

当对一个文档进行布局的时候，浏览器的渲染引擎会根据盒模型将所有元素表示为一个个矩形的盒子，CSS 决定这些盒子的大小、位置以及属性（例如颜色、背景、边框尺寸…）

每个盒子有4个区域：从内到外是content、padding、border、margin。margin区域用于分开相邻元素。

border使用box-sizing来指定要使用的盒模型。

box-sizing：content-box为标准盒子模型，可通过（min、max）height、width来控制内容区域的大小。

box-sizing：border-box为IE盒子模型，通过（min、max）height、width来控制边框区域的大小。常用于避免padding和border造成的元素显示的大小改变。

盒子的背景会延申到边框外延，可通过 background-clip 来改变。

2.盒的基本类型

块级元素(block)特性：

总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;

宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

内联元素(inline)特性：

和相邻的内联元素在同一行;

宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小;

内联块元素（display:inline-block）：表现为同行显示并可修改宽高内外边距等属性。

inline-block常用于将div元素并列显示，相比于使用float、position，不需要去除环形围绕clear。

inline-block并列显示的div元素vertical-align默认为bottom，div元素间的换行符会产生缝隙。

inline-block还常用于水平菜单，用于li或a标签。

块级元素主要有：

address , blockquote , center , dir , div , dl , fieldset , form , h1-h6, hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li

内联元素主要有：

a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var

可变元素(根据上下文关系确定该元素是块元素还是内联元素)：

applet ,button ,del ,iframe , ins ,map ,object , script

3.去除inline-block元素间间距

产生原因：HTML中的换行符、空格符、制表符等空白符，字体大小不为0的情况下，空白符占据一定宽度，使用inline-block会产生元素间的空隙。

使用margin负值
设置父容器的font-size为0
设置父容器的letter-spacing或word-spacing为负值

在书写代码时留意去掉空白符,如：

<div class="space">

<a href="##">

惆怅</a><a href="##">

淡定</a>

</div>

<div class="space">

<a href="##">惆怅</a

><a href="##">淡定</a>

</div>

<div class="space">

<a href="##">惆怅</a><!--

--><a href="##">淡定</a>

</div>

原文链接

4.CSS Hack

CSS hack为不同版本的浏览器定制编写不同的CSS效果,使你的CSS代码兼容不同的浏览器.

有条件hack，属性hack，选择符hack。

5.优雅降级和渐进增强

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

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

区别：

a. 优雅降级是从复杂的现状开始，并试图减少用户体验的供给

b. 渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要

c. 降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带

6.rgba与opacity

有opacity属性的所有后代元素都会继承 opacity 属性，而RGBA后代元素不会继承不透明属性

7.BFC块级格式化上下文

8.白屏和FOUC

9.两栏布局与三栏布局

布局的时候，常会用到float、负margin、relative定位、transform的translate，还有flex弹性盒子、grid网格布局，方法很多。

三栏布局（圣杯布局）

左右两栏定宽，中间主体自适应宽度，优先渲染主体部分。

基本思路：主体部分放前面，三栏左浮动，将左右的padding设为左右两栏的宽度，使用负外边距和相对布局移动左右两栏到主体左右的padding区域。

细节：box-sizing要设置为boeder-box,这样各栏border和padding的调整不会影响整体布局。

父容器要设置min-width,要计算，如果设置小了，在小型设备上布局会崩掉。

我放在codepen上的代码，可以自己fork一个调一下感受。

https://codepen.io/bluehat999/pen/QoYzjo

可以改父容器的width来模拟小型设备。

代码：

<div class="body">

<div id="header">header</div>

<div id="container">

  <div id="center" class="column">OK</div>

  <div id="left" class="column">LEFT</div>

  <div id="right" class="column">RIGHT</div>

</div>

<div id="footer">footer</div>

</div>

div{

  border:1px solid #eeeeee;

  text-align:center;

  box-sizing:border-box;

}

.body{

  min-width:554px;

  width:300px;

/*   box-sizing:border-box; */

}

#container {

  padding-left: 200px;   /* LC width */

  padding-right: 150px;  /* RC width */

}

#container .column {

  position: relative;

  float: left;

  height:100px;

}

#center {

  width: 100%;

}

#left {

  width: 200px;       /* LC width */

  right: 200px;       /* LC width 左列与左填充对齐*/

  margin-left: -100%;   /*100%是容器的中心宽度*/

}

#right {

  width: 150px;          /* RC width */

/*   margin-left: -154px;  */

/*   left:153px; */

  margin-right:-150px;   /*这个值如何设置*/

}

#footer {

  clear: both;

}

两栏布局

Codepen两栏布局8种实现在线演示

原文链接是 https://segmentfault.com/a/1190000010698609

不同的方案各有优劣，参考原文说明，在codepen上自行调整体会。