文章目录
一、分辨率分类
- 物理分辨率是生产屏幕时就固定的,它是不可被改变的
- 逻辑分辨率是由软件(驱动)决定的
制作网页参考物理分辨率还是逻辑分辨率?
- 逻辑分辨率
移动端主流设备分辨率
二、视口
使用meta标签设置视口宽度,制作适配不同设备宽度的网页
思考:默认情况下,网页的宽度和逻辑分辨率相同吗?
- 不同,默认网页宽度是980px。
解决办法:添加视口标签。
视口:显示HTML网页的区域,用来约束HTML尺寸
- viewport:视口
- width=device-width:视口宽度=设备宽度
- initial-scale=1.0:缩放1倍(不缩放)
三、Flex布局
Flex布局/弹性布局:
- 是一种浏览器提倡的布局模型
- 布局网页更简单、灵活
- 避免浮动脱标的问题
作用
- 基于 Flex 精确灵活控制块级盒子的布局方式,避免浮动布局中脱离文档流现象发生。
- Flex布局非常适合结构化布局
设置方式
- 父元素添加
display: flex
,子元素可以自动的挤压或拉伸
组成部分
- 弹性容器
- 弹性盒子
- 主轴 使用 justify-content 调节元素在主轴的对齐方式
- 侧轴 / 交叉轴
思考:网页中,盒子之间有距离吗?
答:有。 - 在Flex布局模型中,调节主轴或侧轴的对齐方式来设置盒子之间的间距。
3.1 justify-content 主轴对齐方式
修改主轴对齐方式属性: justify-content
justify-content: flex-end;
justify-content: flex-start;
3.2 align-items 侧轴的对齐方式
- align-items(添加到弹性容器)
- align-self:控制某个弹性盒子在侧轴的对齐方式(添加到弹性盒子)
3.3 伸缩比 flex:value;
- flex : 值;
- 取值分类
数值(整数)
注意: 只占用父盒子剩余尺寸
3.4 flex-direction 改变元素排列方向
使用flex-direction改变元素排列方向
- 思考:Flex布局模型中,弹性盒子默认沿着哪个方向排列?
答:水平方向。 - 思考:如何实现内容垂直排列?
主轴默认是水平方向, 侧轴默认是垂直方向
修改主轴方向属性: flex-direction
3.5 flex-wrap 弹性盒子换行
思考:默认情况下,多个弹性盒子如何显示?
- 弹性盒子换行显示: flex-wrap: wrap;
- 调整行对齐方式:align-content
取值与justify-content基本相同
3.6 文字溢出显示省略号text-overflow: ellipsis
一行文字溢出显示省略号
.orders .goods .txt {
flex: 1;
/* 溢出的时候显示省略号 */
/* 因为弹性盒子的尺寸可以被内容撑开, 不换行的文字可以撑开这个盒子的尺寸 */
width: 0;
}
.orders .goods .txt h5 {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
两行文字溢出显示省略号
.ellipsis-2 {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}