浏览器盒子模型——CSS基础篇

浏览器盒子模型

一般来说有两种:IE版和标准W3C版

IE版和W3C版主要差别在于IE把border和padding都算进width中,而W3C版的则是width只包括content

默认浏览器会使用标准模型。如果需要使用替代模型,您可以通过为其设置box-sizing: border-box来实现。 这样就可以告诉浏览器使用border-box来定义区域,从而设定您想要的大小。

.box{

    box-sizing:border-box;

}

如果你希望所有元素都使用替代模式,而且确实很常用,设置box-sizing在<html>元素上,然后设置所有元素继承该属性,正如下面的例子。如果想要深入理解,请看the CSS Tricks article on box-sizing

html{

    box-sizing:border-box;

}

*, *::before, *::after{

    box-sizing:inherit;

}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容