默认情况下，一个盒子刚好容纳下其中的内容，但可以自定义盒子的大小。
一，盒子的大小
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;
网友评论