CSS的各种属性，以及样式设置

格式

书写位置

		内部样式表：写在head标签中，用style引用
		行内样式表：写在标签里，用style引用
		外部样式表：新建一个css文件，用link链接
 复制

样式：

字体样式

字体属性：font-size设置字体大小
                  font-family设置字体（先设置英文，后设置中文）（宋体等）
                  font-weight设置字体粗细
                  font-style设置字体风格（斜体等）
                  font-综合设置（顺序：倾斜，加粗，字号，字体）复制

外观样式

外观属性：color设置文本颜色（直接写颜色的英文单词，百度16进制颜色，rgb选颜色，rgba设置颜色和透明度
                line-height设置行高
                text-align对齐方式
                text-indent首行缩进（单位是em）
                text-decoration文本装饰（none去掉下划线，overline上划线，underline下划线，line-through中划线
                letter-spacing文字间距（单位是px和em）复制

#选择器：

各种选择器

基础选择器：标签选择器（用HTML里的标签作为选择器）
                    类选择器（用class给标签起一个类名，用点加类名引用）
                    多类名选择器（与前一个类名用空格隔开，一个标签可以取多个类名）
                    id选择器（用id给标签起一个id名，用#加id名引用，一个页面不能有相同的id名）
                    通配符选择器（用*引用，可以给页面所有元素设置样式）
 
复合选择器：交集选择器（用标签加点类名引用）
                    并集选择器（可以使用所有的选择器，选择器之间用逗号隔开）
                    后代选择器（可以使用所有的选择器，用外层加内层引用，中间空格隔开）
                    子代选择器（可以使用所有的选择器，用父元素>子元素引用，外层是父内层是子）
 
伪类选择器：链接伪类选择器（：link为访问时的样式，：hover鼠标移入时的样式，：active点击释放时的样式
                                              ：visited访问过后的样式，用a：加其中一种引用，顺序是：link，visied，hover
                                               active复制

标签显示模式

元素转换

标签显示模式：块状元素（独占一行，可以设置宽高，对齐方式等）
                       行内元素（不占独立区域，无法设置宽高，可以设置水平间距，垂直间距无法设置）
                       行内块元素（可以设置宽高，不换行，内外边距可以设置）
                       标签元素转换：（块转行内：display：inline
                                                  行内转块：dispaly：block
                                                  转行内块元素：display：inline-block
                                                  dispaly：none不显示，不占用原本空间复制

背景

背景图以及颜色

背景：背景颜色（用background-color引用，可以用颜色单词，十六进制，grb，grba来设置颜色）
          背景图片（用background-image引用，none是没有，url是引用）
          背景平铺（用background-repeat引用，no-repeat是平埔，repeat-x时横向平铺，repeat-y是纵向平铺）
          背景位置（用background-position引用，单位有百分比，或者用top，center，bottom，left，center，right，中间用空格隔开）
          背景固定（用background-attachment引用，fixed固定，scroll滑动）
          综合设置（用background引用，没有顺序要求，中间用空格隔开，顺序最好是，颜色，图片，平铺，固定，位置）
          背景位置百分比算法（x=（容器宽度-背景图片宽度）*x%，y=（容器宽度-背景图片的高度）*y%）
          背景图大小设置（用background-size引用）
 复制

优先级

优先级以及权重

优先级：：使用了！importan声明的
                 内嵌在html元素的style属性里的声明
                 使用了id选择器的 
                 使用了类，属性，伪元素，伪类选择器的
                 使用了元素选择器的
                 包含一个通用选择器的
                 同一个类选择器则遵循就近规则
 
继承贡献值：每个元素（标签）贡献值为0,0,0,1
                    每个类，伪类贡献值为0,0,1,0 
                    每个ID贡献值为  0,1,0,0 
                    每个行内样式贡献值 1,0,0,0
                    每个!important贡献值 重要的∞ 无穷大复制

盒子

盒子的各种属性，以及设置样式

盒子模型：padding内边距，border边框，margin外边距
盒子边框：统一样式时用：border来设置
                不统一时用：border-top，border-right，border-bottom，border-left来设置
                 属性有：width宽度，style样式，color颜色
                 边框线属性：none没有边框，dashed虚线，dotted点线，solid实线，double双实线
                 
 
