*
CSS的盒子模型
❖ 盒子模型是CSS的基石之一，它指定元素如何显 示以及（在某种程度上）如何相互交互
❖ 页面上的每个元素都被浏览器看成是一个矩形的 盒子，这个盒子由元素的内容、填充、边框和边 界组成。
❖ 网页就是由许多个盒子通过不同的排列方式（上 下排列，并列排列，嵌套排列）堆积而成。
CSS的盒子模型
❖ 盒子模型可设置三类距离，即边界距离margin，填充 距离padding和边框值border
属性值的简写形式
❖ 方法是按照规定的顺序，给出2个、3个或者4个属 性值，它们的含义将有所区别，具体含义如下：
❖ 如果给出2个属性值，前者表示上下边框的属性， 后者表示左右边框的属性；
❖ 如果给出3个属性值，前者表示上边框的属性，中 间的数值表示左右边框的属性，后者表示下边框 的属性；
CSS盒子模型计算题
❖ 如果盒子里面嵌套有盒子，且两个盒子都有边框，那 么两个盒子边框之间的距离等于外面盒子的填充值＋ 里面盒子的边界值
<style type="text/css"> #box1 {
background-color: #ddd; margin:15px; padding:5px; } #box2 { color: black; background-color: #aaa; margin: 20px; padding: 10px 0px 10px 10px; width:100px;}
❖ 如果给出4个属性值，依次表示上、右、下、左边 框的属性，即顺时针排序。
各种元素盒子属性的默认值
❖大部分html元素的盒子属性(margin, padding)默 认值都为0；
❖有少数html元素的(margin, padding)浏览器默认 值不为0，例如：body，p，ul，li，form标记等， 因此我们有时有必要先设置它们的这些属性为0。
用盒子美化表格
❖ 让表格的外边框为2象素 ❖ 首先用间距制作1像素边框的表格，然后用css为table
元素加一个1象素宽的border
❖ 制作1象素虚线边框 ❖ 首先将表格的边框和间距设为0，然后设置table的
CSS上边框和左边框为1象素虚线，再设置td的css下 边框和右边框为1象素虚线
*
盒子的三种定位形式
Hale Waihona Puke 盒子模型的特性❖ 边界值margin可为负，填充padding不可为负 ❖ 边框border默认值为0，即不显示 ❖ 行内元素，如a，定义上下边界不影响行高
对盒子模型的思考
❖ 边框是实的，我们可以看到实实在在的边框，而填充 和边界都是虚的，我们只能看到他们对元素的影响
❖ 盒子模型中只能设置两类颜色，即边框颜色和背景颜 色
❖ 分别是border-width（宽度）、border-color（颜色） 和border-style（样式）其中border-style属性可以将 边框设置为实线（solid）、虚线（dashed）、点划线 （dotted）、双线（double）等效果
边框border属性
❖ 边框border属性有个有趣的特点，即两条交汇的边框 之间是一个斜角，我们可以通过为边框设置不同的颜 色，再利用这个斜角，制作出像三角形一样的效果
❖ Input元素的边框属性默认不为0，我们可以设置 为0达到美化表单中输入框和按钮的目的。
4.5.2 盒子模型的应用
❖ 1. 美化表单 ❖ 网页中的表单控件在默认情况下背景都是灰色的，文
本框边框是粗线条带立体感的，不够美观。下列代码 通过CSS改变表单的边框样式、颜色和背景颜色让文 本框，按钮等变得漂亮些。
❖在标准流下的定位 ❖在浮动属性下的定位 ❖在定位属性下的定位
❖ 除非设置浮动属性或定位属性，否则所有盒子都是 在标准流中定位。顾名思义，标准流中元素盒子的 位置由元素在HTML中的位置决定。
标准流
❖ HTML元素在标准状况下的定位方式 ❖ 行内元素在同一行内横向排列 ❖ 块级元素占满整个一行，在页面中竖向排列 ❖ 元素不会移动到其它地方去，对于嵌套的元素盒子也
width
元素盒子大小的计算
一个元素实际宽度=左边界＋左边框＋左填充＋内容宽 度＋右填充＋右边框＋右边界
IE quirk模式下盒子的宽度
❖ 当将文档声明DOCTYPE删除后，IE 6对网页的解释 会进入quirk（怪异）模式，此时盒子的宽度等于左 边界＋宽度＋右边界
❖ 因此当使用了盒子属性后切忌删除DOCTYPE
body{border:1px dotted #FF0000}
</style> </head>
<body> <div id="box1"><div
id="box2">这是里面的盒 子</div> </body>
边框border属性
❖ 盒子模型的margin和padding属性比较简单，只能设 置宽度值，最多分别对上、右、下、左设置宽度值。 而边框border则可以设置宽度、颜色和样式。
CSS的盒子模型
❖ 每个HTML元素都可以看作是一个装了东西的盒 子
❖ 盒子里面的内容到盒子的边框之间的距离即填充 (padding),盒子本身有边框(border),而盒子边框外 和其它盒子之间，还有边界(magin),如图所示
❖ 默认情况下盒子的边框是无，背景色是透明，所 以我们在默认情况下看不到盒子
内容
填充padding属性
❖ 填充padding属性，也称为盒子的内边距。就是盒子 边框到内容之间的距离，和表格的填充属性 （cellpadding）比较相似。如果填充属性为0，则盒 子的边框会紧挨着内容，这样通常不美观。
❖ 当对盒子设置了背景颜色或背景图像后，那么背景 会覆盖padding和内容组成的范围，并且默认情况下 背景图像是以padding的左上角为基准点在盒子中平 铺的
height
margin-right border-right padding-right
padding-left
border-left
margin-left
margin-top border-top padding-top
content
padding-bottom border-bottom margin-bottom
