爱站程序员基地BFC、布局、属性选择符、非IE常见bug
- BFC
- 计算值的表达式 calc（）
- width的属性值
- 雪碧图
- 非IE浏览器常见bug
- 属性选择符（通过html属性选择元素）
- 浏览器四大内核
- 结构性伪类
- 每日一丧
BFC
BFC:
块级格式化上下文 -> 独立的渲染区
-
BFC布局规则：
一、内部的Box会在垂直方向，一个接一个地放置。
二、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠（按照最大margin值设置）
三、每个元素的margin box的左边， 与包含块border box的左边相接触
四、BFC的区域不会与float box重叠。
五、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
六、计算BFC的高度时，浮动元素也参与计算 -
BFC的触发条件：
根元素(html)
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible -
BFC的应用
1、自适应两栏布局
2、清除内部浮动
3、防止margin上下重叠
##圣杯布局、双飞翼布局
这两种布局都是三列布局，只是叫法不一样，两边固定，中间高度自适应。
- 圣杯布局
两侧用float 设置两个div，中间的用overflow：hidden（开启bfc）来控制宽度。 - 双飞翼布局
*两侧还是用浮动，假设两侧浮动的div宽度是150px，中间的部分在外边套一个div，高100%，左右设置上padding：150px，把子元素挤到中间。子元素高100%。
计算值的表达式 calc（）
计算宽高的的表达式：calc( 100%-150px )
100% * 2
100% – 10px
10em – 10px
width的属性值
fill-available 合理分配有效剩余空间
min-content 找子元素最小的宽度
max-content 找子元素最大的宽度
fit-content 找子元素内容的宽度。按照子元素的宽度进行设置
雪碧图
背景图整合规则：
1：整合的大图必须是透明
2：小图标尽量上下排列
3：小图标之间的间距根据实际需求留出足够大小。
非IE浏览器常见bug
1:图片会把容器撑大大约3px.
css hack:
a：img标签两侧不要回车
b: img{display:block;}
2:表单元素对齐不一致：
css hack:
给input添加浮动
3：按钮大小不一致：
a：如果一个input按钮有边框，在input按钮的外面套一个元素，给元素添加边框
b: 如果一个按钮是一张图片的情况，直接切图，做背景即可
c: 不在表单里面的按钮，都用a模拟。
4：透明属性opacity:
css hack:
opacity:0.5;
filter:alpha(opacity=50);
5：鼠标指针BUG: cursor:hand; 不兼容
CSS hack:
cursor:pointer; 手指形状
cursor:
auto默认
crosshair加号
text文本
wait等待
help帮助
progress过程
inherit继承
move移动
ne-resize向上或向右移动
pointer手形
属性选择符（通过html属性选择元素）
选择符[属性]{ } -> 带有当前属性的标签会匹配
选择符[属性=“属性值”]{} -> 属性和属性值都需要匹配
选择符[属性~=“属性值”]{} -> 属性值是一个词列表。包含当前词的时候就匹配
选择符[属性*=“属性值”]{} -> 属性值包含当前字符即可匹配。
选择符[属性^=“属性值”]{} -> 属性值必须是当前字符开头可匹配
选择符[属性$=“属性值”]{} -> 属性值必须是当前字符结尾可匹配
选择符[属性|=“属性值”]{} -> 属性值仅是当前词，或者是以当前词- 开头 则匹配 ”left-con“
浏览器四大内核
Trident 代表作：IE
Gecko 代表作：Mozilla
Webkit 代表作：苹果、之前版本的谷歌
Blink 代表作：新版本谷歌、新版本Opera
形成兼容的根本原因：因为内核不同。
结构性伪类
选择符:first-child{ }
选择符：last-child{ }
选择符：nth-child(number){ }
选择符：nth-last-child(number){ }
选择符：only-child{ }
选择符:first-of-type{ }
选择符：last-of-type{ }
选择符：nth-of-type(number){ }
选择符：nth-last-of-type(number){ }
选择符：only-of-type{ }
最后补充，选择符 :empty{} 选中全部的空标签。
:foot{}捕获的元素是根标签。
每日一丧
等不到的晚安别等了，挤不进的世界别挤了，走不下去的路别走了，不该爱的人也别爱了。
