前言：刚刚接触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. Android自动化之旅—生成渠道包

    美团Android自动化之旅—生成渠道包:http://tech.meituan.com/mt-apk-packaging.html   Android Studio系列教程六--Gradle多渠道打 ...

  2. IE userdata 原理 应用 详解

    https://www.cnblogs.com/chyong168/archive/2012/04/24/2467505.html 在Internet Explorer 5中,Microsoft提供了 ...

  3. bzoj2302-Problem c

    题意 有 \(n\) 个人,从 1 到 \(i\) 编号.给每个人一个值 \(a_i\) ,他们会按编号从小到大进行如下操作:查看 \(a_i\) 有没有人,若没有就坐进去,否则查看 \(a_i+1\ ...

  4. BZOJ2186 SDOI2008沙拉公主的困惑（数论）

    由于n!是m!的倍数,而对于每个与m!互质且小于m!的数x,x+m!.x+2*m!……也与其互质,所以答案即为(n!/m!)*φ(m!). φ(m!)=m!*∏(1-1/pi).其中的pi即为1~m中 ...

  5. js浏览器缩放提示

    data() { return { instance: null, isZoomOpen: false }; }, mounted() { const that = this; this.isZoom ...

  6. 【CF938G】Shortest Path Queries（线段树分治，并查集，线性基）

    [CF938G]Shortest Path Queries(线段树分治,并查集,线性基) 题面 CF 洛谷 题解 吼题啊. 对于每个边,我们用一个\(map\)维护它出现的时间, 发现询问单点,边的出 ...

  7. 【BZOJ2654】tree

    Time Limit: 30 Sec Memory Limit: 512 MB Description ​ 给你一个无向带权连通图,每条边是黑色或白色.让你求一棵最小权的恰好有need条白色边的生成树 ...

  8. Android Studio之BuildConfig类

    https://blog.csdn.net/lvxiangan/article/details/71601451 Android Studio开发中,把一个module输出打包为jar文件,我们会发现 ...

  9. windows service(system权限)创建用户权限进程

    windows编程的人都知道,在其操作系统下,进程被创建,通常被赋予很多属性,其中一项属性就是用户名,及进程所属的权限.打开任务管理器,可查看到. 通常桌面系统explorer的权限是User权限,即 ...

  10. python 文件路径问题

    需要用到 os 模块和 sys 模块 import os print(__file__)# 输出相对路径 print(os.path.abspath(__file__)) #输出绝对路径 # D:\P ...