CSS基础知识(2)

不同选择器优先级也是不一样的。

 选择器的优先级：标签选择器<类选择器<ID选择器 
复合选择器的优先级：如div p span < div p span.class < div p span#id,后者优先级高。复合选择器的优先级根据权重来算。 
  另外 
div p span.class1 
div p span.class2 
这个后者的优先级高，谁在下面谁的高。  

选择器优先级：元素选择器（权值0001）<类选择器（权值0010）<伪类选择器（权值0010）<ID选择器（权值0100）<内联样式（权值1000）  

边框样式： 
    border：元素的外边框   border:width style color; 
    border=border-left+border right+... 
    border-left:  border left: 
    border-left-style... 
    border-color 
    border-width 
    border-style只能写样式 solid  dashed dotted 
    border-radius:边框倒角 
    border-radius: 5px;四个角都是5px 
    border-radius: 5px 10px;   
    border-radius: 5px 10px 15px 
    border-radius: 5px 10px 15px 20px顺序是从左上角开始，顺时针转一圈 
    box-shadow 阴影 
    box-shadow：h-shadow v-shadow blur spread color  这些属性是按顺序来识别的，color如果不定义，默认是黑色，但如果选择器里定义了color，shadow就是选择器定义的颜色 
    border-image 将素材图进行九宫格切片，四个角位置的就是border-image的四个顶点，repeat属性决定了中间位置的图形如何处理。 
    border-image:图片来源source 裁切大小 repeat方式 
    border-width决定图像边框缩放的大小  

尺寸： 
   px 像素 
   em 在原来基础上进行倍数的缩放 
   %  百分比 
   pt  1pt=1/72英寸  

width max-width height max-height  

框模型（box model），又叫盒子模型，定义了元素框处理元素内容、内边距、边框和外边框的方式。凡是能装内容的都是盒子。  

margin:40px; 
margin:40px 60px;上下是40，左右是60 
margin:10px 20px 30px 40px;上10，右20，下30，左40，如果不定义的，自动和对边一样 
当容器的上margin遇到了另一个元素的下margin时，并不是将margin值简单相加，二者距离是取其中较大的一个值。 
如果左右的margin值是auto，如margin:10px auto;则表示其中对齐，这是浏览器自动设置的，另外此处居中对齐表示的是基于父容器居中对齐。margin值可以为百分比，也可以为负的。margin-top正值向下移动，负值向上移动；margin-left正值向右，负值向左移动。  

添加padding值会把容器撑大，会增加容器大小，写法和margin一样。padding值可以为像素、百分比，但不能为负数，也没有auto的说法。  

1.盒子模型：宽度=内容物的宽度+border+padding+margin 
margin：margin是外边距，可以为负值，也可以为auto，水平左右margin为auto，容器居中对齐。margin-left为负值，容器向左移动。上面容器的margin-bottom遇到下容器的margin-top时，取较大的值为最终的margin 
padding：padding会撑开容器，计算宽度和高度时需要加上padding 
内边距与外边距，内与外是相对的，外层容器的内边距，相当于子容器的外边距  

内联元素，如span，是不能设置宽和高的，此时要想实现效果，可以通过设置padding和margin来实现彼此间距，但是margin-top加进去不好使。a标记也是内联元素。内联元素是可以添加border的。  

在样式表中，如果是ID的话，前面就不要加别的标记了，会影响加载效率。  

注意，CSS里面的注释和HTML里面是不一样的，是/*注释内容*/  

背景图片：默认是none，如果需要用起始字母URL附带一个图像的url值，可以是相对url也可以是绝对url，如：background-image：url(image/gn_01.gif);  

背景图的平铺属性：background-repeat,取值有repeat，repeat-x(仅在水平方向重复),repeat-y（仅在垂直方向重复）,no-repeat（仅显示一次）  

背景图的位置background-position：为了使背景图移动位置，如：background-position：10px 20px；定义两个值的话，第一个表示x轴的值，第二个表示y轴的值。也可以不写具体的像素值，可以写right，left，center，bottom，top,写成这样的话顺序写反了也可以识别出来。也可以写成百分比。  

