码迷,mamicode.com
首页 > Web开发 > 详细

css盒模型

时间:2018-02-27 15:57:05      阅读:185      评论:0      收藏:0      [点我收藏+]

标签:doctype   style   不同的   pad   html4   计算   自己   log   默认值   

盒模型分为W3C盒模型和IE盒模型

IE盒模型:width/height = content + padding + border

W3C盒模型的宽度或者高度计算方式为:width/height = content

 

 

 CSS3属性box-sizing

    如果计算一个盒子的长宽高,我们一般都是盒子本身的厚度加上盒子里的空间大小,所在在IE盒模型和W3C盒模型,我们会觉得IE盒模型更符合逻辑。

    不同的人有不同的习惯,所以CSS3新增了一个属性box-sizing: content-box | border-box | inherit,默认值为content-box。如果值为content-box,那元素遵循的是W3C盒模型;如果值为border-box,那元素遵循的是IE盒模型;如果值为inherit,该属性的值应该从父元素继承。

 

 

 

 其实,浏览器选择哪个盒模型,主要看浏览器处于标准模式(Standards Mode)还是怪异模式(Quirks Mode)。我们都记得<!DOCTYPE>声明吧,这是告诉浏览器选择哪个版本的HTML,<!DOCTYPE>后面一般有DTD的声明,如果有DTD的声明,浏览器就是处于标准模式;如果没有DTD声明或者HTML4一下的DTD声明,那浏览器按照自己的方式解析代码,处于怪异模式。

 

    处于标准模式的浏览器(IE浏览器版本必须是6或者6以上),会选择W3C盒模型解析代码;处于怪异模式的浏览器,则会按照自己的方式去解析代码,IE6以下则会是选择IE盒模型,其他现代的浏览器都是采用W3C盒模型。

 

    因为IE6以下版本的浏览器没有遵循Web标准,不论页面开头有没有DTD声明,它都是按照IE盒模型解析代码的。

 

css盒模型

标签:doctype   style   不同的   pad   html4   计算   自己   log   默认值   

原文地址:https://www.cnblogs.com/mttcug/p/8479020.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!