CSS解说（一）

类别	长度单位	说明
相对长度单位	em	相对于当前对象内文本的字体尺寸
相对长度单位	px	像素，常用，推荐使用
绝对长度单位	in	英寸
	cm	厘米
	mm	毫米
	pt	点

font-family：字体

常用字体有宋体、微软雅黑、黑体等。

同时指定多个字体时，中间以逗号隔开，若浏览器不支持第一个字体，则会依次寻找，要设置英文字体时，英文字体必须位于中外字体前，除了单个单词不用加引号，其他都要加引号

格式如： p{ font-family：“Times New Roman”，“微软雅黑”，“宋体”，“黑体”；}

Unicode字体

为避免一些XP等系统不支持设置的中文字体名称，可以使用英文来代替如微软雅黑的英文：font-family：“Microdoft Yahei”

还可以使用Unicode编码来代替中文，浏览器是可以正确解释的

字体名称	英文名称	Unicode编码
宋体	SimSun	\5B8B\4F53
微软雅黑	Microsoft YaHei	\5FAE\8F6F\96C5\9ED1
新宋体	NSimSun	\65B0\5B8B\4F53
黑体	SimHei	\9ED1\4F53
楷体_GB2312	KaiTi_GB2312	\6977\4F53_GB2312
隶书	LiSu	\96B6\4E66
幼园	YouYuan	\5E7C\5703
华文细黑	STXihei	\534E\6587\7EC6\9ED1
细明体	MingLiU	\7EC6\660E\4F53
新细明体	PMingLiU	\65B0\7EC6\660E\4F53

推荐使用Unicode编码格式设置字体，且推荐设置宋体或微软雅黑，因为一般电脑都自带这两种字体

font-weight：字体粗细

字体加粗除了用<b>和<strong>标签外，可以使用css来实现，但是css没有语义。

字体粗细的属性值有：normal（=400px）、bold（=700px）、bolder、lighter、100-900px（100的倍数），推荐使用数字

font-style：字体风格

字体倾斜除了用<i>,<em> 标签外，还可以使用css来实现，如font-style：italic；

font-style属性值有：italic 斜体、normal 正常、oblique 倾斜。

font综合设置字体样式：

选择器{ font：font-style font-weight font-size/line-height font-family； } 即风格粗细大小字体

注意：不能更换顺序，且各个属性以空格隔开，其中不需要的属性可以省略（取默认值），但必须保留font-size和font-family属性。

如 h4 { italic bold 14px “微软雅黑” ； }

CSS注释

快捷键：ctrl+shift+/ 格式：/* 需要注释的内容 */

调试工具chrome使用

先检查元素，左边为html代码，右边为css代码，css代码有错误时会出现黄色三角形，旁边会显示行数。

选择器

指找到目标元素，实现css的样式设置

标签选择器（元素选择器）

指用HTML标签名作为选择器，按标签名分类，为页面中的某一类标签指定统一的CSS样式。语法格式为：

标签名{ 属性：属性值1；属性2：属性值；属性3：属性值；} 如p{ color：green；font-size：16px；}

优点是：能快速为页面中同类型的标签统一样式，同时也是缺点，不能设计差异化样式。

类选择器

使用“.”（英文点号）进行标识，后面紧跟类名，类名是可以重复的，id名才不可以。格式为：

.类名{ 属性：属性值1；属性2：属性值；属性3：属性值；} ，标签内指定相同类名，即class=“类名”

优点是：可以为元素对象定义单独或相同的样式

注意：不建议使用下划线“_”来命名css选择器，使用"-"尤佳。因为JS才是使用下划线“_”。也不要使用纯数字或中文命名。

多类选择器

<head>
    <style>
        .font20{
            font-size:20px;
        }

        .pink{
            color:pink;
        }
    
    </style>
</head>
<body>
    <div class=“font20  pink”> CSS真好玩呢 </div>    <!--字号20px，颜色为粉色-->
    <div class=“font20”> HTML摊牌了，表示需要CSS </div>        <!--字号20px-->
</body>

各个类名中间用空格隔开，多类选择器在后期布局比较复杂的情况下，还是比较常用的。

id选择器

id选择器用“#”标记，后面紧跟id名，格式为： #font20{ 属性：属性值1；属性2：属性值；属性3：属性值；}

id选择器和类选择器的区别

