box-sizing: border-box;的作用
2024-08-30 14:29:31
box-sizing 属性可以被用来调整这些表现:
content-box
是默认值。如果你设置一个元素的宽为100px,那么这个元素的内容区会有100px宽,并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
border-box
告诉浏览器去理解你设置的边框和内边距的值是包含在width内的。也就是说,如果你将一个元素的width设为100px,那么这100px会包含其它的border和padding,内容区的实际宽度会是width减去border + padding的计算值。大多数情况下这使得我们更容易的去设定一个元素的宽高。
border-box
width
和 height
属性包括内容,内边距和边框,但不包括外边距。这是当文档处于 Quirks模式 时Internet Explorer使用的盒模型。注意,填充和边框将在盒子内 , 例如, .box {width: 350px; border: 10px solid black;}
导致在浏览器中呈现的宽度为350px的盒子。内容框不能为负,并且被分配到0,使得不可能使用border-box使元素消失。
这里的维度计算为: width = border + padding + 内容的 width, height = border + padding + 内容的 height。
最新文章
- 使用C#类向数据库添加数据的例子源码
- JPA in Spring
- Android狂记忆
- [转]动态调用webservice时 ServiceDescriptionImporter类在vs2010无法引用的解决方法
- Tomcat内存溢出解决办法
- EF 用CallContext上下文管理
- mysql kill操作
- python 缩进问题
- js、jquery、动态添加option项
- SQL Server Profiler参数说明
- ORA-600[kcratr_scan_lastbwr]逻辑坏块解决
- Intellij Idea自动加载改动文件和自动自动热部署加载
- Redis单机版和集群版的安装和部署
- jQuery添加删除节点例子第十节";员工增删表";
- Uber是如何重新思考GPS定位的(尤其是在城市峡谷中)
- h5唤起APP并检查是否成功
- C#版 - Leetcode 414. Third Maximum Number题解
- 章节九、2-使用firefoxdriver浏览器进行自动化测试
- linux命令--cut的使用
- 【MySql】like用法
热门文章
- VMware虚拟机 NAT模式 配置静态ip
- Linux之VMware虚拟机取消DHCP
- LoadBitmap(IDB_BITMAP1) -- 未定义标识符 IDB_BITMAP1
- 【Codeforces Round #503 (Div. 2)】
- codevs——1503 愚蠢的宠物
- decorate all function in all module
- 如何删除xcode启动主页面项目列表
- 基于源码学习-fighting
- JAVASE学习笔记:第八章 经常使用类Util工具包之日期类、数字类
- 【转载】关于Hash