css盒模型(W3C标准盒模型、IE怪异盒模型、box-sizing)

el/2024/3/2 12:31:51

所有的HTML元素都可以看作是盒子,每个盒子包括:
外边距(margin)、边框(border)、内边距(padding)、内容(content)
在这里插入图片描述

W3C标准盒模型

设定的height与width就是content的高度与宽度,

盒子总宽度=margin + border + padding + content/width
盒子总高度=margin + border + padding + content/height

IE怪异盒模型

设定的height与width是包括了border、padding、content的,

盒子总宽度=margin + width = margin + border + padding + content
盒子总高度=margin + height = margin + border + padding + content

box-sizing

box-sizing有三个值:

  • content-box
  • border-box
  • inherit

content-box:width和height分别应用到元素的content。在width和height之外绘制元素的padding和border。即W3C标准盒模型

border-box:为元素设定的width和height决定了元素的边框盒。为元素指定的任何padding和border都将在已设定的width和height内进行绘制。content=width/height - padding - border。即IE怪异盒模型

box-sizing应用场景:有时在width为100%时需要将content缩小,把box-sizing值设为border-box,增加padding的值。


http://www.ngui.cc/el/1461159.html

相关文章

前端常见面试题:防抖和节流

防抖(debounce) 监听一个输入框,文字变化后触发change事件使用keyup事件,则会频繁触发change事件 举例:公交司机会等所有乘客上车后才关车门,而不是上一个开关门一次。 防抖:用户在输入结束或…

webpack热更新报错:Refused to apply style from ‘http://127.0.0.1:9000/main.8b0a1621.css‘ because its MIME

webpack热更新无效 打开控制台一看,报了下面的错: 原来是无法访问到打包后的样式资源,测试后纯js是可以热更新的。 网上搜了很多答案,绝大部分都是路径问题,但实际上我这不是路径问题,点击链接可以在控…

从头再来(给奥运失利的健儿们)

奥运会已经开幕5天了,中国队在前两天开了一个很好的头,但是随着体操男团的失利和中国弱势项目的相继开赛,中国的夺金势头大大受挫。很多优势项目都出现了无谓的失误,跳水,羽毛球,乒乓球,射击他们…

通过几个非常实用的例子了解asp中使用正则表达式

? 通过几个非常实用的例子了解asp中使用正则表达式 我们知道,在 VBscript 5.0 开始支持 正则表达式,下面我们通过几个常用的应用例子来帮助我们了解和使用 这个好的程序书写格式1首先,密码验证 我们的密码验证的规则是--密码的第一个字母不…

SHA1 加密

举个简单例子,下面这个是 SHA1 加密的一个函数,完全可以用来加密口令, SHA1 加密是 160 位的哈希加密方法。(两个不同字串加密后重复的概率极低,能将小的变化放到成大的变化,即是只错一个字母,加…

[转] 构架师之路

构架师(Architecture)是目前很多软件企业最急需的人才,也是一个软件企业中薪水最高的技术人才。换句话说,构架师是企业的人力资本,与人力资源相比其能够通过构架、创新使企业获得新的产品、新的市场和新的技术体系。那…

asp程序权限控制的代码

重要代码,将这些代码拷贝到代码配置文件中。(代码配置文件就是一个普通的asp文件,所有的公共代码都放到这 个文件中,其他需要调用公共代码的就通过include将这个文件包含进去。 权限验证代码RightString:权限串&#x…

[转]在网页中动态的生成一个gif图片

大家知道股票网站的K线图是动态生成的定时刷新PHP 就有动态生成图片的功能那么怎样用asp.net在网页中动态的生成一个图片呢?下面我要举的例子是动态的生成一个图片显示当前时间namespace Wmj{using System;using System.Drawing;using System.Web.UI; public clas…

[转]Windows 2000 下 RDS 配置详解

在Windows 2000下面,由于RDS的缺省安全配置同IIS4不同,从而造成RDS无法正常使用,以下是本人根据微软 MDAC 2.6 SDK 的 ADO 文档中关于RDS的说明部分翻译并整理总结而成的配置步骤,在我所配置的服务器中都获得成功,现供…

OpenSchema方法技术探讨(一)

? 从提供者获取数据库模式信息。 语法 set connectionserver.createobject(“adodb.connection“) Set recordset connection.OpenSchema (QueryType, Criteria, SchemaID) 返回值 返回包含模式信息的 Recordset 对象。Recordset 将以只读、静态游标打开。 参数 Quer…