前端知识体系回顾——第四章 CSS 1

posted @ May 11, 2016 • 陈凯 • CSS

摘要：「CSS部分比较容易掌握的，但是深入到CSS，并不会太容易。CSS的知识比较零碎，所用到的技巧也相对比较多。这是CSS篇章的第一部分。」

@(13-02-前端笔记)

1. 元素类型

详细请参考附件CSS的几个核心概念 + 块级元素 + 内联元素 + 延伸一下关于display的总结，以及CSS3中的弹性盒模型知识。 + 更加深入的是BFC规范。

2. 盒模型

解释一下你对盒模型的理解，以及如何在 CSS 中告诉浏览器使用不同的盒模型来渲染你的布局。 请解释一下 * { box-sizing: border-box; } 的作用, 并且说明使用它有什么好处？

  • 有两种， IE 盒子模型、标准 W3C 盒子模型； IE的content部分包含了 border 和 pading;在CSS中使用box-sizing来控制。content-box和border-box（IE标准），默认下是标准模式。

  • 盒模型： 内容(content)、填充(padding)、边框(border)、边界(margin) .

  • box-sizing属性主要用来控制元素的盒模型的解析模式。默认值是content-box。
  • content-box：让元素维持W3C的标准盒模型。元素的宽度/高度由border + padding + content的宽度/高度决定，设置width/height属性指的是content部分的宽/高
  • border-box：让元素维持IE传统盒模型（IE6以下版本和IE6~7的怪异模式）。设置width/height属性指的是border + padding + content加起来的和。
  • 标准浏览器下，按照W3C规范对盒模型解析，一旦修改了元素的边框或内距，就会影响元素的盒子尺寸，就不得不重新计算元素的盒子尺寸，从而影响整个页面的布局。

3. 定位（position）

详细请见附件CSS定位剖析

4. 浮动，以及清浮动

float，clear，详细的参考附件浮动问题，解释下浮动和它的工作原理

浮动的框可以向左或向右移动，直到他的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流的块框表现得就像浮动框不存在一样。浮动的块框会漂浮在文档普通流的块框上。可以再详细一点(详细的可以参考一下浮动的专题知识。)

a.浮动元素引起的问题和解决办法？ 浮动元素引起的问题： 1. 父元素的高度无法被撑开，影响与父元素同级的元素 2. 与浮动元素同级的非浮动元素（内联元素）会跟随其后 3. 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构

解决方法：

使用CSS中的clear:both;属性来清除元素的浮动可解决2、3问题，对于问题1，添加如下样式，给父元素添加clearfix样式：

.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix{display: inline-block;} /* for IE/Mac */

b.列举不同的清除浮动的技巧，并指出它们各自适用的使用场景 清除浮动的几种方式，各自的优缺点 1. 使用空标签清除浮动 clear:both（理论上能清楚任何标签，增加无意义的标签） 2. 使用overflow:auto（空标签元素清除浮动而不得不增加无意代码的弊端,,使用zoom:1用于兼容IE） 3. 浮动外部元素。但是会产生全局浮动，很明显是不合理的。 4. 为父元素设置高度，但是不是那个地方都可以用高度来解决的。 5. 是用afert伪元素清除浮动，代码如下:

.clearfix{*zoom:1}（针对IE的）
.clearfix:after{content:".";display:block;height:0;font-size:0;clear:both;visibility:hidden}

5. CSS的居中问题

详见附件之CSS居中问题

6. 描述z-index和叠加上下文是如何形成的

见定位position详解

7. CSS规则继承，CSS选择器

附件之CSS3新应用

8. CSS选择器的优先级

  • 选择器的种类 1.id选择器（ # myid）； 2.类选择器（.myclassname）； 3.标签选择器（div, h1, p）； 4.相邻选择器（h1 + p）； 5.子选择器（ul > li）； 6.后代选择器（li a）； 7.通配符选择器（ * ）； 8.属性选择器（a[rel = “external”]）； 9.伪类选择器（a: hover, li:nth-child）；
  • 可继承的样式： font-size font-family color;
  • 不可继承的样式：border padding margin width height ;
  • 优先级就近原则，同权重情况下样式定义最近者为准;
  • 载入样式以最后载入的定位为准;其中style>内嵌style样式>外部样式>浏览器默认样式，最后形成一个新的虚拟的样式表，最终还会根据js渲染后，形成计算后的样式。
  • 优先级为:!important（最高） >style(1000)> id(100) > class、伪类、属性选择器(10) > tag、伪元素选择(1)>通用符*（0）>浏览器默认的样式。（最低） 其中!important 比内联优先级高。

9. CSS Sprite的使用

见网站性能优化

10.如何居中div？如何居中一个浮动元素

给div设置一个宽度，然后添加margin:0 auto； 居中一个浮动元素，确定容器的宽高 宽500 高 300 的层设置层的外边距，其实就是绝对定位居中的问题。