css比js难学，只是语法简单
1需要借助每个单一的选择器，属性的用法
2.css考验的是你的应变能力
心得：万变不离其宗
1需要将单一的选择权，属性理解透彻
你的大脑是一个css解析器
目标：大脑形成css解析器
浏览并记忆常见的css选择器和属性
css的路径
ftp:///c/新建文件夹
./新建文件夹
新建文件夹/
浏览器的兼容方法
很多兼容性问题都是因为浏览器对标签的默认属性解析不同造成的，如果我们熟悉标签的默认属性的话，就能很好的理解为什么会出现兼容问题以及怎么去解决这些兼容问题。
你是否要兼容IE：取决于你的boss/用户数量（占你的pv达到3%以上）/公司的要求
兼容程度：美观性和实用性（对于不同的IE版本要求不同，分为ABC三级，chrome和safari要A级，IE8/9B级，IE6/7C级）
兼容方法
property hacks(利用IE属性进行hacks)
cc(ie condiitonal comments)，但从ie10后条件注释失效
思路
拿到一个疑似无法兼容IE的属性，先到caniuse去查询属性的支持版本；
查询百度，找兼容方案；到browserhacks.com去查询不同IE版本的property hacks的写法
浏览器兼容
1.如何调试 IE 浏览器
IE浏览器7+自带的开发者工具，IE6可以采用border的方法或是下载virtural IE6进行辅助开发
采用模拟器的方式去模拟不同版本下的IE浏览器，如IEtester或chrome的付费插件Test IE
通过安装虚拟机的方式，安装不同版本的IE的运行环境去达到调试IE浏览器的目的
2.什么是CSS hack？在 CSS 和 HTML里如何写 hack？在 CSS 中 ie6、ie7的 hack 方式？
为了解决不同浏览器或是浏览器不同版本的网页解析方式不一的问题，开发者撰写相应的css code而达到兼容目的，这整个过程叫做css hack
css hack大致有三种方法：css属性前缀法、IE条件注释法和选择器前缀法css 属性前缀法：
.box{
color:red; /* for all browsers */
_color:black; /* for ie6 */
*color:green; /* for ie6~7 */
color:pink\9; /* for ie6~10 */
}
选择器前缀法：
*body{
/* only for ie6 */
}
*+p{
/* for ie7 */
}
@media screen\9{
div{
/* for ie6~7 */
}
ie cc:
<!--[if IE]>
这段文字只在IE浏览器显示
<![endif]-->
<!--[if IE 6]>
这段文字只在IE6显示
<![endif]-->
<!--[if gte IE 6]>
这段文字只在IE6以上(包括)版本显示
<![endif]-->
<!--[if lt IE 6]>
这段文字只在IE6以下（不包括)版本显示
<![endif]-->
<!--[if !IE]>
这段文字只在非IE浏览器显示
<![endif]-->
ie6/7的css hack
ie6
属性前缀法：
.box{
_color:black; /* for ie6 */
}
选择器前缀法：
*body{
margin:0;
}
条件注释法：
<head>
<!--[if IE 6]>
<body class="ie6">
<![endif]-->
</head>
ie7
选择器前缀法：
*+body{
margin:0;
}
条件注释法：
<head>
<!--[if IE 7]>
<body class="ie7">
<![endif]-->
</head>
ie6~7
属性前缀法：
.box{
*color:black; /* for ie6~7 */
}
选择器前缀法：
@media body\9{
margin:0;
}
条件注释法：
<head>
<!--[if IE lte 7]>
<body class="ie6 ie7">
<![endif]-->
</head>
3.列举几种浏览器兼容问题
不同浏览器的标签默认的margin和padding不一，解决方案是*{margin:0;padding:0;}
块级元素使用float以及存在左右margin时，IE6显示的margin比设定的大，解决方案是在添加float样式的标签内加入display:inline;
图片默认间距：有些浏览器在多个img标签放一起时出现默认间距，解决方案是使用float属性layout
透明度的问题：selector{
filter:alpha(opacity=50); /* for IE*/
-moz-opacity:0.5; /*for old versions of the Mozilla browsers*/
-khtml-opacity: 0.5; /* for old versions of Safari*/
opacity: 0.5;
}
min-width或max-width:ie6不支持最大或最小宽高/* 最小宽度 */
.min_width{
min-width:300px; _width:expression(parseInt(this.clientWidth) < 300 ? "300px" : this.clientWidth);
}
/* 最大宽度 */
.max_width{
max-width:600px; _width:expression(parseInt(this.clientWidth) > 600 ? "600px" : this.clientWidth);
}
4.针对兼容、多浏览器覆盖有什么看法？渐进增强和优雅降级是什么意思？
兼容多浏览器的看法：
分析需求，是否有兼容的必要性。针对特定浏览器的用户包括页面的用户、参与设计的人员、用户的浏览器类型使用状况等
兼容程度，对于高级浏览器页面的内容展示要求要高，对于低级浏览器可以在不影响正常页面展示前提下有所降低
总的原则是，基于成本与效益间的权衡考虑
渐进增强和优雅降级的观点比较渐进增强和优雅降级都是出于为不同浏览器提供兼容方案的目的，只是在实际开发时的思路不同。
渐进增强是基于低级浏览器进行开发，在满足其内容、样式和交互的需求后，针对更加高级的浏览器实现设计、交互等的强化。
优雅降级是基于高级浏览器进行开发，在完成高级浏览器的各项要求后，针对低级浏览器无法支持高版本功能的问题，实现功能、设计等模块的逐步退化，并在退化过程中能求保证网页的基本功能和信息的实现。
5.reset.css和normalize.css分别是做什么的？为什么推荐使nomalize.css?
首先，由于不同的浏览器或是浏览器的不同版本在支持和渲染页面时出现的差异，导致开发者需要进行浏览器的兼容。针对这一问题，网络的大牛们想方设法出不同的解决方案，reset.css和normalize.css这两种不同思路的解决兼容性问题的方案应运而生。
reset.css是早期的解决不同浏览器默认样式不一的问题的方案，主要思路是在css文档的初始部分重置不同元素的样式，使得不同的浏览器在初始样式上统一标准。但是这一方法的缺陷是过于暴力，把所有元素同一对待，一旦要使用如ul标签的前缀时，又得重新设置，浪费资源。
此时，一种新的解决这一问题的思路诞生——normalize.css。normalize.css在保留有用的浏览器默认样式的基础上，为不同浏览器提供通用样式的规范，即给定通用的样式，针对不同浏览器出现的兼容性问题分门别类的提供优化方案。
由此，我们可知reset.css就像倚天屠龙记中的七伤拳——欲伤人，先伤己，reset.css就是欲统一样式，先要把自己默认样式破坏个遍。而normalize.css就如同武当的太极拳——能够在统一样式标准的前提下，保留浏览器的默认样式。综上所述，目前normalize.css是解决浏览器兼容的最新也是目前来看最好的方案！
6.IE盒模型和标准盒模型有什么区别? 怎样使 IE678使用标准盒模型?box-sizing:border-box有什么作用
IE盒模型和标准盒模型的区别在于：
IE盒模型的宽高等于margin+padding+conent，常出现在IE6/7/8怪异模式下
标准盒模型宽高等于content，常出现在chrome， IE9+, IE6/7/8(添加 doctype)
添加doctype的声明
box-sizing规定以特定区域定义特定元素的区域含义
值
描述
content-box
规定盒子的宽高为内容框的宽高
border-box
规定盒子的宽高为盒子的边框
inherit
继承父元素的box-sizing的值
网友评论