CSS基础知识点2

链接伪类

通过链接伪类可以实现不同的链接状态，所谓伪类并不是真正意义上的类，他的名称由系统定义，通常由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：距父元素右边线的距离