W3C标准规定，id名不允许重复，class名则允许重复

通俗的讲就是id相当于一个人的身份证号码，唯一的；而class则相当于一个人的名字，不唯一。

通配符选择器

用“*”表示，格式为：*{ 属性：属性值1；属性2：属性值；属性3：属性值；} ，指若无特殊设置“键值对”，则通配符选择器设置的“键值对”适用于整个HTML页面。常用的有 *{ margin：0；padding：0 }，建议少用

伪选择器

类选择器是"."作为标识 , 而伪选择器是"："作为标识。用于向某些选择器添加特殊的效果，比如给链接添加效果：鼠标放上去，鼠标点击时等。

链接伪类选择器：

a：link{ } 未访问的链接

a：visited{ } 已访问的链接，少用

a：hover{ } 鼠标移动到链接上时，常用

a：active{ } 鼠标点击时的链接，少用

注意：顺序尽量不要颠倒

结构（位置）伪类选择器：

：first-child：选择首个子元素的指定选择器

：last-child：选择最后一个子元素的指定选择器

：nth-child(n)：匹配第n个子元素，n=even时表偶数，n=odd时表奇数，单个n表从0开始，2n即偶数，2n+1则奇数

：nth-last-child(n)：同上面一个，只是是从最后一个子元素开始计数。

<head>
    <style>
        li:first-child{        <!--选择第一夫人，最后一个也类似-->
            color:green;
        }
        li:nth-child(4){        <!--选择第四夫人，括号代表第几的意思，还可以为2n，2n+1-->
                                <!--括号为even时代表偶数，odd时代表奇数-->
            color:green;
        }
    </style>
</head>
<body>
    <ul>
        <li>我是第一夫人</li>
        <li>我是第二夫人</li>
        <li>我是第三夫人</li>
        <li>我是第四夫人</li>
        <li>我是第五夫人</li>
        <li>我是第六夫人</li>
        <li>我是第七夫人</li> 
    </ul>
</body>

目标伪类选择器

：target目标伪类选择器，该选择器用于设置当前选取的活动目标子元素。如HTML的跳转到id首页示例，格式为 :targer{ color：green；}

CSS复合选择器

由两个或多个基础选择器，通过不同的方式组合而成，目的是为了可以定位到更准确更精细的目标元素标签

交集选择器

是由两个选择器构成，第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格。

格式为：标记选择器，类别选择器{ 属性1：属性值；} 点可理解为”并且“的意思

如： h3.fond{ color：red； font-size：25px； } 指给h3标签并且类名为fond设置样式。

用的相对较少，不建议使用

并集选择器

各个选择器通过逗号连接而成，为这些选择器定义相同的CSS样式。逗号可理解为”和“的意思。

如： .fond,.font1,#test,h3{ color:green;font-size:16px; } 表示.fond、.font1、h3和#test这四个选择器都执行颜色、字体大小的样式设置。

后代选择器

又称包含选择器，用来选择元素或元素的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分开，当标签发生嵌套时，内层标签就称为外层标签的后代。子孙后代都可以这样选择，无限制空格后必须为子代。

如：.fond p{ color：green；font-size：12px；}

父子选择器

只能选择某元素的子元素，不能为孙代元素，且父级标签在前面，子级标签在后面，中间>连接，且符号左右各保留一个空格。

如： .demo > h3{ color:green; } 此处h3必为类名为demo的下一级标签，不能是下下级标签。

兄弟选择器

M ~ N 当前M元素下的所有兄弟N标签

属性选择器

指选取标签带有某些特殊属性的选择器，我们称其为属性选择器。

格式/示例	含义
E[ attr ]	存在atttr属性即可
E[ attr =value ] 如 div[class=value]{ }	属性值完全等于value
E[ attr *=vae ]	属性值只要包含vae字符就可以
E[ attr ^=vae ]	属性值的vae字符在开始位置
E[ attr $=vae ]	属性值的vae字符在结束位置

伪元素选择器（CSS）

伪类选择器是以单个冒号：开始，而伪类选择器是以双冒号：：开始。格式规范如下

