day12

1 html的兼容

lte 小于等于 gt大于 lt小于 gte 大于等于

css的兼容

IE6以下不支持子代选择器

属性前边添加下划线，IE6以下支持

属性前边添加*，IE7以下支持

\9 IE10以下支持 \0 IE8以上支持

2 常见浏览器兼容问题

• 1 图片会向下撑大3个像素
• 解决方式：1给图片添加vertical-align:top/middle/bottom
• 2 给图片添加display：block
• 3 给父元素添加font-size:0
• 2 超链接出来的图片，在ie10以下浏览器中会出现边框问题
• 解决方式：给图片添加border：none
• 3 表单行高不一致
• 解决方式：给input添加float
• 4 表单高度不一致
• 解决方式：单独设置高度、由于按钮默认按照怪异盒计算，因此需要添加怪异盒子属性 box-sizing:border-box
• input的边框在不同的浏览器中解析的值不同，可以手动设置边框
• 5 透明度的兼容
• opacity 值0-100 IE8以下不支持，filte：alpha（opacity值 0-100）
• opacity与filter实现透明度，内容会跟着透明，rgba不会
• 6 鼠标指引 ：变成小手型
• cursor：hand ie8以下支持，cursor：pointer所有浏览器都支持
• 7 ie6的双边距问题：ie6将float的元素margin按照双倍解析
• 解决：给float的元素添加display:inline
• 8 ie6的默认高度问题 ie6将低于16px的高度按照16px去解析
• 解决方式 设置font-size:0 或者overflow：hidden
• 9 百分比 ie7以下将50%+50%计算出大于100%
• 解决方式：给右边的元素添加clear：right

3 fc格式化上下文

bfc 块级格式化上下文

ifc 行内格式化上下文

ffc 弹出格式化上下文

gfc 网络格式化上下文

4 bfc的解析规则

• 1 bfc的区域是独占一行，自上而下排列
• 2 bfc的区域上下的margin值会发生重叠，取较大值
• 3 活动的bfc区域上下margin值不会发生重叠
• 4 bfc的区域与包含块的左边相接触
• 5 同一个bfc的区域不会影响其他的区域
• 6 bfc的区域计算高度时浮动元素会参与计算

可以触发bfc的条件

• 1 根元素html
• 2 元素添加position：absolute、fixed
• 3 overflow的值不为默认值，可以为hidden、scroll、auto
• 4 display的属性值为inline-block，flex,grid,table-caption table-cell

5 IFC行内格式化上下文

如果IFC的区域添加了一个块级元素，会将IFC分成2个IFC

应用：水平垂直居中

6 最大最小宽高

• width定值 如果浏览器窗口比给定值小，会出现左右滚动条，大的话就只能显示给定值的宽度
• min-width：最小宽度，如果浏览器窗口比给定值小，则按照给定值去显示，会出现滚动条，如果浏览器窗口比给定值大，则按照浏览器窗口的宽度去显示
• max-width,最大宽度，如果浏览器窗口比给定值小，不会出现滚动条，元素的宽度是浏览器窗口的宽度，如果浏览器窗口比给定值大，只显示给定值的宽度
• height 高度定值，如果内容的高度超过了给定值的高度，按照给定值显示，内容会溢出，没有超出则按照给定值显示
• max-height 最大高度，如果内容的高度没有超出给定高度，按照内容显示，如果内容的高度超过了给定值的高度，内容会溢出
• min-height 最小高度，内容如果没有超出给定值高度，则按照给定值高度去显示，如果内容的高度超过了给定值高度，则按照内容高度显示

宽度自适应：设置百分比

高度自适应：不设置高度

7 伪类和伪元素

伪元素选择器：相当于在html中添加了一个标签

• ：after 内容的后边，与content连用
• ：before 内容的前边，与content连用
• ：first-line：第一行，对块级元素生效
• ：first-letter 第一个字符，对块级元素生效
• ：：selection 必须是双冒号，选中内容的样式

8 伪类选择器

：hover 鼠标悬停

伪类是类，伪元素是元素，权重不同，伪类的权重是10，伪元素的权重是1，

超链接的4个伪类

初始状态： a link

鼠标悬停： a hover

鼠标点击时抬起：a active

鼠标点击过后：a visited

超链接的4个伪类顺序：link visited hover active （喜欢讨厌）