1.边框
1.边框属性
（1）简写方式
border : width style color;
width : 以px为单位的数据
style : 边框样式
solid：实线边框
dotted：虚线边框（点组成）
dashed：虚线边框（线）
color：边框颜色，也可以取值为 transparent （透明）
注意： border : none; / border : 0; 取消边框
（2）单边定义
属性：border-top / right / bottom / left : width style color;
（3）单属性设置
设置边框的某一个属性
属性： border-width / style / color : 值;
（4）单边单属性设置
只设置某一方向的某一属性值
属性：border-方向-属性 : 值;
方向：top / right / bottom / left
属性：width / style / color
2.边框倒角
将元素的四个角，由直角倒换成圆角
属性：border-radius:值;
取值：以px为单位的具体值 / %
3.边框阴影
属性：box-shadow
取值：h-shadow v-shadow blur spread color inset
h-shadow : 阴影的水平偏移距离，必须要加的，没有阴影取值为0，取值为正，阴影右偏移，取值为负，阴影左偏移
v-shadow：阴影的垂直偏移距离，必须的，取值为正，阴影下偏移，取值为负，阴影上偏移
blur：模糊距离，取值越大，模糊效果越明显，以 px 为单位的数值
spread：阴影的大小，指定要在基础阴影上扩充出来的大小距离，取值为 px 为单位的数值
color：阴影颜色
inset：将默认的外阴影改为内阴影
4.轮廓
轮廓指边框的边框，绘制于边框外围的一条线
（1）简写方式
outline : width style color;
outline : none; / ourline : 0; 无轮廓
2.框模型
1.框模型（Box Model）规定了元素框处理元素内容、内边距、边框和外边距的方式
外边距：元素与元素之间的距离
内边距：元素边框与内容之间的距离
当框模型介入到元素后，元素的占地尺寸会发生变化:
元素的宽度 = 左右外边距+左右边框+左右内边距+w;
元素的高度 = 上下外边距+上下边框+上下内边距+h
2.外边距
属性：
margin：定义某个元素四个方向的外边距
margin-top / right / bottom / left
取值：
（1）具体的数值，以px为单位的数字
（2）取值为负，让元素向反方向移动
margin-left : 取值为正，让元素右移动；取值为负，让元素左移动
margin-top ：取值为正，让元素下移动；取值为负，让元素上移动
（3）取值为 % ： 外边距的值，占父元素宽或者高的占比
（4）取值为auto ：自动计算外边距的值 （只对块级的左右外边距有效 水平居中对齐）
简洁写法
（1）margin-value ;
四个方向的外边距都相同
（2）margin : v1,v2;
v1 ：上下外边距
v2 ：左右外边距
（3）margin ：v1,v2,v3;
v1：上外编剧
v2：左右外边距
v3：下外边距
（4）margin：v1，v2，v3，v4；
分别是：上，右，下，左
自带外边距的元素
h1~h6,p,ul,ol,dl,dd,pre,body
可以通过 CSS Reset（CSS重写）的手段，来重置具备外边距的元素
/*取消元素外边距*/
body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dd,pre{ margin:0; }
外边距特殊效果
（1）外边距合并 ： 当两个垂直外边距相遇时，他们将合并成一个，最终的距离取决于两个外边距中距离较大的那个
（2）外边距的溢出 ： 在某些特殊的条件下（父元素没有上边框且为第一个子元素设置上外边距时），为子元素设置上外边距时，有可能会作用在父元素上
解决方案： 1、为父元素增加上边框 弊端：对父元素的高度有影响 2、使用父元素的上内边距来取代子元素的上外边距 弊端：对父元素的高度有影响 3、在父元素的第一个子元素位置处，增加一个空 <table></table>
（3）行内元素 以及 行内块元素的垂直外边距
行内元素垂直外边距无效（img除外）
行内块元素，设置垂直外边距时，整行元素都跟着发生改变
3.内边距
（1）内边距是元素边框与内容之间的距离，内边距会扩大元素边框占地区域
（2）属性：
padding : vaule ;
padding-top / right / bottom / left : value;
取值：
以 px 或者 % 为单位的数值
简介写法：
padding：value
padding：v1，v2 上下、左右
padding：v1，v2，v3 上、左右、下
padding：v1，v2，v3，v4 上、右、下、左
4.box-sizing属性
指定框模型的计算方式
取值：
（1）content-box
默认值采用默认的方式计算元素的占地区域
实际占地宽度=左右边框+左右内边距+width;
实际占地高度=上下边框+上下内边距+height
（2）border-box
元素的尺寸，包含border以及padding的值
实际占地宽度=width(包含了border和padding)
实际占地高度=height(包含了border和padding)
练习：
1.创建一个元素id为container，尺寸为 900*150 （最小高度）（包含边框和内边距的尺寸） 2.设置边框的颜色为#D0E4C2，1px，实线 3.在container下边创建一个p标记，id为page，里边添加6个a标记 4.a标记特征：边框颜色 #CCC，宽度为1px，实线，倒角，再增加内边距（3px 10px）
<style type="text/css"> #container{ width: 900px; min-height: 150px; box-sizing: border-box; border: 1px solid #D0E4C2; } a{ border:1px solid #CCC; border-radius: 5px; padding: 3px 10px; } a:focus{ border: 0; } </style> <div id="container"></div> <p id="page"> <a href="#">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> <a href="#">6</a> </p>
3.背景属性
1.背景色
属性：background-color
取值：合法的颜色值
注意：背景颜色是从边框的位置处开始绘制
2.背景图片
属性：background-image
取值：url(图片的地址);
3.背景平铺
属性：background-repeat
取值：
（1）repeat 默认值，横向纵向都平铺
（2）repeat-x 只在横向平铺
（3）repeat-y 只在纵向平铺
（4）no-repeat 不平铺
4.背景图片尺寸
属性：background-size
取值：
（1）width height
（2）width% height%
（3）cover 将背景图等比放大，直到背景图完全覆盖到元素的所有区域为止
（4）contain 将背景图等比放大，直到背景图碰到元素的某一个边缘为止
5.背景图片固定
作用：将背景图固定在网页的某个位置处，一直在可视化区域中，不会随着滚动条而发生位置的变化
属性：background-attachment
取值：
（1）scroll 默认值，滚动
（2）fixed 固定
注意：为body设置背景图时，才允许设置背景图片的固定
6.背景定位
作用：改变背景图在元素中的位置
属性：background-position
取值：
（1）x y
x：背景图水平偏移距离，取值为正，向左移动；取值为负，向右移动
y：背景图垂直偏移距离，取值为正，向下移动；取值为负，向上移动
（2）x% y%
0% 0% ：背景图在左上角
100% 100% : 背景图在右下角
100% 0% : 背景图在右上角
（3）关键字
x : left / center / right
y : top / center / bottom
7、背景的简写属性
在一个属性中指定背景的多个属性值
属性：background
取值：color url() repeat attachment position;
注意：如果不设置其中某个值的话，该位置将采用默认值
background:red; background:url(a.jpg) no-repeat;