如 p：：first-letter { } 意为给p标签的文本第一个字或单词设置样式（可为中文、日文、韩文等）如设置首字母16px
如 p：：firet-line { } 意为给p标签的文本第一行设置样式如字体大小
如 p：：selection { } 意为当鼠标选择p标签的文本时的样式，如文本为红色
E：：before和E：：after 指在E标签的内部开始位置和结束位置插入一个内容，该E标签必须为行内或块元素，且必须要结合content属性使用。如 div：：after { content：”welcom！“； } 意为在div盒子里的最后位置插入welcom！

CSS外观属性

color：文本颜色

color属性用于定义文本的颜色，取值方式有三种。

直接英文颜色值，如color：green；
十六进制：如color：#FF0000，最常用的方式
RGB代码：如color：rgb（255，0，0）；表红色。

line-height：行间距

行与行之间的距离，即行高。属性单位有三种，分别为px、em和%，常用的是px。

text-align：水平对齐方式

用于设置文本内容的水平对齐，相当于html的align对齐属性，属性值有：left（默认的左对齐）、right、center

text-indent：首行缩进

允许使用负值。一般用em单位，1em=一个字宽度，首行缩进则为text-indent：2em；

letter-spacing：字间距

即字符与字符之间的空白，允许使用负值，属性值可为不同单位的数值，一般为px单位。默认值为normal。

word-spacing：单词间距

针对英文单词的单词与单词之间的距离，对中文汉字无效。而letter-spacing属性也可用于英文，只是效果为字母之间的距离。

颜色半透明（CSS3）

语法格式： color：rgba（r，g，b，a）； a是alpha 透明的意思，取值范围0~1，0为透明。如color：rgba（0，0，0，0.5）；

文字阴影（CSS3）

语法格式：text-shadow：水平位置垂直位置模糊距离阴影颜色；如 text-shadow：3px 5px 1px rgba（0，0，0，0.5）；

值	描述
h-shadow	必须。水平阴影的位置，单位px
v-shadow	必须。垂直阴影距离，单位px
blur	可选。模糊的距离，单位px
color	可选。阴影的颜色，可为rgb或rgba

引入CSS样式表

行内式（内联样式）

通过style属性来在标签内设置样式，格式为 <标签名 style=”属性1：属性值；属性2：属性值；“>

如 <div style="color:green; font-size:16px;">请叫我第一夫人</div>, 大规模的代码不建议这样写

内部样式表（内嵌式）

内嵌式是将css代码集中写在HTML文档的head头部标签内，并且用style标签定义，基本语法格式:

<head>
    <style type="text/css">           <!--type表类型，css表文本-->
        选择器{属性1：属性值；属性2：属性值；}
    </style>
</head>

外部样式表（外链式）

指将所有样式放在一个或多个css的外部样式表文件中，在head头部标签内通过link标签将css链接到html文档中

格式为： <link href="css文件的路径" type=”text/css“ rel=”stylesheet“ />

其中link为单标签，三个属于意思为：

href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径

type：定义所链接文档的类型，这里需指定为”text/css“指链接的外部文件为CSS样式表

rel：定义当前文档与被链接文档之间的关系，这里需指定为”stylesheet“，表示被链接的文档是一个样式表文件

标签显示模式（行、块）

块级元素

每个块级元素通常会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。

常见的块级元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。

块级元素特点：

总是从新行开始
高度、行高、外边距以及内边距都可以控制
宽度默认是容器的100%
可以容纳内联元素和其他块元素

行内元素

也叫内联元素，不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。

常见的行内元素有：<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签是最典型的行内元素。

行内元素特点：

和相邻的行内元素排在一行上
高、宽设置无效，但水平方向的padding和margin可以设置，垂直方向的无效
默认宽度就是它本身内容的宽度
行内元素只能容纳文本或其他行内元素，即行内元素不能嵌套块级元素，如<p> <div> </div> </p>。（a特殊）

注意：只有文字才能组成段落，因此p标签不能放div等块级元素，同理不能放块级元素的标签还有h1~h6，dt，它们都是文字类块级标签。

行内块元素

在行内元素中有几个特殊的标签，<img />、<input />、<td>，可以对它们设置宽度和高度。

行内块元素特点：

和相邻行内元素（行内块）在一行上，但是之间会有空白间隙
默认宽度就是它本身内容的宽度
宽度、行高、外边距以及内边距都可以控制

标签显示模式转换

块转行内：display：inline；如div块元素转为行内元素
行内转块：display：block；如span行内元素转为块级元素
块级元素和行内元素转为行内块元素： display：inline-block；如a标签的链接转为行内块元素，即可设置标签的宽高

