sizebox模型下载_css 盒模型、box-sizing 学习笔记

默认情况下，给元素设置的高度和宽度是元素内容区的宽度和高度，给元素加padding 和 border ,元素的实际宽度和高度的计算方式是下面的两个公式：

元素的宽度= 元素的内容区宽度 + 内边距宽度 + 边框宽度；

元素的高度= 元素的内容区高度 + 内边距高度 + 边框高度；

别人说过的话，你记住了，时间久了你就会忘记了，为了加深记忆，这里亲自验证，并记录下验证过程，方便下次复习使用。验证结论我们先给处一张标准的盒模型

如上图盒模型示例：元素是绝对定位的，上右下左均是0px,内容宽度420px, 加上左右内边距各10px，加上左右边框各10px，元素的宽是460px;

验证结论，我们给盒子加一个父盒子：

1、设置宽度为420px，overflow设置为自动，子盒子的宽度会超出父盒子内容区的宽度，父盒子出现横向的滚动条；

2、设置宽度为460px，overflow设置为自动，子盒子的宽度不会超出父盒子内容区的宽度，父盒子不出现横向的滚动条；

如果以上两点成立，则结论是正确的。

效果看下面两张图片：

从上面的两张图上我们可以看出，我们的结论是正确的，即，元素的宽度= 元素的内容区宽度 + 内边距宽度 + 边框宽度；

我们可以用同样的方法验证：元素的高度= 元素的内容区高度 + 内边距高度 + 边框高度；当然本人是亲自验证过的，这里不再给出高度的截图了，贴出源码，有兴趣的可以自行验证一下，加深记录。

源码如下：

Title

*{margin:0;padding:0px;

}html,body{height:100%;overflow:hidden;

}#wrapper{height:100%;overflow:auto;

}#demo-parent{position:absolute;top:0px;left:0px;bottom:0px;right:0px;margin:auto;background-color:pink;width:460px;height:250px;overflow:auto;

}

/*居中定位*/#demo{position:absolute;top:0px;left:0px;bottom:0px;right:0px;margin:auto;width:420px;height:200px;font-family:"楷体";font-size:24px;line-height:40px;text-align:center;font-weight:bold;color:black;background-color:#cccccc;padding:10px;border:solid 10px #c3c3c3;

/*box-sizing: border-box;*/

}

红军不怕远征难，

万水千山只等闲。

五岭逶迤腾细浪，

乌蒙磅礴走泥丸。

金沙水拍云崖暖，

大渡桥横铁索寒。

更喜岷山千里雪，

三军过后尽开颜。

sizebox模型下载_css 盒模型、box-sizing 学习笔记相关推荐

div默认外边距是多少_CSS盒模型之内边距、边框、外边距十九问（持续更新）...
第一问:什么是盒模型? 第二问:两者的区别是什么? 第三问:怎么设置这两种模型呢? 第四问JS怎么获取和设置盒模型的宽高呢,你能想到几种方法第五问:描述一下下面盒子的大小,颜色什么的(content ...
标准盒模型与怪异盒模型
盒模型 css 中盒模型有两种,分别是标准模式和怪异模式. 两种模式的区分使用document.compatMode将会得到"CSS1Compat"或"BackComp ...
css盒模型（css的两种盒模型：标准盒模型、怪异盒模型）和 css3指定盒子模型种类的box-sizing属性
所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:外边距(margin ...
普通盒模型和怪异盒模型
一.什么是盒模型? 1.根据盒子模型的概念,每个在页面上的元素都是一个拥有宽,高,内边距,边框和外边距的长方形盒子. 2.盒模型分为两种:分别是W3C标准盒模型(普通盒模型)和IE盒模型(怪异盒模型) ...
html盒子标准模型,CSS标准盒模型与IE盒子模型以及弹性盒模型
CSS2.1中提出了盒模型的概念,盒模型高度提炼了所有元素的基本特征,即标准盒模型,CSS3中进一步扩展,提出了弹性盒模型的概念什么是盒模型,我们可以先直观的看一个东西打开Chrome浏览器,F1 ...
怪异盒模型and弹性盒模型
1.概念 IE盒子模型(怪异盒模型) 在该模式下,浏览器的 width 属性不是内容的宽度,而是内容.内边距和边框的宽度的总和:即在怪异模式下的盒模型,盒子的(content)宽度+内边距paddin ...
标准盒模型和怪异盒模型的区别？
什么是怪异盒模型?今天我帮大家整理一篇详细的有关于标准盒模型和怪异盒模型的区别在哪里. 首先要知道,什么是盒模型? 盒模型是css布局的基石,它规定了网页元素如何显示以及元素间相互关系.css定义所有 ...
05-标准盒模型与怪异盒模型
标准盒模型与怪异盒模型 1.盒子模型(box model) 在HTML中,可以把元素看做盒子,盒子包括:实际内容(content).内边距(padding). 边框(border).外边距(margi ...
IE盒模型和标准盒模型
标准盒模型和ie盒模型(怪异盒模型) w3c标准盒模型 width和height不包括padding和border ie盒模型 width和height包含padding和border ie8以上都是 ...

sizebox模型下载_css 盒模型、box-sizing 学习笔记

sizebox模型下载_css 盒模型、box-sizing 学习笔记相关推荐

最新文章

热门文章