暑期实践——7.12

第五章 CSS盒模型

一、盒模型简介

在Web页面中的“盒子”的结构包括厚度、边距（边缘与其他物体的距离）、填充（填充厚度）。引申到CSS中就是border、margin和padding。

盒模型将页面中的每个元素看作一个矩形框，这个框由元素的内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。

默认情况下盒子的边框是无，背景色是透明，所以在默认情况下看不到盒子。内边距和外边距这些属性都是可选的，默认值都是0.但是，许多元素将由用户代理样式表设置外边距和内边距。为了解决这个问题，可以通过将元素的margin和padding设置为0来覆盖这些浏览器样式。

通常在CSS样式文件中输入以下代码：

*{

        margin: 0;

        padding: 0;

}

二、边框、外边距与内边距

padding-border-margin模型是一个极其通用的描述盒子布局形式的方法。对于任何一个盒子，都可以分别设定4条边的padding、border和margin，实现各种排版效果。

1.边框

边框一般用于分隔不同元素，边框外围即为元素的最外围。边框是围绕元素内容和内边距的一条或多条线，border属性允许规定元素边框的宽度、颜色和样式。

（1）所有边框宽度（border-width）

语法：

border-width : medium | thin | thick | length

要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。如果border-style设置为none，本属性将失去作用。

示例：

span { border-style: solid; border-width: thin }

span { border-style: solid; border-width: 1px thin }

（2）上边框宽度（border-top）

语法：

border-top : border-width || border-style || border-color

示例：

div {

        border-bottom: 25px solid red;

        border-left: 25px solid yellow;

        border-right: 25px solid blue;

        border-top: 25px solid green

}