[前端学习]css部分学习笔记，第十一天

css兼容性

• css兼容性说白了就是为了照顾旧版本的浏览器，因为新版本的浏览器都很符合w3c规范。针对不同浏览器，书写不同的样式，并通过脚本来判断浏览器版本，来显示效果。主要是通过css hack来实现。

属性hack

• 前置hack（注意：所有属性都可以这样设置）
  • _color: red; ie6专属，只有ie6才会应用
  • *color: red;只有ie7及其以下才会应用
• 后置hack
  • color: red\9; 只针对ie6-10有效
  • color: red\0;只针对ie8-10有效
  • color: red\9\0; 只针对ie9-10有效
  • color: red!important 这是提高css权重的，但这种设置方法只有ie7及其以上和其他浏览器识别，ie6不识别
  • 正常的书写顺序是：正常 * _ 先正常再局部，保证层叠正常。

选择器hack

• 与属性hack应用单个属性不同，选择器hack可以应用到整个选择器
• *html 选择器 {} 在选择器前加了*html就只有ie6会识别并应用样式
• *+html 选择器 {} 在选择器前加了*+html就只有ie7会识别并应用样式
• 媒体选择器暂时还没学，等学了css3之后再来补充

条件注释语法

• 判断内容;
• 判断内容;
  • gte是大于等于；gt是大于；lte是小于等于；lt是小于
• 判断内容； ie10以上和非ie浏览器
• 这些语句大多数ie10以上都不再支持了，如果需要为低版本ie专门写一套css可以通过这样的方法来判断并引入css文件。

css常见BUG

• ie6浏览器浮动盒子设置margin会出现双倍外边距问题，解决方法：display:inline-block，转换为行内块元素
• ie6设置高度小于19px会默认19px的问题，解决方法:设置overflow:hidden(推荐)、height:0;、font-size:0、line-height:0;
• ie7及其以下版本，li标签里两个以上元素浮动，会让每个li标签之间有空白缝隙。解放方法与图片缝隙类似，用vertical-align设置非默认值（baseline）的值即可。
• ie6使用奇数宽高会出现定位不精确的BUG，解决方法没有，只能尽量避免，设置宽高用偶数值
• ie6盒子尽管设置了宽和高，但内容超出时，会自动撑开盒子高度。解决方法是：overflow:hidden。

闯关题总结

• 边框如果不设置颜色和样式，不管多粗都不会显示
• background属性不会继承
• !doctype不是html标签
• radio和checkbox默认值是checked="checked"
• margin和padding设置百分比值都是参考父元素的width
• 如果给当前元素设置z-index，那么它的伪元素z-index会失效，要避免

BFC介绍与作用

• block formatting context 直译过来就是块级格式化上下，它是一块渲染的区域，在区域内部盒子不管怎么调都可以，不会影响到外部的盒子，它的模式与清除浮动相似。
• display:block|list-item|table可以具备触发BFC的条件，它们都有一个共同的特性，由内容、内边距、边框、外边距组成。

触发BFC的条件

• 设置了float且值不为none
• 设置absolute或者fixed
• 设置了display:inline-block|table-cell|table-caption|flex|inline-flex
• overflow值不为visible

成为BFC元素具有的特性

• 内部盒子从顶部开始，垂直的一个一个的排列
• 盒子垂直方向设置外边距时，会出现外边距合并
• 内部盒子的边缘会触碰到父盒子边框的内部边缘
• BFC区域不会和浮动盒子产生交集，而是贴在浮动盒子边缘，简单说就是不会再被浮动的盒子压住。
• 计算盒子高度时，会把浮动盒子的高度也计算上（与清除浮动相同的功能）

成为BFC元素的作用

• 清除浮动，根据BFC的第五的特性。
• 解决外边距合并。既然同一个BFC区域的盒子垂直外边距会合并，那么反过来想，让垂直相邻的两个盒子不在同一个BFC区域不就不会合并了吗？所以给其中一个盒子再设置一个BFC触发条件（最喜欢用overflow:hidden来设置），就可以解决外边距合并。
• 制作右侧自适应盒子。因为特性，BFC区域不会与浮动盒子发生交集，这样可用通过给上方的盒子设置浮动，下方盒子触发BFC而形成右侧自适应盒子的效果。简单说就是，BFC区域会跑到浮动盒子右边与顶线对齐，浮动盒子大小发生变化，BFC区域自动变化宽度，让内容也同时变化，实现自适应的效果。（可能不好理解，动手试试就理解了。）

绝对定位对齐右侧版心

• 先left：50%,然后往右走版心的一半距离即可，即：margin-left：版心一半距离

背景透明和元素透明

• background: rgba(0,0,0,.1-1) 背景透明顾名思义，只设置背景颜色或者背景图片透明，不影响内容。
• opacity:0-1 元素透明，元素内的所有内容包括背景都设置透明
• filter:alpha(opacity:1-100) 这个只针对IE的旧版本，因为它们不认识上面两个

优雅降级和渐进增强

• 它们是一种布局思路，正好相反。优雅降级是以最新的浏览器版本为准来布局，然后通过一些调整来兼容低版本浏览器。而渐进增强是以低版本为准。
• 现在一般是优雅降级比较多。