内边距：（padding，top上，right右，bottom下，left左）
外边距：（margin，top上，right右，bottom下，left左）
盒子居中：（必须时块级元素，先要设置宽度，左右边距设置为margin：auto）
清除默认边框：（margin：0，padding：0）
 
相邻块元素垂直外边距合并：（两个元素的值谁的大就是谁的值） 
块元素嵌套垂直外边距合并解决方法：（可以为父元素的上边框或者上内边距定义1px或者用overflow-hidden属性）、
溢出属性：（overflow，hidden隐藏，scroll滚动）
content宽度和高度的计算公式： 外盒：（Element空间高度=content height+padding+boeder+margin
                                                                            空间宽度=             width+               +           +            )
                                                 内盒：（              空间高度=             height+             +  
                                                                            空间宽度=              width+              + ）
盒子布局稳定性：（优先设置宽度，其次设置内边距，再次外边距）
 
浮动：（通过float引用，只有left左浮动和right有浮动，none不浮动，三种值）
          （浮动后的元素会漂浮在其他元素上边，浮动后的元素是不占原来的位置， 
             浮动后的元素不能超出父元素的范围，浮动后的元素在同一水平线上显示
             浮动后的元素会自动的转化为行内块元素，浮动后的元素不能超出父元素的内边距和边框）
清除浮动：（用clear清除浮动，right右侧影响，left左侧影响，both同时清除）
解决元素塌陷：1.添加一个空的div，使两侧没有浮动，撑开父元素
                       2.父级元素添加overflow属性
                       3.伪元素清除浮动
                       4.双伪类清除浮动
 
定位属性:(边偏移，top顶部偏移，bottom底部偏移，left左偏移，right右偏移）
              (定位模式：用position引用
               值有：staic没有定位
                         relative相对于自己原来的位置偏移，原位置会保留，需要设置上下左右（相对定位）
                         fixed相对于浏览器窗口进行偏移，不保留原来位置（固定定位）
                         absolute（绝对定位）：1.祖先元素没有定位会相对于浏览器窗口偏移，不保留原来位置
                                                              2.祖先元素有定位会相对于最近的有定位的祖先元素偏移，不保留原来位置
   定位时发生了重叠用z-index，值可以是正数，负数，0，谁大谁在上面（只有定位了才能使用）
 
 
元素显示与隐藏：用display引用，值有none不显示，block显示，不保留原来位置
可见性：用visibility引用，值有visible显示，hidde不显示，保留原来位置
溢出：用overflow引用，值有hidden超出部分隐藏，auto超出部分自动添加滚动条，
          scroll滚动条，visi超出部分显示
透明度：用opacity引用，值是0~1之间
 
鼠标样式：用cursor引用，值有default箭头，pointer小手，move移动，text竖线
轮廓：用outline引用，值有color，style，width，none没有效果
禁止拖拽：用resize:none禁止
垂直对齐：用vertical-align引用，值有baseline基线对齐，top顶部对齐，middle居中
                 bottom底部对齐，以图片为参考对齐
 
去除图片地侧空白：给父元素设置font-size：0，图片设置display：blok转成块级元素
两个相邻的的行内块一个设置外边距，另一个也有影响，，用vertical-algn:top消除影响
溢出文字隐藏：用word-break引用，值有normal根据浏览器窗口大小换行
                        break-all允许在单词内换行，keep-all遇到半角，空客，中划线换行
强制一行显示：用white-space引用，值有nowrap超出部分不换行，只有加br才换行
                        normal超出部分换行
文本溢出：用text-overflow引用，值有clip超出部分不显示省略号，
                ellipsis超出部分显示省略号，首先强制一行显示，再搭配overflow：hidden属性使用
多行省略号：-webkit-line-clamp限制文本在块元素内的行数
                    displa：webkit-box结合属性，必须写
                    -webkit-box-orient结合属性，必须写
                    overflow：hidden结合属性，必须写
 
精灵图：用background-position便宜图片来设置复制