前言：刚刚接触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. Centos/Fedora下安装Twisted，failed with error code 1 in /tmp/pip-build-H1bj8E/twisted/解决方法

    Python踩坑之路 pip/easy_install无法安装Twisted或者安装后无法导入Twisted 看到MM网站上很多图,想用Scrapy框架爬点图,遇到各种库的问题,蛋疼. 一直twist ...

  2. 计算机网络【8】—— Get和Post请求的区别

    get参数通过url传递,post放在request body中. get请求在url中传递的参数是有长度限制的,而post没有. get比post更不安全,因为参数直接暴露在url中,所以不能用来传 ...

  3. 计算机网络【4】—— TCP和UDP的区别

    一.TCP/UDP优点和缺点 TCP的优点: 可靠,稳定 TCP的可靠体现在TCP在传递数据之前,会有三次握手来建立连接,而且在数据传递时,有确认.窗口.重传.拥塞控制机制,在数据传完后,还会断开连接 ...

  4. React之智能组件和木偶组件

    智能组件 VS 木偶组件 在 React + Redux 结合作为前端框架的时候,提出了一个将组件分为“智能”和“木偶”两种 智能组件:它是数据的所有者,它拥有数据.且拥有操作数据的action,但是 ...

  5. 第219天：Angular---过滤器

    在Angular中,过滤器的功能主要是格式化数据表达式,且可以自定义过滤器.作用域(scope)主要服务于页面模板,在控制器和页面中起桥梁作用,保存模板中的数据对象,为模板中的元素提供方法和属性. 一 ...

  6. Visual Categorization with Bags of Keypoints

    1.Introduction and backgrounds 作为本周的论文之一,这是一篇bag of features的基本文章之一,主要了解其中的基本思路,以及用到的基本技术,尽量使得细节更加清楚 ...

  7. 访问控制列表-ACL匹配规则

    1 .ACL匹配机制 首先,小编为大家介绍ACL匹配机制.上一期提到,ACL在匹配报文时遵循“一旦命中即停止匹配”的原则.其实,这句话就是对ACL匹配机制的一个高度的概括.当然,ACL匹配过程中,还存 ...

  8. hihocoder1711 评论框排版[并查集+set]

    #include <cstdio> #include <iostream> #include <set> using namespace std; ; struct ...

  9. [洛谷P5216]DLS 采花

    题目大意:有$n$个数,任意排列,排列后第$i$个数会产生贡献当且仅当$1\sim i-1$中的数不是它的因子,问所有排列的贡献和 题解:发现一个数要产生贡献要求所有它的因子在它的右边,设有$cnt_ ...

  10. 【BZOJ2724】蒲公英（分块）

    [BZOJ2724]蒲公英(分块) 题面 洛谷 谴责权限题的行为 题解 分块什么的都不会,根本就没写过几次. 复杂度根本不会分析,吓得我赶快来练练. 这题要求的是区间众数,显然没有什么很好的主席树之类 ...