day10
BFC规则
1. 什么是BFC规则?
Block Formatting Context 块级格式化上下文
块级元素的渲染区域规则 BFC盒子 外部不影响内部 内部不影响外部
2. 哪些属性可以触发BFC规则?
1. float不为none
2. position属性为absolute或fixed
3. oveflow不为visiable
4. html 根标签
3. BFC有哪些规则
1. BFC盒子内部的子标签按照垂直从上到下排
2. 共用一个BFC盒子的垂直方向上的外边距会发生塌陷现象
3. 子标签都会在父盒子的左边界停靠,即使浮动元素也如此
4. BFC盒子内部浮动元素也要参与高度计算
5. BFC区域和浮动元素不重叠
6. BFC盒子是一个密闭空间 外部不影响内部 内部不影响外部
4.解决的问题
1—》外边距塌陷
2—》浮动特性
3—》清除浮动影响
4----》图文不环绕 (p+overflow)
经典的多列布局
自适应: 一个盒子的宽度随着屏幕宽度发生变化 单位:%
两列自适应布局
原理: 两列并排 左列固定宽度 右列宽度自适应(100%)
/* 1.解决方案:左列+ float: left; */
/* 2.解决方案 左列+ position:absolute */
三列自适应布局
原理: 左右两列固定宽度 中间列自适应 (100%)
圣杯布局
过程:
三列同时左浮动,中间列写到结构的上面去,利用负外边距把两列放到中间列上,然后利用最外侧大盒子的内边距和相对定位把中间列内容居中
双飞翼布局
过程:
原理:三列同时左浮动,中间列写到结构的上面去,利用负外边距把两列放到中间列上,然后利用中间列盒子的内容盒子的外边距把中间列内容居中
图片优化技巧
减少http请求 降体积
-
合适地方选择合适的图片类型
jpg 不支持背景透明 装饰性,商品盒子图片 (60-70)
png 支持背景透明 (精灵图)png-8
webp 背景透明+ 无损压缩+体积小 不兼容ie8-
- 在线压缩工具 压缩图片
- 小图拼合成精灵图
- 单一的小图 纯色 —》字体图标
- 图片可以采用编码 base64
轮播图结构
原理:
层叠问题总结
使用了 position 属性值为 absolute、relative 的层,将会比普通层更高层次。使用了小于1的 opacity 属性的层,也比普通层更高层次,并且和指定 position 的层同层,但是不支持 z-index 属性,所以指定 position 的层,可以使用 z-index 属性,来覆盖带有小于1的 opacity 属性的层。”