盒子模型
Flex 排版的核心是 display:flex 和 flex 属性,它们配合使用。具有 display:flex 的元素我们称为 flex 容器,它的子元素或者盒被称作 flex 项。
flex 项如果有 flex 属性,会根据 flex 方向代替宽 / 高属性,形成“填补剩余尺寸”的特性,
Flex 的原理
垂直居中
<div id="parent">
<div id="child">
</div>
</div>
#parent {
display:flex;
width:300px;
height:300px;
outline:solid 1px;
justify-content:center;
align-content:center;
align-items:center;
}
#child {
width:100px;
height:100px;
outline:solid 1px;
}
两列等高
<div class="parent">
<div class="child" style="height:300px;">
</div>
<div class="child">
</div>
</div>
<br/>
<div class="parent">
<div class="child" >
</div>
<div class="child" style="height:300px;">
</div>
</div>
.parent {
display:flex;
width:300px;
justify-content:center;
align-content:center;
align-items:stretch;
}
.child {
width:100px;
outline:solid 1px;
}
自适应宽度
<div class="parent">
<div class="child1">
</div>
<div class="child2">
</div>
</div>
.parent {
display:flex;
width:300px;
height:200px;
background-color:pink;
}
.child1 {
width:100px;
background-color:lightblue;
}
.child2 {
width:100px;
flex:1;
outline:solid 1px;
}
浏览器解析
浏览器工作:
- 通过 http或者https 向服务端请求页面
- 请求回来的html 经过解析 构建DOM 数
- 计算树上的css属性
- 根据css 属性对元素进行渲染 得到内存中的位图
- 位图进行合成 合成之后绘制到界面上
从域名到 IP 地址,需要用 DNS 协议查询
HTTP 协议是用 TCP 传输的,所以会有 TCP 建立连…
如果使用 HTTPS,还有有 HTTPS 交换证书
每个网页还有图片等请求
性能优化
性能应该是基于业务和实际用户体验需求的一种工程实施
性能问题可以分成很多方面,最重要的几个点是
页面加载性能(跟用户的流失率有非常强的关联性,而用户流失率,正是公司业务非常看重的指标);
动画与操作性能;
内存、电量消耗。
因此优化重点放在页面加载性能上
用户平均加载时间(数字大约是 1 秒)
技术方案:
缓存:
降低请求成本
减少请求数
减少传输体积 避免大图片 使用svg