初学css总结（css快速入门）

31. 什么是外边距重叠？重叠的结果是什么？

首先，外边距重叠就是 margin-collapse。相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，结合而成的外边距称为折叠外边距。

折叠结果遵循下列计算原则：

两个相邻的外面边距是正数时，折叠结果就是它们之中的较大值；
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值；
两个外边距一正一负时，折叠结果是两者的相加的和；

32.display: none; 与 visibility: hidden; 有什么区别？

* 这两个属性的值都可以让元素变得不可见；

区别：

从占据空间角度看：display: none;会让元素完全从渲染树中消失，渲染的时候不占据任何空间；visibility: hidden;不会让元素从渲染树消失，渲染师元素继续占据空间，只是内容不可见；
从继承方面角度看：display: none;是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示；visibility:hidden;是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显式；
从重绘和重排角度看：修改常规流中元素的display通常会造成文档重排。修改visibility属性只会造成本元素的重绘读屏器不会读取display: none;元素内容；会读取visibility: hidden元素内容；

33.css hack原理及常用hack有哪些？

原理：利用不同浏览器对CSS的支持和解析结果不一样编写针对特定浏览器的样式。

常见的hack有： 属性hack、选择器hack、IE条件注释。

34.link 与 @import 的区别？

link 是HTML方式， @import 是CSS方式；
link最大限度支持并行下载，@import 过多嵌套导致串行下载，出现FOUC；
link 可以通过 rel="alternate stylesheet"指定候选样式；
浏览器对 link 支持早于@import，可以使用 @import对老浏览器隐藏样式；
@import必须在样式规则之前，可以在css文件中引用其他文件；

总的来说： link优于@import。

35.什么是 FOUC(Flash of Unstyled Content)？如何来避免 FOUC？

当使用@import导入CSS时，会导致某些页面在IE出现奇怪的现象：没有样式的页面内容显示瞬间闪烁，这种现象被称为“文档样式暂时失效”，简称FOUC。

产生原因：当样式表晚于结构性html加载时，加载到此样式表时，页面将会停止之前的渲染。等待此样式表被下载和解析后，再重新渲染页面，期间导致短暂的花屏现象。

解决办法：只要在<head>之间加入一个<link>或者<script>``</script>元素即可。

36.display,float,position有什么关系？

如果 display 为none，那么position和float都不起作用，元素不显示；
如果position值为absolute或者fixed，元素绝对定位，float的计算值为none，display根据下面的表格进行调整；
如果float不是none，框是浮动的，display根据下表进行调整；
其他情况下display的值为指定值总结起来：绝对定位、浮动、根元素都需要调整 display；

37.外边距折叠(collapsing margins)

毗邻的两个或多个margin会合并成一个margin，叫做外边距折叠。规则如下：

两个或多个毗邻的普通流中的块元素垂直方向上的margin会折叠；
浮动元素或linline-block元素或绝对定位元素的margin不会和垂直方向上的其他元素的margin折叠；
创建了会计格式化上下文的元素，不会和它的子元素发生margin折叠；
元素自身的margin-bottom和margin-top相邻时也会折叠；

38.有哪几种隐藏元素的方法？

visibility: hidden; 这个属性只是简单的隐藏某个元素，但是元素占用的空间仍然存在；
opacity: 0;``CSS3属性，设置0可以使一个元素完全透明；
position: absolute; 设置一个很大的 left 负值定位，使元素定位在可见区域之外；
display: none; 元素会变得不可见，并且不会再占用文档的空间；
transform: scale(0); 将一个元素设置为缩放无限小，元素将不可见，元素原来所在的位置将被保留；
<div hidden="hidden"> HTML5属性,效果和display:none;相同，当这个属性用于记录一个元素的状态；
height: 0; 将元素高度设为 0 ，并消除边框；
filter: blur(0); CSS3属性，将一个元素的模糊度设置为0，从而使这个元素“消失”在页面中；

39.li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？

li排列受到中间空白(回车/空格)等的影响，因为空白也属于字符，会被应用样式占据空间，产生间隔。解决办法：

在ul中用font-size：0（谷歌不支持）；可以使用letter-space：-3px;
设置float：left；

40.浏览器是怎样解析CSS选择器的？

浏览器解析CSS是从上到下，从左到右解析的，这样会提高查找选择器所对应的元素的效率（至于原因，有兴趣的童鞋可以自行去了解）。

初学css总结,css快速入门(9)

41.全屏滚动的原理是什么？用到了CSS的哪些属性？

全屏滚动有点类似于轮播，整体的元素一直排列下去，假设有5个需要展示的全屏页面，那么高度是500%，只是展示100%。也可以理解为超出隐藏部分，滚动时显示。

可能用到的CSS是： overflow:hidden; transform:translate(100%, 100%); display:none;

42.对浏览器内核的理解？

浏览器内核主要分为两个部分：渲染引擎和js引擎；

