亲，该文档总共12页，全部预览完了，如果喜欢就下载吧！

特殊样式边框

在CSS中，可以对元素的其中三条边框应用同种样式，但是单独对某一条边框设置特殊的样式，以制作特殊效果，例如：

border:

2pxgreendashed;

border-left:

1pxredsolid

盒子模型的应用

1.美化表单

网页中的表单控件在默认情况下背景都是灰色的，文本框边框是粗线条带立体感的，不够美观。

下列代码通过CSS改变表单的边框样式、颜色和背景颜色让文本框，按钮等变得漂亮些。

填充padding属性

填充padding属性，也称为盒子的内边距。

就是盒子边框到内容之间的距离，和表格的

填充属性（cellpadding）比较相似。

如果填充属性为0,则盒子的边框会紧挨着内容，这样

通常不美观。

当对盒子设置了背景颜色或背景图像后，那么背景会覆盖padding和内容组成的范围，

并且默认情况下背景图像是以padding的左上角为基准点在盒子中平铺的

和前面介绍的边框类似，padding属性可以设置1、2、3或4个属性值，分别如下：

设置1个属性值时，表示上下左右4个padding均为该值。

设置2个属性值时，前者为上下padding的值，后者为左右padding的值。

设置3个属性值时，第1个为上padding的值，第2个为左右padding的值，第3个为下padding的值。

padding的值。

设置4个属性值时，按照顺时针方向，依次为上、右、下、左

如果需要专门设置某一个方向的padding,可以使用

padding-left、

padding-right、

padding-top或者

padding-bottom来设置。

设置外边距

外边距（margin）指的是元素与元素之间的距离。

小案例：

观察普通的网页，可以发现边框在默认情况下会定位于浏览器窗口的左上角，但是并有紧贴着浏览器窗口的边框。

margin，

这是因为body本身也是一个盒子，在默认情况下，body会有一个若干像素的

具体数值因各个浏览器而不尽相同。

因此在body中的其他盒子就不会紧贴着浏览器窗口的边框了。

为了验证这一点，可以给body这个盒子也加一个边框，代码如下。

body{

border:

1pxblacksolid;background:

#cc0;

}

三类margin

1.行内元素之间的水平margin

2.块级元素之间的竖直margin

1.行内元素之间的水平margin

如图所示为两个块并排的情况。

2.块级元素之间的竖直margin

如果不是行内元素，而是竖直排列的块级元素，margin的取值情况就会有所不同。

两个块级元素之间的距离不是margin-bottom与margin-top的总和，而是两者中的较大

者，如图所示。

这个现象称为margin的？

°塌陷？

±（或称为？

°合并？

土）现象，意思是说较小的margin塌陷（合并）到了较大的margin中。

3.嵌套盒子之间的margin

当一个vdiv＞块包含在另一个vdiv＞块中时，便形成了典型的父子关系。

这时，如果两个盒子都有边框，我们通常考虑两个盒子边框之间的距离

此时，两个盒子边框之间的距离等于：

外面盒子的填充值+里面盒子的margin值

其中子块的margin将以父块的内容为参考，

如下图所示：

子元素的实际宽度超过父height的不同处理方式

当子元素的实际高度超出父元素的height的时候，IE与Firefox处理方式是不同的。

IE:

自动扩大父元素的高度，以容纳子元素

Firefox:

不扩充，因此，会子元素会溢出到父元素之外

示例：

子元素的实际宽度超过父height的不同处理方式

图例：

margin的特殊用法：

取负值

margin可取负值

上面提及margin的时候，它的值都是正数。

其实margin的值也可以设置为负数。

当margin取负值的时候，可以产生意向不到的排版效果，而且有关的巧妙运用方法也非

常多，在后续章节中都会陆续介绍。

这里先分析margin设为负数时产生的排版效果。

margin取负值的排版效果

当margin设为负数时，会使被设为负数的元素向相反的方向移动，甚至覆盖在另外的元

素上。

示例

效果图如下所示

盒子模型的特性

边界值margin可为负，填充padding不可为负

边框border默认值为0,即不显示

行内元素，如a，定义上下边界不影响行高

对盒子模型的思考

边框是实的，我们可以看到实实在在的边框，而填充和边界都是虚的，我们只能看到他们

对元素的影响

盒子模型中只能设置两类颜色，即边框颜色和背景颜色

盒子模型可设置三类距离，即边界距离margin，填充距离padding和边框值border

属性值的简写形式

方法是按照规定的顺序，给出2个、3个或者4个属性值，它们的含义将有所区别，具体

含义如下：

如果给出2个属性值，前者表示上下边框的属性，后者表示左右边框的属性;

如果给出3个属性值，前者表示上边框的属性，中间的数值表示左右边框的属性，后者表示下边框的属性；

如果给出4个属性值，依次表示上、右、下、左边框的属性，即顺时针排序。

各种元素盒子属性的默认值

大部分html元素的盒子属性（margin,padding）默认值都为0；

有少数html元素的（margin,padding）浏览器默认值不为0，例如：

body，p，ul，li，form标记等，因此我们有时有必要先设置它们的这些属性为0。

Input元素的边框属性默认不为0，我们可以设置为0达到美化表单中输入框和按钮的目

的。

盒子的定位

盒子的三种定位形式

在标准流下的定位

在浮动属性下的定位

在定位属性下的定位

除非设置浮动属性或定位属性，否则所有盒子都是在标准流中定位。

顾名思义，标准流中元素盒子的位置由元素在HTML中的位置决定。

标准流

HTML元素在标准状况下的定位方式

行内元素在同一行内横向排列

块级元素占满整个一行，在页面中竖向排列

元素不会移动到其它地方去，对于嵌套的元素盒子也是嵌套的关系

标准流下的盒子排列分析

*{

border:

2pxdashed#FF0066;

padding:

10px;

margin:

2px;

}

行内元素1行内2

行内3

行内元素的盒子

行内元素的盒子永远只能在浏览器中得到一行高度的空间（行高由line-height属性决定，

如果没设置该属性，则是内容的默认高度），如果给它设置上下border，margin，padding等值，导致其盒子的高度超过行高，那么它的盒子上下部分将和其他元素的盒子重叠。

因此，不推荐对行内元素直接设置盒子属性，一般先设置行内元素以块级元素显示，再设置它的盒子属性。

改变行内元素的高度

如图所示，当增加行内元素的边界和填充时，行内元素a占据浏览器的高度并没有增加，

下面这个div块仍然在原来的位置，导致行内元素盒子的上下部分重叠，而左右部分不会受影响display属性

通过display属性可控制元素是以行内元素显示还是以块级元素显示，或不显示

display:

block|inline|none|list-item

block元素

block元素的特点是：

总是在新行上开始；

高度，行高以及顶和底边距都可控制；

宽度缺省是它的容器的100%，除非用width设定一个宽度

展开阅读全文