前言:刚刚接触css3的盒模型,感觉对于解决水平垂直居中、固定宽度/高度和可变宽度/高度同时存在这样的问题很有效。但是最近在看一个腾讯手机端框架(Frozen UI )的时候发现一个很神奇的多行文字截断的样式,感觉:我靠,怎么那么神奇,如下图

框了一下它的css,如下图:

我一看这貌似是盒模型的用法吧,但是不是说现在最新版本的都用display:flex吗,为啥还有display:-webkit-box的用法呢,而且之前也见ionic里面也是老的用法,那么问题来了,
1.盒模型现在用的多不,兼容性好不,还是说以后写css要尽量避开使用?
2.有么有什么通用的解决电脑网页的兼容的方法,有么有什么通用的解决手机端网页的兼容的方法?
3.由于好奇顺便问一下,多行文字截断css方面怎么解决?
以上,问完,收工~

css的盒模型手机端兼容写法应该是啥样的呢?的更多相关文章

  1. 利用Div+CSS(嵌套+盒模型)布局页面完整实例流程

    Div+CSS(嵌套+盒模型)布局页面完整实例流程: <!DOCTYPE html><html> <head>  <meta charset="UT ...

  2. CSS中盒模型的理解

    今天突然看到一篇关于CSS中盒模型的文章,忽然觉得自己竟然遗忘了很多小的地方,所以写一篇文章来记忆一下 (摘抄于千与千寻写的CSS盒子模型理解,并在自己基础上添加了一些东西,希望更完善,对大家有帮助) ...

  3. 前端设计的常用属性,CSS的盒模型,页面布局的利器

    在CSS和HTML结合布局页面的过程中,有一组被人们称为“盒属性”的CSS样式,被广泛的使用到.相信经常布局写页面的朋友们对盒属性一定不陌生.在CSS技术的发展过程中,盒属性也有了许多次改进,今天小编 ...

  4. 深入理解CSS弹性盒模型flex

    × 目录 [1]版本更迭 [2]display [3]基本概念[4]伸缩容器[5]伸缩项目 前面的话 CSS3引入了一种新的布局模型——flex布局.flex是flexible box的缩写,一般称之 ...

  5. css之盒模型

    盒模型由内容(content).填充(padding).边框(border).边界(margin)组成,一个盒子中主要的属性就5个:width.height.padding.border.margin ...

  6. CSS弹性盒模型flex在布局中的应用

    × 目录 [1]元素居中 [2]两端对齐 [3]底端对齐[4]输入框按钮[5]等分布局[6]自适应布局[7]悬挂布局[8]全屏布局 前面的话 前面已经详细介绍过flex弹性盒模型的基本语法和兼容写法, ...

  7. CSS 2. 盒模型|浮动

    1.盒模型 盒模型: 在网页中 基本上都会显示一些方方正正的盒子,这种盒子就被我们称为盒模型.重要的属性: width,height,padding,border, margin 盒子模型通过四个边界 ...

  8. CSS弹性盒模型flex概念

    盒模型分为:标准w3c盒模型.IE盒模型.以及css中的伸缩盒模型. 先说CSS的伸缩盒模型:flex模型是CSS3引入的新的布局模型,是flexible box的缩写,一般称之为弹性盒模型.和CSS ...

  9. css 06-CSS盒模型详解

    06-CSS盒模型详解 #盒子模型 #前言 盒子模型,英文即box model.无论是div.span.还是a都是盒子. 但是,图片.表单元素一律看作是文本,它们并不是盒子.这个很好理解,比如说,一张 ...

随机推荐

  1. 一个不错的微信应用JS API库

    1.API能实现什么? 1.分享到微信朋友圈 2.分享给微信好友 3.分享到腾讯微博 4.新的分享接口,包含朋友圈.好友.微博的分享(for iOS) 5.隐藏/显示右上角的菜单入口 6.隐藏/显示底 ...

  2. 更新ffmpeg

    今天对公司线上的几台机器做了下ffmpeg的更新,没有什么技术含量,还是简单记录下,做个流水账~哈哈 软件包获取方式 官方网站:https://ffmpeg.org/download.htmlgith ...

  3. Android CollapsingToolbarLayout

    第一次看到这种用户体验是在Google Play Store App的应用详情的Activity中. 大的Banner图,能第一时间吸引用户的眼球,用不一样的Banner大图更具个性化的展示内容.图总 ...

  4. BZOJ4919 [Lydsy1706月赛]大根堆 【dp + 启发式合并】

    题目链接 BZOJ4919 题解 链上的\(LIS\)维护一个数组\(f[i]\)表示长度为\(i\)的\(LIS\)最小的结尾大小 我们可以用\(multiset\)来维护这个数组,子树互不影响,启 ...

  5. 安装linux系统后调优及安全设置

    环境说明: [root@server1 ~]# cat /etc/redhat-release CentOS release 6.9 (Final) [root@server1 ~]# uname - ...

  6. 【bzoj1031】 JSOI2007—字符加密Cipher

    http://www.lydsy.com/JudgeOnline/problem.php?id=1031 (题目链接) 题意 给出一个字符串,求它的加密串. Solution 很显然,将串倍长后求它的 ...

  7. mac 使用tree命令

    下载软件包: http://mama.indstate.edu/users/ice/tree/ 安装说明: http://www.qiansw.com/mac-os-x-install-tree-co ...

  8. Java的I/O系统

    1.File类 File类既能代表一个特定文件的名称,又能代表一个目录下的一组文件的名称. 如果我们调用不带参数的list()方法,便可以获得此File对象包含的全部列表.然而,如果我们想获得一个受限 ...

  9. 适用于vue项目的打印插件

    此方法只适用于现代浏览器,IE10以下就别用了 // 使用时请尽量在nickTick中调用此方法 //打印 export default (refs, cb) => { let cloneN i ...

  10. OpenStack 认证服务 KeyStone连接和用户管理(四)

    连接keystone两种方式: 一种使用命令 一种使用环境变量 1.通过环境变量方式连接keystone(适合在初始化场景使用) 配置认证令牌环境变量 export OS_TOKEN=07081849 ...