css常用

##字体
font-size       字体大小
font-familt     字体（如微软雅黑、宋体等）
font-weight     字体粗细
font-style      字体倾斜

字体综合设定：(必须按照这个顺序,而且font-size和font-familt必须有，其它可以不写)
字体倾斜->字体粗细->字体大小->字体
font: font-style  font-weight font-size font-familt;


#外观属性
color    字体颜色
line-height  行高（行与行的间距）
text-align    文字的水平对齐方式（如左对齐、居中）
text-indent   首行缩进
letter-spacing  字间距
word-spacing    单词间距（只对英文有效）
display        标签显示模式与转换（如块级标签改成行级标签的特性）
#行级元素只有左右外边距，没有上下边距

#背景
background-color  背景颜色
background-image   背景图片（默认平铺）
background-repeat   背景图片样式（平铺等）
background-position   更改背景图片位置
background-attachment  背景附着（背景图片是否会根据滚动而改变）

背景综合缩写：(按照上面排列的顺序写即可)
background:        
例如：background: red url("1.png") no-repeat fixed center center; 
background-size     背景图片大小设置（高度与宽带的设置）

#文本装饰
text-decoration  下划线等


#鼠标经过
hover  如   a:hover{background-color: orange;}


#css三大特性
1、层叠性   如果冲突，后面的会覆盖前面的（类似变量覆盖）
2、继承性   子标签会继承某些样式，如字体颜色、字号。   
3、优先级    !important>标签内写的>id>class、伪类>标签


同一类选择器或权重相同，最后的写的生效（离内容最近的生效）
!important   最大
标签内写的   1,0,0,0
id           0,1,0,0
class        0,0,1,0
标签          0,0,0,1
继承         0,0,0,0

#权重叠加
权重是可以叠加的   如 ul li > li


#盒子模型
border    盒子边框
padding   盒子中填充的厚度
margin    外边距


#border    盒子边框
由 宽度（border-width）、边框样式（border-style）、颜色（border-color组成
border边框综合写法
如上边框综合写法  border-top: 10px solid red;


css3圆角边框
border-radius

#padding内边距（写法和border基本相同）
padding综合写法（没有样式）
如 padding：10px 20px；


margin外边距
margin和padding基本相同

使用margin居中对齐
1、必须是块级元素
2、盒子必须指定宽度（width）
如：margin: 0 auto;

overflow: hidden;



盒子尺寸
width   宽
height   高


#取消li标签的小点
list-style: none;  #取消默认的列表样式


#boder和padding不撑开盒子
box-sizing: border-box;

#盒子阴影
box-shadow
#文字阴影
text-shadow


#文档流
#float浮动
left     左浮动
right    右浮动
none     不浮动（默认）

#清除浮动
#很多情况我们不知道标签的长度，如新闻
这种情况我们就不方便添加父级标签

clear  #清除浮动
参数
left 清除左边浮动
right 右边
both   两边

1、额外标签法（在浮动盒子后面添加一个空盒子）
<div style="clear: both"></div>
2、父级添加overflow属性方法
在父级标签中添加 overflow: hidden;
3、after伪元素清除
选择器:after{
    clear: both; #清除浮动
    visibility: hidden; #隐藏盒子
    display: block; #先转为块级元素
    content: "."; #内容为小点（有东西就行）
    heigth: 0;
}
4、使用before和after双伪元素清除浮动
选择器:before,选择器:after {
            content: "";
            display: table;
        }
        选择器:after {
            clear: both;
        }



position 定位

1、边偏移
left  左
right  右
top    顶
bottom   底

2、定位模式（定位的分类）
static   自动定位（默认模式）
relative  相对定位，相对于其原文档流位置进行定位（不脱离标准流）
absolute   绝对定位，相对于其上一个已经定位的元素进行定位
fixed      固定定位，相对UI浏览器窗口进行定位

#隐藏盒子但会保留盒子占的空间
isibility: hidden;

#溢出隐藏等操作
overflow

###css用户界面样式
1、cursor #鼠标样式（如小手）
2、outline #取消轮廓线
3、resize #防止拖拽文本域
4、vertical-align #图片或文本对齐