用java编写盒子模型,css盒子模型

前端开发之盒子模型

css两种盒子模型：

这里是引用 设一个宽300px，高400px的div，并设置5px的边框和20px的padding。然后我们来看效果： 这里我们会发现明明我们设置了300400长宽比，为什么呈现出来的是一个350450的盒子呢？ 我们可以找到下面的这张示意图：

在这张图中，我们发现我们设置的300400出现在了最里面的那个蓝框中，与此同时我们可以发现在这个盒模型中除了我们设置的内容(content)，还有margin(外边距)、border(边框)、padding(内边框)

为了正确设置元素在所有浏览器中的宽度和高度，你需要知道盒模型是如何工作的。

在这张图中，我们发现我们设置的300400出现在了最里面的那个蓝框中，与此同时我们可以发现在这个盒模型中除了我们设置的内容(content)，还有margin(外边距)、border(边框)、padding(内边框)

为了正确设置元素在所有浏览器中的宽度和高度，你需要知道盒模型是如何工作的。 而我们在测试效果图看到的350**450盒子

350(width) = 300(content) + 20(padding)* 2 + 5(border)* 2 450(height)= 400 (content)+ 20(padding)* 2 + 5(border)* 2

css的两种盒模型：(一)标准的盒子模型

在标准的盒子模型中一般默认：box-sizing:content-box;

(二)IE盒子模型

在IE盒子模型中，width表示content+padding+border这三个部分的宽度

一般默认：box-sizing:border-box;