链接伪类
通过链接伪类可以实现不同的链接状态,所谓伪类并不是真正意义上的类,他的名称由系统定义,通常由id名,类名,标记名加 “:”构成
a:link{} 未访问时超链接的状态
a:visited{} 访问后超链接状态
a:hover{} 鼠标经过,悬停时超链接状态
a:active{} 鼠标单击不动时超链接状态
两种状态同时用,用逗号隔开 “ ,”
text-decoration:none;清除超链接默认的下划线
注意
1.同时使用四种伪类时,通常按照 a:link,a:visited,a:hover,a:active书写,否则定义的样式可能不能用
2.除了文本样式外,链接伪类还常常用于控制超链接的背景,边框等样式
盒子模型
边框属性
border-style:上 [ 右 下 左];
属性:solid(边框为单实线)dashed(虚线)dotted(点线)double(双实线)
注意
必须按上右下左,省略时采用顺时针复制原则,
即一个值为:四边,两个值: 上下/左右, 三个值:上/左右/下
边框宽度
border-width:上 [ 右 下 左];单位px
遵循上面的顺时针复制原则
边框颜色
border-color:上 [ 右 下 左];
border-top-colors:
border-bottom-colors:
border-right-colors:
border-left-colors:边框颜色数和其边框数宽度相等时,这时每种颜色站1px,边框颜色从外向内渲染。如果边框宽度为10px,却只设置8种边框颜色,那么最后一个边框颜色将自动渲染剩余的宽度。
综合设置
border:宽度 样式 颜色
圆角边框
border-radius:参数1/参数2;
参数1:圆角水平半径
参数2:圆角垂直半径
若第二个参数省略,默认等于第一个参数
图片边框综合设置
border-image:url(图片路径)33%/41px repeat;
33%边框的偏移
41px边框的宽度属性border-image-source 图片路径
border-image-slice 指定边框图像顶部,右侧,底部,左侧内偏移量
border-image-width 指定边框宽度
border-image-outset边框背景向盒子外部延伸的距离
border-image-repeat 背景图片的平铺方式
border-image-repeat:stretch;填充
边距属性
1.内边距
padding-top:上内边距
padding-right:右内边距
padding-left:左内边距
padding-bottom:下内边距
padding:上内边距 [右内边距 下内边距 左内边距 ]
注意
内边距为百分比,则不论上下或左右的内外边距,都是相对父元素宽度width的百分比,随父元素width的变化而变化和高度无关
外边距
margin-top:上外边距
margin-right:右外边距
margin-bottom:下外边距
margin-left:左外边距
margin:上外边距 [右外边距 下外边距 左外边距]
一般将左右外边距设置为auto
margin: 0 auto;
box-shadow 对盒子添加阴影效果
box-shadow:像素值1 像素值2 像素值3 像素值4 颜色值 阴影值;
像素值1(h-shadow) 像素值2(v-shadow)二者必填
像素值3(阴影模糊半径)像素值4(阴影扩展半径,不能为负)二者可选填
阴影类型(inset 内阴影 外阴影是默认)
box-sizing
添加边距或者内边距
box-sizing:content-box/border-box;
背景与图片不透明的设置
opacity:opacityValue;
0< opacityValue <1
0表示完全透明
1表示不透明
背景图像平铺
属性
repeat:沿水平和竖直方向平铺(默认值)
no-repeat:不平铺(图像位于元素的左上角,只显示一个)
repeat-X:只沿水平方向平铺
repeat-Y:只沿竖直方向平铺
background-position:right top;设置背景图像的位置
一般为两个值,若有一个值另一个为默认为center
background-attachment
属性
scroll:图像随页面元素一起滚动(默认值)
fixed:图像固定在屏幕上,不随页面元素滚动
背景图片的大小
background-size:属性1|属性2
像素值:设置背景图像的高度和宽度,第一个仅宽度,只设一个,第二个默认为auto
百分比:第一个设置宽度
cover:完全覆盖背景区域,背景图像的某些部分也许无法全部显示在指定位置
contain:把图像扩大到最大尺寸,完全适应内容区域
背景图片定位
background-origin:属性值
padding-box:背景图像相对于内边距区域来定位
border-box:背景图像相对于边框定位
content-box:背景图像相对于内容定位
background-clip:属性值;从某。。。。向外裁剪背景
元素的浮动
设置浮动
选择器{float:属性值;}
属性值
left 左浮动
right 右浮动
none 不浮动(默认)
清除浮动
选择器{clear:属性值;}
属性值
left 清除左浮动
right 清除右浮动
both 清除所有的
浮动之后要清除浮动
父元素不能自适应子元素高度的解决方法
1.overflow:hidden;清除子元素浮动对父元素的影响
2使用after伪元素对象清除元素1必须为需要清除浮动元素伪对象设置‘height:0;”样式,否则该元素会高出若干像素
2.必须在伪对象中设置content属性,该属性可为空,如“content:“ ”;”
overflow属性
选择器{overflow:属性值}
visible:内容不被修剪显示在狂之外
hidden:溢出部分被修剪,且不可见
auto:在需要时产生滚动条,即自适应所要显示的内容
scroll:溢出内容被修剪,且浏览器始终滚动条(2条滚动条)
溢出元素变省略号
white-space:nowrap;单行显示
overflow:hidden;
text-overflow:ellipsis;
元素定位
选择器{position:属性值}
static:静态定位(默认定位方式)(此状态下不能设置边偏移)
relative:相对定位,相对于原文档流的位置进行定位
absolute:绝对定位,相对于其上一个已经定位的父元素进行定位,不占用标准文档流的空间。
fixed:固定定位,相对浏览器窗口定位(和background-attrachement效果一样)
边偏移 想对父元素
属性值
top:距离父元素上边线的距离
bottom:距父元素下边线的距离
left:距父元素左边线的距离
right:距父元素右边线的距离