关于边框:
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;