渲染引擎：负责取得页面的内容（html，xml，图像等）、整理讯息（加入css等）、以及计算网页的显示方式，然后对输出至显示器或者打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不同。所有网页浏览器、电子邮件客户以及其他所需要编辑、显示网络的应用程序都需要内核。
JS引擎：解析和执行Javascript来实现网页的动态效果。

最开始渲染引擎和js引擎没有明确的区分，后来js引擎越来越独立，内核就倾向于只渲染引擎。

43.对WEB标准以及W3C的理解与认识

对于结构的要求：（规范的标签可以提高搜索引擎对页面的抓取效率，对SEO很有帮助）

标签要闭合
标签字母小写
标签不允许随意嵌套

对于CSS和JS来说：

尽量使用外链CSS样式表和JS脚本。同时结构，表现和行为分为三块，符合规范。此外，还得提高页面渲染速度，提高用户体验。
尽量少用行内样式，保证结构和表现分离。标签的id和class等的属性命名要做到见文知意，标签越少，加载越快，用户体验就会越高。同时代码方面也会更易于维护，便于改版。
不需要变动内容，便可一同打印版本而不需要复制内容，提高网站易用性。

44.制作一个访问量很大的网站，如何管理所有的css文件，js和图片？

从人手，分工和同步方面回答：

前期团队必须确认好全局样式，编码模式；
代码风格，编写习惯保持一致；
标注样式编写人，各模块都要及时标注（标注关键样式调用的地方）；
对自己负责的页面进行标注；
CSS和JS分文件夹存并行存放，命名都要统一；
JS分文件夹存放，命名以该JS功能为准的英文翻译；
图片采用整合的.png格式存放，尽量整合在一起，方便将来管理；

45.视差滚动效果以及如何实现？

视差滚动（Parallax Scrolling）指网页滚动过程中，多层次的元素进行不同程度的移动，视觉上形成立体运动效果的网页展示技术（3D效果）。

实现方式：

CSS3实现：优点是开发时间相对较短，性能和开发效率比较好。缺点是不能兼容到低版本的浏览器；
JQuery实现：（通过控制不同层滚动速度，计算每一层的时间）优点是能兼容到各个版本，效果可控性好，缺点是开发起来对制作者的要求较高；
插件实现方式：例如使用parallax-scrolling,兼容性十分好；

46.对BFC规范(块级格式化上下文：block formatting context)的理解

BFC规定了内部的Block Box如何布局。一个页面是由很多个Box组成的，元素的类型和display属性，决定了这个Box的类型。不同类型的box，会参与不同的Formatting Context（决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染，也是就是说BFC内部的元素和外部的元素不会相互影响。

定位方案：

内部的box会在垂直方向上一个接一个的放置；
box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠；
每个元素margin box的左边，与包含块border box的左边相接触；
BFC的区域不会与float box重叠；
BFC是页面上的一个隔离的独立容器，容器里面的元素不会影响到外面的元素；
计算BFC的高度时，浮动元素也会参与计算。

满足下列条件之一就可以出发BFC：

根元素变化，即html；
float的值不为none（默认）；
overflow的值不为visible（默认）；
display的值为inline-block, tabke-cell，table-caption；
position的值为absolute或fixed;

47.元素竖向的百分比设定是相对于容器的高度吗？

一般来说，子元素的百分比单位都是以父元素为依据。但是margin和padding例外。元素的height是相对于容器的高度，但是元素的margin和padding是相对于容器的宽度。

48.一个满屏'品字'布局如何设计?

方法有很多种，但是比较简单的方式就是：上面的div宽度设置为100%，底下两个div设置成50%，并使用float或者inline使其保持在同一行即可（具体的样式可以自己微调）。如下：

css: .content { width: 50%; height: 150px; margin: 0 auto; } .top { width: 40%; height: 50px; background-color: pink; margin-bottom: 50px; margin-left: 30%; } .left { width: 45%; height: 50px; background-color: pink; float: left; } .right { width: 45%; height: 50px; background-color: pink; float: right; } html: <div class="content"> <div class="top"></div> <div class="left"></div> <div class="right"></div> </div>> 复制代码

初学css总结,css快速入门(10)

49.经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧？

（1）、问题：png24位的图片在ie浏览器上出现背景。解决：做成png8；

（2）、问题：浏览器默认的margin和padding不同。解决：添加一个全局的*{ margin： 0; padding： 0;}；

（3）、问题：IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性，而Firefox下,只能使用getAttribute()获取自定义属性。解决：统一通过getAttribute()获取自定义属性；

（4）、问题： IE下,event对象有x,y属性,但是没有pageX,pageY属性，而Firefox下,event对象有pageX,pageY属性,但是没有x,y属性。解决：使用mX(mX = event.x ? event.x : event.pageX;)来代替IE下的event.x或者Firefox下的event.pageX。

50.box-sizing 常用的属性有哪些？分别有什么作用？