HTML+CSS:移动端分辨率、视口、Flex布局、文字溢出显示省略号、溢出两行显示省略号

一、分辨率分类

  • 物理分辨率是生产屏幕时就固定的,它是不可被改变的
  • 逻辑分辨率是由软件(驱动)决定的

制作网页参考物理分辨率还是逻辑分辨率?

  • 逻辑分辨率

移动端主流设备分辨率
在这里插入图片描述

二、视口

使用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;
  }
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值