box-sizing:border-box;的一些坑
来源:互联网 发布:手机淘宝无法识别图片 编辑:程序博客网 时间:2024/06/02 05:30
近日在使用新属性box-sizing:border-box;的时候遇到了一些问题很致命,很费时间,情况就如下面的例子。给全局加了box-sizing:border-box;属性。文字里需要带入彩色的标签,高度是16px,左右padding各5px,line-height自然而然就是16了。但这时就会出现图一的情况文字上下并不是剧中的。从正常逻辑思维出发,我找不到一丝纰漏怎么改也不对怎么给都是剧中不了。只有不按常规,高度是16,行高给14这样才好看一点了。算是暂时应付上线。
属性虽好用,但有时候会将你带入坑中无法自拔。迷迷糊糊在项目中解决了问题单一直不知道原因出在哪里。现在回想起来有按着当时的情景重敲了一遍忽然就想明白了。正常思维,按W3C标准盒模型是content,padding,border,margin。而使用了box-sizing:border-box;后盒模型就乱了套。padding和border就会被算在实际宽高中。所以我的高度16中还包含有上下边框2px。这样就只能给高度16px;line-height:14;或者是将高度改为18px;line-height:16px。问题就得以解决了。
0 0
- box-sizing:border-box;的一些坑
- box-sizing:border-box
- box-sizing:border-box;
- box-sizing:border-box
- box-sizing:border-box;
- box-sizing border-box 的理解
- box-sizing border-box 的理解
- box-sizing中content-box和border-box的区别
- * { Box-sizing: Border-box } FTW
- box-sizing:border-box 解释
- box-sizing:border-box;和 box-sizing:content-box;
- box-sizing:border-box设置并排带边框的容器
- box-sizing:border-box用于移动端页面的开发!
- CSS3 box-sizing border-box 学习笔记
- 关于css中的box-sizing:border-box
- box-sizing:border-box,padding-box 颠覆盒子模型
- 盒子模型 box-sizing中content-box和border-box
- 理解box-sizing属性border-box,content-box
- java synchronized特性
- Note7燃损真相大白 电池是祸根
- redis持久化原理详解
- pandas画图
- java多线程CountDownLatch及线程池ThreadPoolExecutor/ExecutorService使用示例
- box-sizing:border-box;的一些坑
- Understadning treeReduce() in Spark
- 【BZOJ1503】Splay 区间删除 (1)
- spring 使用get/set注入对象的属性值
- 【BZOJ 2561】最小生成树 最小割
- 数据源
- 如何动态修改log4j2的配置文件路径,并兼容commong logging门面框架
- 5.4.2.1、SSAS-创建计算-同环比
- Kaldi lattices format