使用HTML语言和CSS开发商业站点_盒子模型

 第6章   盒子模型
一.盒子模型
1.什么是盒子模型
padding-border-margin模型是一个极其通用的描述矩形对象布局形式的方法，这些矩形统称为盒子，英文为box。
在CSS中，一个独立的盒子模型由content（网页内容），border（边框），padding（内边距），margin（外边距）组成。
2.边框
border-color:颜色（none无边框 dotted点线边框 dashed虚线边框 solid实线边框 ）
border-width:粗细（thin:细的 medium：中等，默认值2px thick：粗的）
border-style:样式（none表示无边框，dotted点线，dashed虚线，solid实线）
简写时可以按任意顺序设置。
3.外边距
位于盒子边框外，指与其他盒子之间的距离，也就是指网页中元素与元素之间的距离。
注意：并集选择器是同时选中各个基本选择器所选择的范围，任何形式的选择器（包括标签选择器，类选择器，ID选择器等）都可以作为并集选择器
     的一部分，多个选择器通过逗号连接。
经验：使用“margin:0px auto”让元素水平居中得分条件：
首先这个元素必须是块元素；其次这个元素要设置固定宽度。
4.内边距
用于控制内容与边框之间的距离。
5.盒子模型的尺寸
内盒的总尺寸=border+padding+内容宽/高
外盒的总尺寸=border+padding+margin+内容宽/高
6.box-sizing拯救布局
语法：box-sizign:content-box|border-box|inherit
border-box:盒子的宽度或高度等于元素内容的宽度或高度。
content-box:默认值
inherit:此值使元素继承父元素的盒子模型模式
二.圆角边框
1.border-radius属性的语法
语法：border-radius：length{1,4};
四个属性值按顺时针排列（左上，右上，右下，左下）没有的找对边。
2.使用border-radius制作特殊图形
（1）圆形
元素的宽度和高度必须相同；圆角的半径为元素宽度的一半，或者直接设置圆角半径值为50%。
（2）半圆形
制作上半圆或下半圆时，元素的宽度是高度的2倍，而且圆角半径为元素的高度值。
制作左半圆或右半圆时，元素的高度是宽度的2倍，而且圆角半径为元素的宽度值。
（3）扇形
遵循“三同，一不同”原则，元素宽度，高度，圆角半径相同；圆角取值位置不同。
三.盒子阴影
语法：box-shadow:inset x-offset y-offect blur-radius color;
inset:阴影类型，可选值，默认为外阴影，inset为内阴影。
blur-radius:阴影模糊半径，代表阴影向外模糊的模糊范围。只能为正值，若为0，表示不具有模糊效果，是可选值。