”盒模型“之如何防止边框和内边距把元素撑开
时间:2022-04-23
本文章向大家介绍”盒模型“之如何防止边框和内边距把元素撑开,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
在我们讨论宽度的时候,我们应该讲下与它相关的一个重点知识:盒模型。当你设置了元素的宽度,实际展现的元素却能够超出你的设置:因为元素的边框和内边距会撑开元素。看下面的例子,两个相同宽度的元素显示的实际宽度却不一样。
.simple {
width: 500px;
margin: 20px auto;
}
.fancy {
width: 500px;
margin: 20px auto;
padding: 50px;
border-width: 10px;
}
<div class="simple">
我小一些...
</div>
<div class="fancy">
我比它大!
</div>
以前有一个代代相传的解决方案是数学。CSS开发者需要用比他们实际想要的宽度小一点的宽度,需要减去内边距和边框的宽度。值得庆幸地是你不需要再这么做了...
经过了一代又一代人们意识到数学不好玩,所以他们新增了一个叫做 box-sizing
的CSS属性。当你设置一个元素为 box-sizing: border-box;
时,此元素的内边距和边框不再会增加它的宽度。这里有一个与前一页相同的例子,唯一的区别是两个元素都设置了 box-sizing: border-box;
:
.simple {
width: 500px;
margin: 20px auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.fancy {
width: 500px;
margin: 20px auto;
padding: 50px;
border: solid blue 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
<div class="simple">
我们现在一样大小了!
</div>
<div class="fancy">
万岁!
</div>
既然没有比这更好的方法,一些CSS开发者想要页面上所有的元素都有如此表现。所以开发者们把以下CSS代码放在他们页面上:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
这样可以确保所有的元素都会用这种更直观的方式排版。
既然 box-sizing
是个很新的属性,目前你还应该像我之前在例子中那样使用 -webkit-
和-moz-
前缀。这可以启用特定浏览器实验中的特性。同时记住它是支持IE8+。
- zoj 2876 Phone List
- PHP小知识
- Where's Waldorf?
- POj 1797 Heavy Transportation
- 卡特兰数简介原理性质应用参考:
- UVA Machined Surfaces
- NBUT 1117 Kotiya's Incantation
- React第三方组件1(路由管理之Router的使用④按需加载-上)
- React第三方组件1(路由管理之Router的使用③传参)
- Kindergarten Counting Game
- React第三方组件1(路由管理之Router的使用②多层级跳转及重定向)
- 括号配对问题描述输入输出样例输入样例输出解析代码实现运行结果参考链接
- React第三方组件1(路由管理之Router的使用①简单使用)
- POj 2253 Frogger
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 用向量做Mantel的几个问题
- Eclipse集成Maven打包时报错:[ERROR] Unknown lifecycle phase "mvn". You must specify a valid lifecycle phase
- Windows下使用Nginx+Tomcat做负载均衡
- CTO 写的代码,真是绝了
- 网站克隆:setoolkit社工软件
- 什么是数据驱动测试?学习创建框架
- 自动化面试题,我用来面试成功了
- MySQL中的InnoDB是怎么解决幻读的?
- 整理了一些自己可能会用到的R包
- Service Worker初探
- 透视HTTPS建造固若金汤的城堡
- 写代码、搜问题,全部都在「终端」完成!如此编程神器,是时候入手了
- Kafka消费者的使用和原理
- 带你认识 Pytest(二)
- 一起来约G7~R语言探索约基奇数据的简单小例子