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

2022-04-21 本文已影响0人纵生有恒

浏览器盒子模型

一般来说有两种：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;

}