CSS之盒子(一)

默认情况下，一个盒子刚好容纳下其中的内容，但可以自定义盒子的大小。

一，盒子的大小

1.调整盒子的大小就要用到width和height属性

2.属性值可以用像素，百分数或em值。

3.当用百分数时，盒子的大小与浏览器窗口的大小相关，但如果这个盒子被装入另一个盒子中，那百分数就是相对外部盒子的大小而言。

二，宽度限制

1.min-width属性指定一个盒子在浏览器较窄时可以显示的最小的宽度。

2.max-width属性指定一个盒子在浏览器较宽时可以显示的最大的宽度。

三，高度限制

1.,min-height属性限制盒子的最小高度。

2.max-height属性限制盒子的最高高度。

四，内容溢出

当内容溢出盒子的时候，这就要用到了overflow属性了。

1.overflow：hidden 

该属性会直接把溢出盒子空间的内容进行隐藏。

2.overflow：scroll、

该属性会在盒子上添加一个滚动条，用户就可以通过滚动条查看其余的内容。

五，边框，外边距和内边距

1.边框（border）

每一个盒子都有边框，即使这些边框不可见或其宽度被设置为0像素。

边框将一个盒子的边缘与另一个盒子隔开。

2.外边距（margin）

外边距位于边框的边缘之外。

设置外边距将在相邻的两个盒子的边框之间创建空隙。

3.内边距（padding）

内边距是指盒子边框与盒子所包含内容之间的空隙。

六，边框的宽度

border-width是用来控制边框的宽度的

1.控制边框的宽度可以用像素也可以用：thin，medium，thick。注意：不可用百分数。

2.可分别对边框的四个方向进行控制：

border-top-width

border-right-width

bordth-bottom-width

border-left-width

3.简单点还可以按顺时针控制：如border-width：2px，2px，2px, 2px

七，边框样式

边框的样式是用border-style来控制的

1.实线：border-style:solid

2.一串方形点：border-style:dotted

3.虚线：border-style:dashed

4.两条实线：border-style:double 

两条实线的宽度是border-width属性的值。

5.调入页面的效果：border-style:groove

6.显示在页面上凸起的效果：border-style:ridge

7.显示为嵌入页面的效果：border-style:inset

8.看起来像是要凸出页面的样子：border-style:outset

9.不显示任何边框：border-style:hidden或border-style:none

10.也可以单独设置边框的一边：

border-top-style

border-right-style

border-bottom-style

border-left-style

八，边框的颜色

边框的颜色用border-color设置

1.可单独设置边框的某一个方向的颜色

border-top-color

border-right-color

border-bottom-color

border-left-color

2.也可以更快捷的设置

border-color：#bbbbbb #ffffff #cccccc #ssssss

九，快捷方式

上面讲了这么多的设置方法，是不是有点繁琐，下面来讲讲简单化的

我们可以通过border属性来同时设置边框的宽度，样式和颜色（一定要按这个顺序）

如    border：3px solid #ssssaa;