html的盒子模型有哪些
导读:本文共1509.5字符,通常情况下阅读需要5分钟。同时您也可以点击右侧朗读,来听本文内容。按键盘←(左) →(右) 方向键可以翻页。
摘要: html的盒子模型有2种:1、w3c的盒子模型,其padding和border不被包含在定义的width和height之内;2、IE的盒子模型,其padding和border被包含在定义的width和height之内。本教程操作环境:windows7... ...
目录
(为您整理了一些要点),点击可以直达。
html的盒子模型有2种:1、w3c的盒子模型,其padding和border不被包含在定义的width和height之内;2、IE的盒子模型,其padding和border被包含在定义的width和height之内。
本教程操作环境:windows7系统、HTML5版、Dell G3电脑。
一、引入
在网站的制作中,一个复杂的页面,被划分为一个一个的小块。
通过这种划分,把网站的开发过程化整为零、化繁为简,以达到减少开发工作,减轻维护压力的目的。
在网页中,把这种划分后的小块形象的看成一个个的盒子。只有理解了盒子模型才能更好的排版,更好的编写网站界面
二、盒子的布局
把HTML中的元素看做是一个矩形的盒子(盛装内容的的容器),每个容器都是由元素内容、内边距(padding)、边框(border)和外边距(margin)组成。
ps:浏览器默认的margin值为8px!
三、两种盒子模型
w3c的盒子模型: padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和,即 ( Element width = width + border + padding ) 此属性表现为标准模式下的盒模型。
IE的盒子模型: padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值,即使定义有border和padding也不会改变对象的实际宽度,即 ( Element width = width ) 。
ps:一般都使用标准的w3c盒子模型,如果需要使用IE的盒子模型,可以使用box-sizing属性进行修改。
w3c的盒子模型
.test1{ box-sizing:content-box; width:200px; padding:10px; border:15pxsolid#eee;}
IE的盒子模型
.test1{ box-sizing:border-box; width:200px; padding:10px; border:15pxsolid#eee;}
</div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">
html的盒子模型有哪些的详细内容,希望对您有所帮助,信息来源于网络。