有时我们会给页面的元素(比如div)设置个固定的高度或宽度。但如果给这个div又设置了内边距或者边框的话,那么这个div就会被撑大。也就是其实际的尺寸变成了:设置的宽高尺寸+内边距+边框。
这样就有可能对我们的布局造成影响,如果不想让内边距和边框影响到我们设置的固定尺寸,可以借助 box-sizing 这个css属性来实现。
1,box-sizing 属性介绍
box-sizing 允许我们以特定的方式定义匹配某个区域的特定元素。
值 | 描述 |
---|---|
content-box |
这是由 CSS2.1 规定的宽度高度行为。 宽度和高度分别应用到元素的内容框。 在宽度和高度之外绘制元素的内边距和边框。 |
border-box |
为元素设定的宽度和高度决定了元素的边框盒。 就是说,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。 通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。 |
inherit | 规定应从父元素继承 box-sizing 属性的值。 |
比如下面样例,我们设置宽高尺寸为:200px * 34px
但加上内边距和边框后,输入框的实际尺寸变成:226px * 48px
3,设置元素边框盒尺寸(box-sizing:border-box)
当元素的 box-sizing 是 border-box 的时候,我们给元素设置的宽度、高度实际上是设置这个元素边框盒的宽度、高度。也就是说内边距、边框都是在这个内部绘制,而不会把元素撑开。
还是同样的样例,设置为border-box后:
不管内边距和边框设置是多少,输入框尺寸固定是:200px * 34px
HTML5提供了一些非常强大的JavaScript和HTML API,来帮助开发者构建精彩的桌面和...
flex 基本概念 flex布局(flex是flexible box的缩写), 也称为弹性盒模型 。将...
Dreamweaver2018中想要使用列表的功能制作一个下拉列表,该怎么制作呢?下面我们...
目前几乎所有主流的浏览器都支持position属性(inherit除外,inherit不支持所有...
1、kafka是什么? Kafka是由LinkedIn开发的一个分布式基于发布/订阅的消息系统,...
美团技术沙龙由美团技术团队和美团科协主办,每期沙龙邀请美团及其他互联网公司...
最近看到一个有意思的提问:抖音服务器带宽有多大,为什么能够供那么多人同时刷...
突然有个想法,如果能把一些用到不同的知识点放到同一个界面上,并且放到一个盒...
IE下打开ClearType后透明字体问题,解决办法为透明元素加上背景。 div style=FIL...
作者 蒋彪,腾讯云高级工程师,10+年专注于操作系统相关技术,Linux内核资深发烧...