web前端总结CSS篇

1.css盒模型原理

所有的页面的元素都可以看成是一个盒子，占据一定的页面空间。占据的空间要比实际使用的空间要大得多。我们可以调整盒子的边框和距离，来调整盒子（页面和页面中的元素）的位置。盒子模型是由内容、边框、间隙（padding）、间隔（margin）组成

2.css的导入方式：import与link方式的区别，优缺点

1. 来源：link属于XHTML标签，import是CSS提供的方式。link方式除了CSS，还可以定义RSS，定义rel连接属性等，而import只能加载CSS。
    2. 顺序：link是页面加载时同时执行的，而import是在页面加载完之后，才会执行的（所以容易导致样式闪烁，即开始页面没有样式，突然会闪烁一下，然后就有了样式，就我个人比较喜欢link引用的方式）
    3. js控制的差别：当页面需要使用javascript控制dom改变样式的时候，只能使用link标签，因为import不是js操作dom可以控制的。也不支持js操作dom来控制。

3.css的优先级，内联和important哪个优先级别高

优先级为!important > [ id > class > tag ] !Important 比 内联优先级高

4.盒子垂直居中方法

<style>
		html, body {width: 100%; height: 100%; margin: 0; padding: 0;}
		.box{width:200px; height:200px; background:#aa7700; margin:-100px auto 0 auto;         
        position: relative; top:50%;}/*transform: translateY(-50%);*/ 高度一半
	</style>
	<div class="box"></div>

5.浮动元素清除浮动方法

    1.使用overflow属性来清除浮动，但是overflow:hidden会将超出的部分隐藏起来
    2.clear：both；清除掉两边的浮动。但是有一个问题，margin失效了，上下之间没有了间距。
    3.隔墙法。就是在两个部分之间加一个<div>，设置一个高度。还有就是“内墙发”：就是在块里边在放一个<div>，设置高度，不仅不让后边的去追前边的，并且能给外边的<div>撑出一个高度。

6.常见兼容性问题

    1.不同浏览器的标签默认的margin和padding不同
    解决方案：body,h1,h2,h3,ul,li,input,div,span,a,form …… { margin:0; padding:0; }
    2.块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大
    解决方案：在float的标签样式控制中加入 display:inline;将其转化为行内属性 
    3.设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度
    解决方案：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。
    4.行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，IE6间距bug
    解决方案：在display:block;后面加入display:inline;display:table; 
    5.几个img标签放在一起的时候，有些浏览器会有默认的间距，通配符清除间距也不起作用。
    解决方案：使用float属性为img布局
    6.标签最低高度设置min-height不兼容
    解决方案：如果我们要设置一个标签的最小高度200px，需要进行的设置为：{min-height:200px; height:auto !important; height:200px; overflow:visible;}
    7.各种特殊样式的兼容，比如透明度、圆角、阴影等。特殊样式每个浏览器的代码区别很大，所以，只能现查资料通过给不同浏览器写不同的代码来解决。

7.CSS的定位属性，各自区别，应用场景

1. relative（相对定位）：相对定位的偏移参考元素是元素本身，不会使元素脱离文档流。元素的初始位置占据的空间会被保留。相对定位元素常常作为绝对定位元素的父元素。并且定位元素经常与z-index属性进行层次分级
    2. absolute（绝对定位）绝对定位元素以父辈元素中最近的定位元素为参考坐标，如果绝对定位元素的父辈元素中没有采用定位的，那么此绝对定位元素的参考对象是html,元素会脱离文档流。就好像文档流中被删除了一样。并且定位元素经常与z-index属性进行层次分级
    3. fixed  (固定定位)位移的参考坐标是可视窗口，使用fixed的元素脱离文档流。并且定位元素经常与z-index属性进行层次分级
    4.static （静态定位）默认值，元素框正常生成的，top left bottom right这几个偏移属性不会影响其静态定位的正常显示

8.谈CSS3 Media Queries

Media Queries可以去做响应式网站,根据屏幕大小分为手机端,Ipad,电脑端，可以根据屏幕大小,基于rem去做移动端的适配
    <link rel="stylesheet" media="screen and (min-width:600px) and (max-width:900px)" href="style.css" type="text/css" />

9.Display:none与visibility:hidden的区别

1.display:none是彻底消失，不在文档流中占位，浏览器也不会解析该元素；visibility:hidden是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素；

2.使用visibility:hidden比display:none性能上要好，display:none切换显示时visibility，页面产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。所有页面第一次加载时需要产生一次回流），而visibility切换是否显示时则不会引起回流。

10.谈css hack

/* CSS hack*/ 

使用hacker我可以把浏览器分为3类：IE6 ；IE7和遨游；其他（IE8 chrome ff safari opera等）

◆IE6认识的hacker 是下划线_ 和星号 *

◆IE7 遨游认识的hacker是星号 *

比如这样一个CSS设置：

div { height: 300px; *height: 200px; _height:100px; }

11.css中em和px的关系和区别

    px、em都是计量单位，都能表示尺寸。
    Px表示“绝对尺寸”（并非真正的绝对），实际上就是css中定义的像素，利用px设置字体大小及元素宽高等比较稳定和精确。    Px的缺点是其不能适应浏览器缩放时产生的变化，因此一般不用于响应式网站。
    em表示相对尺寸，其相对于当前对象内文本的font-size（如果当前对象内文本的font-size计量单位也是em，使用em可以较好的相应设备屏幕尺寸的变化。