css盒子模型基础 知识

一、盒子是什么？

我们都知道认识有细胞组成的，当然还可以进一步细分。我们的网页制作也是一样的。一个一个的细胞有序的排列布阵，组成了千姿百态的网页。这里给出盒子模型：

由上图做一个解释：

1.content：内容（属性：width、height、overflow）

2.border：边框

3.margin:外边距，一般元素默认存在，声明后被覆盖。另外，相邻两元素的外边距合并后高度为最大者的数值。

4.padding：内边距（我的数值永远大于0，不像margin那样没有原则，啥都可以）

补充：

1.overflow是溢出，其属性由hidden（隐藏），visible（溢出内容可见，在盒子外部），scroll（滚动显示）auto（浏览器决定）。

2.display：inline（元素变为内联元素，前后没有换行符）|block（变为块级元素，前后带有换行符吧）|inline-block（元素呈现为inline，但具有block的特性）|none

3.？？？哪些元素可以设置高度和宽度

• 块级元素（一个占据一行）： p div h(1,2,3,45,5,6,7) ul li ol dl  dd 等
• 替换元素（我们挤一下就好了）：img input textarea等。

2.代码实践

效果图：

内容可以自己随意来。

其他的可以根据本文内容敲出代码试试o。