CSS3标准盒模型还是IE怪异模型box-sizing属性的应用设置
在一个文档中,每个元素都被表示为一个矩形的盒子。盒子模型具有4个属性['外边距(margin)','边框(border)','内边距(padding)','内容(content)']。
我们要设置某个元素的大小定位,肯定会和这四个元素打交道。只是元素的宽高计算有些默认值。
box-sizing属性用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型。可以使用此属性来模拟不正确支持CSS盒子模型规范的浏览器的行为。
目前支持box-sizing的浏览器:
就目前来看,大部分人是建议在初始化样式的时候,就设置为border-box
,这样更方便设置元素的宽高
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
语法
box-sizing: content-box | border-box | inherit;
值
content-box
默认值,标准盒模型。width
和 height
只包括内容(content
)的宽和高。在宽度和高度之外绘制元素的内边距和边框。
尺寸计算公式:
width = 内容的宽度。
height = 内容的高度。
border-box
IE的怪异模型 width
和height
属性包括内容(content
)、内边距(padding
)、边框(border
),但是不包括外边距(margin
)。在宽度和高度之内绘制元素的内容、内边距和边框。
尺寸计算公式:
width = 内容的宽度 + 内边距的宽度 + 边框的宽度。
height = 内容的高度 + 内边距的高度 + 边框的高度。
inherit
规定应该从父元素继承 box-sizing
属性的值
例子
See the Pen box-sizing的使用 by LiuwqGit (@weiqinl) on CodePen.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>box-sizing的使用</title>
<style type="text/css">
.box {
width: 460px;
height: 400px;
border: 1px solid red;
margin: 10px;
background-color: gray;
}
.content {
box-sizing: content-box;
border: 10px solid blue;
width: 300px;
padding: 20px;
margin: 30px;
background-color: green;
}
.border {
box-sizing: border-box;
border: 10px solid blue;
width: 300px;
padding: 20px;
margin: 30px;
background-color: yellow;
}
.inherit {
box-sizing: inherit;
border: 10px solid red;
width: 300px;
padding: 20px;
margin: 30px;
background-color: red;
}
</style>
</head>
<body>
<div class="box">
<div class="content">
我是content-box值(默认)
<br/>box-sizing: content-box;
<br/>border: 10px solid blue;
<br/>width: 300px;
<br/>padding: 20px;
<br/> margin: 30px;
<div class="inherit">我是inherit值</div>
</div>
</div>
<div class="box">
<div class="border">
我是border-box值
<br/>box-sizing: border-box;
<br/>border: 10px solid blue;
<br/>width: 300px;
<br/>padding: 20px;
<br/>margin: 30px;
<div class="inherit">我是inherit值</div>
</div>
</div>
</body>
</html>
chrome截图:
CSS3标准盒模型还是IE怪异模型box-sizing属性的应用设置的更多相关文章
- 标准盒子模型和IE盒子模型
标准盒子模型 = margin + border + padding + content (content = width | height) IE盒子模型 = margin + content ( ...
- 理解标准盒模型和怪异模式&box-sizing属性
盒子模型 主要有两种,w3c标准盒模型,IE下的怪异盒模型,其实还有就是弹性盒模型(上篇文章我们用他很好的解决了对齐问题) DTD规范 盒模型分为:标准w3c盒模型.IE盒模型.以及css中的伸缩盒模 ...
- padding标准盒模型和怪异盒子模型
我们都知道padding是为块级元素设置内边距 但是在使用过程中,我们却会遇到一些问题.padding的标准盒模型和怪异盒模型 padding盒子模型 我们通过demo来讲这个问题,用文字干讲第一没意 ...
- div的标准盒模型和怪异盒模型
(1)标准盒模型 标准盒模型宽高不会被padding和margin撑开 (2)怪异盒模型 怪异盒模型宽高会被padding和margin撑开
- 标准盒模型、怪异盒模型(box-sizing)
CSS中Box model是分为两种: W3C标准(标准盒模型) 和 IE标准盒子模型(怪异盒模型).大多数浏览器采用W3C标准模型,而IE中则采用Microsoft自己的标准. 重要的一个属性是bo ...
- CSS3之盒模型
1. 什么是盒模型? css中的每个元素都是一个盒模型, 包括html body元素, 浏览器解析css的时候也会把每个元素看成一个盒子来解析. 盒模型具备的属性(存在的特点)有: content ( ...
- IE盒模型和标准盒模型
标准盒模型和ie盒模型(怪异盒模型) w3c标准盒模型 width和height不包括padding和border ie盒模型 width和height包含padding和border ie8以上都是 ...
- boxsizing属性 IE盒模型和标准盒模型
CSS3有一个非常有用但应用不广泛的属性: box-sizing: content-box | border-box | inherit content-box,默认属性,遵从标准盒模型. borde ...
- css3:盒模型以及box-sizing属性
文档中的每个元素被描绘为矩形盒子.渲染引擎的目的就是判定大小,属性——比如它的颜色.背景.边框方面——及这些盒子的位置.在CSS中,这些矩形盒子用标准盒模型来描述.这个模型描述了一个元素所占用的空间. ...
随机推荐
- Lodop某个电脑打印内容大小有问题
可能原因分析:本地设置放大比例问题,是真实的放大或缩小,1.查看比例应在100%, 2.控制面板设置显示应在100%(win7 win10中) 3.超文本样式问题,分析样式中不同浏览器版本下显示不一致 ...
- Python学习之路——函数的参数分类
今日内容 '''实参:调用函数,在括号内传入的实际值,值可以为常量.变量.表达式或三者的组合*****形参:定义函数,在括号内声明的变量名,用来接受外界传来的值''''''注:形参随着函数的调用 ...
- Vim简明学习
前面的话 在linux云服务器上的编辑器默认是vim,类似于windows系统中的记事本,页面简洁,但入门不易.本文将介绍Vim的基础使用 操作模式 vim编辑器有三种模式: 1.命令模式(等待用户输 ...
- 有关swiper动态改变数据遇到的坑(不能自动滚动,自动跟新数据,切换不正常)
以前都觉得swiper的使用很简单,那是因为使用swiper时都是写的数据,按照官网上介绍直接初始化swiper,随便丢一个地方初始化就ok了,但是在很多需求中,我们都需要动态的改变数据,这样可能就会 ...
- mysql配置记录
[mysqld] datadir=/app/data/mysql socket=/app/data/mysql/mysql.sock symbolic-links=0 validate_passwor ...
- 树&堆
树 什么是树? 大概像下面这样: 树的概念 树的每个点被称为节点: 连接的两个点,一个为父节点,一个为子节点,例如上图中,\(1\)是\(4\)的父节点,\(4\)是\(1\)的子节点: 没有父节点的 ...
- Lua语法基础(一)
1. 注释 -- 单行注释 --[[ 多行注释 --]] 2. 运行方式 (1)交互式运行 命令行下 lua进入交互模式 (2)命令行运行 lua + ...
- 从零开始部署javaWeb项目到阿里云上面
[详情请看]http://www.cnblogs.com/softidea/p/5271746.html 补充几点特别需要注意的事情 一:putty相当于阿里云的控制台, WinSCP 相当于是专门上 ...
- create-react-app中添加less支持
前言 使用 create-react-app 脚手架创建项目后,默认是不支持 less 的.所以我们需要手动添加. 第一步 暴露webpack配置文件 使用 create-react-app 创建的项 ...
- Quartz.net 3.x使用总结(一)——入门介绍
1.Quartz.net简介 Quartz.NET是一个强大.开源.轻量级的任务调度框架.任务调度在我们的开发中经常遇到,如说:每天晚上三点让程序或网站执行某些代码,或者每隔5秒种执行一个方法等.Wi ...