css: line-height 与box-sizing
css
1、line-hight:
行高line-height,是文本行基线这件的距离,不是字体大小,它确定了各个元素框的高度增加或减少多少。
对于块级元素:定义了元素中文本基线之间的最小距离。
line-height并不影响替换元素的布局,但是确实可以应用到替换元素。
行间距:line-height - font-size
定义font属性的时候,用户代理会自动会生成一个line-height。
浏览器 | FF | ||||||
字体大小(font-size) | 12px | 13px | 14px /15px | 16px | 18px | 20px | 22px |
行高(line-height) | 17px | 19px | 20px | 21px | 24px | 27px | 30px |
浏览器 | Chrome | ||||||
字体大小(font-size) | 12px | 13px | 14px /15px | 16px | 18px | 20px | 22px |
行高(line-height) | 17px | 19px | 20px | 21px | 24px | 27px | 30px |
浏览器 | IE9 | ||||||
字体大小(font-size) | 12px | 13px | 14px | 16px | 18px | 20px | 22px |
行高(line-height) | 15.8px | 17.2px | 18.5px | 21.2px | 23.8px | 26.4px | 29px |
浏览器 | 360 | ||||||
字体大小(font-size) | 12px | 13px | 14px /15px | 16px | 18px | 20px | 22px |
行高(line-height) | 17px | 19px | 20px | 21px | 24px | 27px | 30px |
在inline元素中,不是文字撑开了div的高度,而是line-height!
2、box-sizing
只是为了规定box modeling
box-sizing : content-box || border-box || inherit
content-box 为默认值
转载于:https://www.cnblogs.com/flymood/p/4245245.html
css: line-height 与box-sizing相关推荐
- html5调盒子边框大小,CSS3 - 盒子大小(CSS3 - Box Sizing)
CSS3 - 盒子大小(CSS3 - Box Sizing) Box大小调整属性用于更改元素的高度和宽度. 从css2开始,box属性的工作方式如下所示 -width + padding + bord ...
- 详解CSS的盒模型(box model) 及 CSS3新增盒模型计算方式box-sizing
W3C规范 一般来说,页面中的每一个元素都会形成一个矩形盒子,渲染引擎根据给定的样式确定这个盒子的呈现.通俗的来说,页面的布局就是一个个盒子的排列和摆放.掌握了盒子呈现的本质,布局也就轻而易举. 在 ...
- [css] body{height:100%}和html,body{height:100%}有什么区别?为什么html要设置height:100%呢,html不就是整个窗口吗?
[css] body{height:100%}和html,body{height:100%}有什么区别?为什么html要设置height:100%呢,html不就是整个窗口吗? html是body的父 ...
- [css] css的height:100%和height:inherit之间有什么区别呢?
[css] css的height:100%和height:inherit之间有什么区别呢? 上周在微博上无节操吐槽了下inherit的段子,没想到回声还不少: 微博inherit无节操段子 不过inh ...
- 解决css中height:100%失效的问题
解决css中height:100%失效的问题 参考文章: (1)解决css中height:100%失效的问题 (2)https://www.cnblogs.com/wangweizhang/p/111 ...
- html如何设定盒子的高,css 高度height设置
css height[css 高度]教程 height翻译成中文也是高.高度意思.在CSS样式中高度样式设置也是height来布局.几乎每个网页布局都会用到css高度height样式,特别是布局局部时 ...
- CSS中height:100vh和height:100%的区别是什么?
CSS中height:100vh和height:100%的区别 首先,我们得知道1vh它表示的是当前屏幕可见高度的1/100,而1%它表示的是父元素长或者宽的1%(可以这么理解?) 1.对于设置hei ...
- html vh和百分比,css中height 100vh的应用场景,动态高度百分比布局,浏览器视区大小单位...
css中height 100vh的应用场景,动态高度百分比布局,浏览器视区大小单位 height:100vh 一些只能vw, vh才能完成的应用场景: 1. 场景之:元素的尺寸限制 vw vh 主要是 ...
- html中高与行高的区别,深入了解css的行高Line Height属性
什么是行间距? 古时候我们是用印刷机来处理文字,印出来的每个字都位于独立的一个块里. 行间距,即传说中控制两行文字之间垂直距离的东东. 在CSS,line-height被用来控制行与行之间的垂直距离. ...
- html5 box sizing,CSS 盒模型与box-sizing
一.盒模型 一个web页面由许多html元素组成,而每一个html元素都可以表示为一个矩形的盒子,CSS盒模型正是描述这些矩形盒子的存在. MDN的描述: When laying out a docu ...
最新文章
- 从四个点来讲透OKR怎么设置的?
- 丽水松阳计算机职业高中学校,丽水松阳职专
- python enumeration_python模块之enum_上
- java arraylist add时默认调用tostring_从一道例题谈Arrays.toString()与其他String的转换方法...
- readline_Swift readLine(),Swift print()
- 在ubuntu下配置C和C++的编译环境
- leetcode探索动态规划(三)
- 偷窥JCache API(JSR 107)
- Labelimg讲解
- sql时间转换时分秒_sql时间格式转换yyyymm
- net share命令删除共享
- ffmpeg实现视频切割合并
- 什么是云计算?云计算概念集合
- matlab凑数求和,excel自动凑数求和 使用规划求解来解决excel自动凑数求和的方法...
- 安科瑞智能照明控制系统在医院行业的应用
- [bzoj3140][二分图匹配]消毒
- 谷歌浏览器任何页面都打不开连设置也不能打开
- thingworx项目-mushup
- php微信摇一摇,申请开通微信摇一摇
- python 手把手教你基于搜索引擎实现文章查重
热门文章
- 深度学习语音降噪方法对比_人工智能-关于深度学习的基础方法
- 【修改版】10行代码爬取A股上市公司信息
- 苹果6sp内存可以扩展吗_苹果手机iPhone 12 mini能用6年吗?网友:可以
- 网络验证常见的攻击方式与防御手段
- Could NOT find SDL (missing: SDL_LIBRARY SDL_INCLUDE_DIR)
- spring boot: GlobalDefaultExceptionHandler方法内的友好错误提示,全局异常捕获
- 关于TextBox控件字体颜色绑定
- Java反射 - 2(对象复制,父类域,内省)
- 如何将git上的代码迁移到Coding上
- rman datafile恢复(归档模式)