css--

关于边框：

border边框：

style边框的样式：1.solid   2、dotted、 3、dashed

border方向：width、color、style

单边框单属性定义：border--方向--属性：值

方向：top bottom left right

属性：width style color

边框倒角：

border-top-left-radius:左上角

border-top-right-radius右上角

border-bottom-left-radius左上角

border-bottom-right-radius右下角

特殊使用：

使用元素的尺寸属性，配合倒角一起使用，可以创建特殊图形（椭圆，正圆）

 

边框阴影：box-shadow    hv h-shadow:阴影的水平的距离 左为负，又为正

                                       v-shadow阴影的垂直的距离

spread:阴影尺寸     blur:模糊距离，增加距离  color:可选，颜色，默认黑色   inset可选，将默认的外阴影改为内阴影

 

 

什么是轮廓？

轮廓是绘制于元素外围的一条线

outline     :width\style\color

outline-width

outline-style

outline-color

常用样式：

outline:0

outline:none;

这上面的2个样式都是不要轮廓 

、框模型
1、框模型
框：页面上所有的元素
框模型：box model，盒模型，定义了元素框处理元素内容，内边距，边框和外边距的一种方式

增加内边距，外边距 不会影响元素内容区域的尺寸，但是会增加元素框的总尺寸

元素总宽度=左右外边距+左右边框+左右内边距+width；
元素总高度=上下外边距+上下边框+上下内边距+height；

2、外边距
1、什么是外边距
围绕在元素边框(缘)周围的空白区域就是外边距
默认情况下，是不允许被其他元素所占据的

外边距实际就是当前元素与其他元素之间的空间距离
2、语法
属性：margin
margin-left：左外边距
margin-right：右外边距
margin-top：上外边距
margin-bottom：下外边距
取值：value
取值可以为：
1、px具体数值
2、%
3、auto 控制块级元素水平居中的
4、负值 移动元素
margin-left：取值为正，向右移动元素
margin-left：取值为负，向左移动元素
margin-top：取值为正，向下移动元素
margin-top：取值为负，向上移动元素
margin属性的取值数量：
margin：value；上下左右四个方向的外边距
margin：v1 v2；v1上下外边距，v2左右外边距
margin：v1 v2 v3；v1上外边距，v2左右外边距，v3下外边距
margin：v1 v2 v3 v4；上右下左顺时针方向外边距
3、页面中具备默认外边距的元素
p，h1~h6，ol，ul，dl，dd，pre，body...

通过css重写的方式，覆盖元素默认的外边距
css重写：将默认的样式覆盖掉的过程
4、外边距特殊效果
1、外边距合并
当两个垂直外边距相遇时，他们将形成一个外边距
合并后的外边距的高度等于两个发生合并元素的外边距的较大者
2、外边距溢出
在某些条件下，为子元素设置上下外边距时，有可能会作用到父元素的效果上
外边距溢出的条件：
1、父元素未设置上下边框
2、给第一个子元素设置上外边距，则上外边距溢出
给最后一个子元素设置下外边距时，则下外边距溢出
解决方案
1、为父元素设置上(下)边框，挡住外边距的溢出
弊端：影响父元素高度
2、为父元素设置上(下)内边距，来取代子元素的外边距
弊端：影响父元素高度
3、在父元素中添加一个 空table 元素，作为第一个(最后一个)子元素
<table></table>
4、... ...
5、设置外边距注意
1、为行内元素设置上下外边距，是没有效果的
2、为行内块元素设置上下外边距，整行元素都会跟着发生改变
3、内边距
1、什么是内边距
内容区域和元素边框(缘)之间的距离
内边距会扩大元素边框所占用的区域
2、语法
属性：
padding
padding-left:
padding-right:
padding-top:
padding-bottom:
取值：
可以为px，%，auto，没有负数！
padding取值数量：
padding:value;四个方向内边距统一
padding：v1 v2；v1上下内边距，v2左右内边距
padding：v1 v2 v3；v1上内边距，v2左右内边距，v3下内边距
padding：v1 v2 v3 v4；上右下左顺时针方向内边距
3、注意
为行内元素和行内块元素设置上下内边距时，效果只影响自己，不会影响其他元素
4、box-sizing属性
指定 框模型的 计算模式
默认计算模式，指定元素width属性，只负责控制元素的内容区域宽度，如果为元素指定padding，border的话，会在width的基础上，额外增加元素尺寸
元素总宽度(框内)=左右border+左右padding+width；
取值:
1、content-box
默认值，使用默认的计算模式
2、border-box
为元素指定的width属性值中，会包含border以及padding的值
box-sizing:border-box;
3、背景属性
1、背景颜色
属性：background-color
取值：
任意合法颜色值或transparent
注意：
会填充元素的内容，内边距，边框区域
2、背景图片
属性：background-image
取值：url（图片url）

background-image与img之间的区别：
1、background-image作为元素的背景出现的
而 img是独立的元素
2、页面上经常变换的图片用img标记，不经常变换的图像，可以用 背景表示
3、背景重复
属性：background-repeat
取值：
1、repeat
默认值，水平和垂直方向平铺
2、repeat-x
仅在水平方向平铺
3、repeat-y
仅在垂直方向平铺
4、no-repeat
不平铺
4、背景图片尺寸
属性：background-size
取值：
1、value1 value2
指定 背景图片 宽度和高度
2、value1% value2%
背景图的宽和高占比 元素的宽高占比
3、cover
覆盖，将背景图进行等比扩大，直到背景图完全覆盖到元素为止，图片的某些部分也许无法显示
4、contain
包含，将背景图进行等比扩大，直到右边或者下边有一个边缘碰到元素为止
5、背景图片固定
属性：background-attachment
取值：
1、scroll
滚动，默认值，背景图会随着文档发生滚动
2、fixed
背景图像固定，不会随着其余内容部分发生滚动
6、背景定位
作用：指定背景图片在元素中的位置
属性：background-position
取值：
1、x y
x：背景图像水平偏移位置，取值为正，背景图向右偏移，取值为负，则向左偏移
y：背景图像垂直偏移位置，取值为正，背景图向下偏移，取值为负，向上偏移
2、x% y%
3、关键字
x：left center right
y：top center bottom

css sprites
将若干幅小背景图合并到一幅大的图像中，从而实现减少http请求次数
7、背景属性
属性：background
取值：color url() repeat attachemt position;