CSS书写规范

空格规范

【强制】选择器与 { 之间必须包含空格。示例： .class { }

【强制】属性名与之后的：之间不允许包含空格，：与属性值之间必须包含空格。示例： font-size: 12px;

选择器规范

【强制】当一个要设置的样式里面包含多个选择器时，每个选择器必须独占一行。示例：

.post,
.content-head,
.content-body, {

    font-size: 16px;
}

【建议】选择器的嵌套层级应不大于3，位置靠后的限定条件应尽可能精确。如.page ul li a { }

属性规范

【强制】属性定义必须另起一行。

【强制】属性定义后必须以分号；结尾。

CSS背景（background）

可添加背景颜色和背景图片，以及进行背景图片设置

属性	含义
background-color	背景颜色
background-image：url（）；	背景图片地址
background-repeat：no-repeat；/repeat-x；....	背景图片是否平铺
background-position	背景位置
background-attachment：scroll；/fixed；	背景固定还是滚动
背景的合写： background：背景颜色背景图片地址背景平铺背景滚动背景位置

背景位置（position）

语法：

background-position：length length；说明：length单位为百分数或精确的px，第一个代表横轴，第二个代表纵轴

background-position：position position；说明：属性值position为top、center、bottom、left、right方位名词，且填写的方位名词无顺序要求。

如只有两个属性值，则默认第一个为x轴，第二个为y轴值或居中，注意：位置设置必须先指定background-image属性。

注意这里的坐标与我们数学里的有点不大一样，x轴与数学一致，而y轴则是越往下数值越大。

背景图片大小（size）

background-size：30px 30px;(当背景图片过大撑开盒子时，可设置背景图片的大小) 而background-position是改变背景图片的位置

背景图片附着

语法格式： background-attachment：scroll； /fixed；

scroll：背景图像随对象内容滚动

fixed：背景图像固定，不随内容滚动而滚动

背景语法简写

background：背景颜色背景图片地址背景平铺背景滚动背景位置；（无顺序要求，但是x、y轴不能分开）

如： background：#000 url(image.jpg) repeat-y scroll 50% 0;

背景透明（CSS）

语法格式： background：rgba（0，0，0，0.3）； //a是alpha透明度，范围为：0~1。

注意：背景透明是指盒子背景透明，盒子里面的内容不受影响，同样也可以给文字和边框透明，都是rgba的格式书写。

背景缩放（CSS）

通过background-size属性来设置背景图片的尺寸，就像设置的img的尺寸一样。属性值如下：

单位为px或百分比，设置百分比时，参照盒子的宽高。注意：尽量设置一个值，防止图片失真。
属性值为cover时，为保证图片宽度高度和盒子宽高相等，图片会进行等比例缩放，如有溢出盒子则会被隐藏。
属性值为contain时，前提是图片完整显示，所有会自动调整缩放比例，宽高有一方与盒子相等即可。

多背景（CSS）

以逗号分隔可以设置多背景，可用于自适应布局。

一个元素可以设置多重背景图像
每组属性间使用逗号分隔
如果设置的多重背景图之间存在着交集（即存在着重叠关系），则前面的背景图会覆盖在后面的背景图之上。
为避免背景色将图像覆盖，我们需要把背景色设置在最后一组上

body{
    background: url(flower.jpg)  no-repeat scroll 10px 20px/50px 60px ,
                url(sun.jpg) no-repeat scroll 10px 50px/70px 90px,
                url(sea.jpg) no-repeat scroll 10px 30px/70px 50px #aaa;
}

凹凸文字

首先文字颜色和背景颜色要相同
其次就是设置阴影的问题
凸起的文字设置形式为：上左为亮色（上y轴为负数，左x轴为负数），下右为黑色（下y轴为正数，右x轴为正数）
凹文字效果设置形式为：和凸起文字xy轴设置刚好相反，上左为黑色，下右为亮色

<head>
		<meta charset="UTF-8">
		<style>
			body{
				background-color: gray;
			}
			div{
				font: 700 60px "微软雅黑";
				color: gray;
				
			}
			div:first-child{
				/*text-shadow：水平位置 垂直位置 模糊距离 阴影颜色*/
				text-shadow: 1px 1px 1px #000000,
							-1px -1px 1px #000000;
			}
			div:last-child{
				text-shadow: -1px -1px 1px #000000,
							 1px 1px 1px #000000;
			}
		</style>
</head>
	<body>
		<div>我是凸起文字</div>
		<div>我是凹下的文字</div>
	</body>

导航栏案例

文本的装饰

text-decoration属性用来给a标签的链接修改装饰效果

值	描述
none	去掉链接的下划线
underline	链接默认的自带下划线
overline	定义文本之上的一条线
line-through	定义穿过文本的一条线

<head>
		<meta charset="UTF-8">
		<title>导航栏块形设置</title>
		<style type="text/css">
			body{
				width: 900px;
				height: 100px;
				background-color: #000000;
			}
			a{
				font-size: 22px;
				display: inline-block;/*把a标签的行内元素转换为行内块元素*/
				color: #7FFF00;
				width: 200px;
				height: 50px;
				background-color: #FF4400;
				text-align: center;   /*文字水平居中*/
				line-height: 50px;   /*把行高设置为盒子的高度，就可以使文字垂直居中了*/
				text-decoration: none;   /*取消默认的链接下滑线*/
			}
			a:hover{   /*鼠标经过时，给链接添加背景图片*/
				background: url(../image/icon/bg_ie_0fc292ea.png),repeat-x;
			}
		</style>
	</head>
	<body>
		<a href="#">专区说明</a>
		<a href="#">申请物资</a>
		<a href="#">兑换奖励</a>
		<a href="#">下载游戏</a>
	</body>

使用技巧：在一行内的盒子内，想要设置文字垂直居中，可以将行高设置等于盒子的高度，即line-height：50px；

CSS盒子模型（重点）

其实，CSS就三个大模块，盒子模型、浮动、定位。其余的都是细节。

所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器，每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。前面学过的双标签都是一个盒子。

一个盒子中，都是相对content内容来说的padding和margin

看透网页布局的本质：把网页元素比如文字图片等，放入盒子里面，然后利用CSS摆放盒子的过程，就是网页布局。

什么是盒子呢？可以拿收到的手机快递为例，整个泡沫的大小为一个盒子，那么手机相当于content内容、手机与泡沫边的距离或泡沫的厚度为padding、盒子的厚度为border、而与其他盒子的距离则为margin。

所有的文档元素（标签）都会生成一个矩形框，我们称为元素框，它描述了一个文档元素在网页布局汇总中所占的位置大小，因此，每个盒子除了有自己大小和位置外，还影响着其他盒子的大小和位置。

盒子边框（border）

边框就是那层皮，如橘子皮

语法： border：border-width border-style border-color；

其中，border-style为边框样式属性，用于定义页面中边框的风格，属性值有：

none：没有边框即忽略所有边框的宽度（默认值）
solid：边框为单实线（最为常用的）
dashed：边框为虚线
dotted：边框为点线
double：边框为双实线

盒子边框写法总结表

设置内容	样式属性	常用属性值
上边框	border-top-style：样式；border-top-width：宽度；border-top-color：颜色；综合：border-top：宽度样式颜色；
下边框	同上边框，将top改为bottom，如border-bottom-style：样式；
左边框	同上边框，将top改为left，如border-left-style：样式；
右边框	同上边框，将top改为right，如border-right-style：样式；
样式综合设置	border-style：上边[右边下边左边]	none无（默认）、solid单实线、 dashed虚线、dotted点线、 double双实线
宽度综合设置	border-width：上边[右边下边左边]	像素值
颜色综合设置	border-color：上边[右边下边左边]	颜色值、#十六进制、rgb（r，g，b）
边框综合设置	border：四边宽度四边样式四边颜色；

表格的细线边框

我们知道在HTML中，即使在table标签里写明<table cellspacing：”0“ cellpadding：”0“>也只是得到较粗的合并边框，这里我们可以用css来得到表格的细线边框。

table{ border-collapse：collapse；} 此处的属性及属性值border-collapse：collapse；表示边框合并在一起。

圆角边框（CSS3）

语法格式： border-radius：左上角右上角右下角左下角；单位是px或百分比，表多少px或百分比弧度的意思。

如： border-radius：20px；四个参数时为顺时针顺序且从左上角开始，两个参数时为对角线相同原则。使用此属性前要有盒子的宽度和高度属性设置。

内边距（padding）

用于设置内边距，指边框于内容之间的距离。单位为px

padding-top：上内边距

padding-right：右内边距

padding-bottom：下内边距

padding-left：左内边距

综合写法为 padding：上右下左；（顺时针方向，且从上内边距开始）

注意：当有一个属性值时指整个内边距都为设置的属性值；两个属性值时第一个代表上下，第二个代表左右

fireworks测量工具

模仿一个网页的制作，我们需要知道这个网页各部分的具体颜色和各部分的宽高，这是可以用fireworks测量工具，常用到的菜单有滴管工具、切片工具、锁定图层等

导航栏案例之各导航间距相同

<head>
		<meta charset="UTF-8">
		<title>新浪的导航栏模仿案例</title>
		<style type="text/css">
			nav{
				background-color: whitesmoke;
				height: 41px;
				border-top: 3px solid black;
				border-bottom: 1px solid black;
			}
			nav a{
				display: inline-block;
				color:  #696969;
				text-decoration: none;   /*取消链接下划线*/
				padding: 0 15px;   /*内边距之上下为0，左右为15px*/
				text-align: center;
				line-height: 41px;   /*行高等于盒子高度即可实现文字垂直居中*/
			}
			nav a:hover{  /*链接伪类选择器，鼠标经过时样式设置*/
				background-color: darkgray
		</style>
	</head>
	<body>
		<nav>
			<a href="#">设为首页</a>
			<a href="#">手机新浪网</a>
			<a href="#">移动客户端</a>
			<a href="#">博客</a>
			<a href="#">微博</a>
			<a href="#">关注我</a>
		</nav>
	</body>

外边距（margin）

用于设置外边距，即会在元素之间创建“空白”，这段空白通常不能放置其他内容。

margin-top：上外边距 margin-right：右外边距 margin-bottom：下外边距 margin-left：左外边距

综合写法：margin：上右下左；（顺时针顺序）

外边距实现盒子居中

让一个盒子实现水平居中，需要满足两个条件

必须是块级元素
盒子必须指定了宽度（width）

然后给左右的外边距都设置outo，即可实现块级元素的水平居中效果。如代码： margin：20px auto；上下为20px，左右水平居中。

清除元素默认的内外边距

为了更方便地控制网页中的元素，制作网页时，可使用如下代码清除元素默认的内外边距

*｛
    padding：0； <!--清除内边距-->
    margin：0；   <!--清除外边距-->  
｝

实际开发中都不这样设置，会选择 div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p{ padding:0;margin:0}

注意：行内元素只有左右内外边距，没有上下内外边距，以后尽量不要给行内元素如span设置上下内外边距，或可通过设置display来设置成为块级元素。

盒子模型布局稳定性

其实大多数情况下，内边距、外边距是可以混用的，没有规定这个情况下要用内边距，那个情况下要用外边距，真实情况下哪个方便就用哪个。但是，总有一个最好用的吧，这个情况下我们根据稳定性来分，建议如下：

width>padding>margin

原因：

margin会有外边距合并，还有ie6下面的margin加倍的bug（讨厌）所以最后使用
padding会影响盒子大小，需要进行加减计算（麻烦）其次使用
width 没有问题，我们经常使用宽度剩余法高度剩余法来做

CSS3盒模型

CSS3中可以通过box-sizing属性来指定盒模型，即可指定属性值为content-box或border-box，这样我们计算盒子大小的方式就发生了改变。

box-sizing：content-box；指初定义的盒子宽高会随着所加的padding、border增加而增加，即盒子大小为width+padding+border，让元素维持W3C的标准Box Mode
box-sizing：border-box；指给盒子定义的宽高是绝对值了，后添加的padding、border都是在盒子内改变。即盒子大小为width，padding、border都包含到width里面的。

盒子阴影

语法格式： box-shadow：水平阴影垂直阴影模糊距离阴影尺寸（影子大小）阴影颜色内/外阴影

如： box-shadow：10px 10px 8px 5px rgba（255，255，255，0.3）；

值	描述
h-shadow	必须。水平阴影位置，允许负值
v-shadow	必须。垂直阴影位置，允许负值
blur	可选。模糊距离
spread	可选。阴影的尺寸即影子大小
color	可选。阴影的颜色，rgba（）；
inset	可选。内部阴影。不写默认外部阴影（outset）