欢迎光临
我的个人博客网站

标准盒模型和怪异(ie)盒模型的对比


css3中盒子模型

盒模型(英语:box moldel),是W3C规定一个浏览器如何渲染、显示一个元素,根据元素的种类分为块级元素盒模型和行内元素盒模型。

在css中块级盒子模型也有两种,分别是标准盒模型和IE浏览器的怪异盒模型。默认为标准盒模型(box-sizing:content-box),使用box-sizing:border-box可变成怪异盒模型。

box-sizing: inherit;规定从父元素继承box-sizing。

  • 盒模型组成:

    • content:内容区

    • padding:内边距(其颜色随着内容区域背景色而变化)

    • border:边框(可以单独设置颜色)

      • border有多种类型的样式
        • solid:实线
        • dashed:虚线
        • dotted:原点虚线
    • margin(margin不属于盒子的显示区域,它主要体现了盒子的位置)

    标准盒模型和怪异(ie)盒模型的对比

  • 标准盒模型和怪异盒模型的异同点:

    1. 标准盒模型的内容区域的宽高就是width和height值,怪异盒模型的内容区域的宽高是width-padding(左右)-border(左右)、height-padding(上下)-border(上下)
    2. 标准盒模型添加padding或者border时,整体上所占空间会变大((width/height)+padding+border);怪异盒模型添加padding或者border时,其整体所占空间不发生变化(width和height设定的大小)
    3. 标准盒模型和怪异盒模型的应用场景不同(具体根据实际应用场景而定)

// 标准盒模型                     		                                                                                     // 怪异盒模型 {					                                                                                             { 	width: 200px;				                                                                                          box-sizing: border-box; 	height: 200px;				                                                                                          width: 200px; 	margin: 100px 0;			                                                                                          height: 200px; 	padding: 10px;				                                                                                          margin-top: 100px; 	border: 10px dotted green;		                                                                                          padding: 10px; 	background-color: orange;		                                                                                          border: 10px dashed green; 						                                                                                          background-color: purple; }						                                                                                     } 

标准盒模型和怪异(ie)盒模型的对比 标准盒模型和怪异(ie)盒模型的对比

效果图:
标准盒模型和怪异(ie)盒模型的对比

赞(0) 打赏
未经允许不得转载:张拓的天空 » 标准盒模型和怪异(ie)盒模型的对比
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