背景图的大小：background-size，取值可以为具体像素值，也可以为百分比，还可以取值cover（背景图扩展到足够大将背景完全覆盖），contain（将背景图扩大使其其中一边的大小和背景一样）。但是很少用，一是兼容性有问题，而是会使图像失真。  

同时设置了背景色和背景图的时候，背景色不会把背景图覆盖掉，只会把背景图没覆盖的区域填充，背景图永远都是在背景色的上面。  

background-attachment将背景图片固定，在默认情况下，背景图会随着页面的滚动而移动，值可以为scroll（默认，背景随文档滚动），fixed（背景图像固定，并不会随着页面的其余部分滚动，常用于实现水印的图像）  

background-clip规定背景的绘制区域，可以取值为border-box(背景被裁剪到边框盒，为默认值)，padding-box（背景被裁剪到内边距框），content-box(背景被裁剪到内容框)  

background-origin规定背景图的定位区域，可以取值为： 
boder-box:背景图像相对于边框来定位 
padding-box:背景图像相对于内边距框来定位 
content-box：背景图像相对于内容框来定位，就是图片的width和height  

图像精灵就是将网页中所有图像拼到一起，是为了减少向服务器请求下载图片的次数  

渐变语法：有浏览器不兼容问题 
使用background-image属性进行设置，可以取值： 
  linear-gradient：线性渐变 
  radial-gradient：径向渐变 
  repeating-linear-gradient：重复线性渐变 
  repeating-radial-gradient：重复线性渐变 

linear-gradient(angle，color-point1，color-point2，...) 
    angle：为第一个参数，指定渐变的方向，可以是角度值，也可以是关键词，如to top(对应0deg),to right(对应90deg), 
    to bottom(对应180deg),,to left(对应270deg) 
    color-point:表示颜色的起始点、中间点或者结束点，取值为颜色和位置的结合，如red 0%, green 50% 
    如：#d1{background-image:linear-gradient(to bottom,red,#fff);} 
        #d2{background-image:linear-gradient(90deg,red 0,#ccc 30%, #fff 100%);} 
径向渐变：radial-gradient（size at position,color-point1, color-point2,...）,如： 
background-image:repeating-radial-gradient(50px， at center, red 0px. green 20px, orange 50x);

 重复线性渐变要设置哪个颜色在什么位置，不然会默认只能一次渐变了，如

 线性渐变：background-image:linear-gradient(to bottom,red,#fff)

 重复线性渐变：background-image:repeating-linear-gradient(to bottom,red 0,#fff 20%)，这里0~20%位置完成一次渐变，接下来会重复这样的渐变。

 渐变色：上浅下深：凸出的视觉效果；上深下浅：凹陷的视觉效果

 总结： 
背景：背景包含背景图、背景颜色 
     背景色：background-color 
     背景图：background-image 
           background-repeat 背景图重复方式 repeat、no-repeat、repeat-x、repeat-y 
           background-position:x-position  y-position 
                  x-position为负值，背景图左移 
                  y-position为负值，背景图上移 
          background-attachment 背景图固定  fixed 
          background-size 背景图缩放，一般不用 
                   background-size：width height 
          background-clip 背景色裁剪 
                    背景色默认是从border-box开始的，可以用该属性定义开始位置为padding-box或者是content-box 
         background-origin  背景图裁剪区域，设置背景图默认的开始位置。可以是border-box，padding-box，content-box 
渐变： 
     background-image的属性值，可以是： 
           linear-gradient：线性渐变 
            radial-gradient：径向渐变

             repeating-linear-gradient：重复线性渐变

            repeating-radial-gradient：重复径向渐变

 margin影响的是容器与周围容器的间距，当上下容器相遇时，取较大的值。margin是位于border外面的，不会影响容器大小，只会影响容器所占位置大小

 padding可以为0，不可用为负值，但是margin可以为负值

 对于有嵌套的容器，内外是相对的

 background属性：color、image、repeat、position、attachment、size、clip、origin

 注：background-clip 是背景色的绘制区域，而background-origin是背景图片的绘制区域，其他都一样。