css基础，这一篇就够了

1.前端的结构

• HTML 超文本标记语言 从语义的角度描述页面结构。
• CSS 层叠式样式表 从审美的角度负责页面样式。
• JS JavaScript 从交互的角度描述页面行为。

2.示例

遵循key：value;的格式，直接写在head标签的方式，以后会直接在css文件中写

<style type="text/css">
    p{
        color:red;
        font-size: 30px;
        text-decoration: underline;
        font-weight: bold;
        text-align: center;
        font-style: italic;
    }
    h1{
        color:blue;
        font-size: 50px;
        font-weight: bold;
        background-color: pink;
    }
</style>

属性：

• color:blue; 字符颜色
• font-size:19px; 字号大小
• backgroud-color:blue; 背景颜色
• font-weight:bold/normal; 加粗/正常
• font-style:italic/normal; 斜体/正常
• text-decoration:underline/none; 下划线/无下划线

3.选择器

1. 标签选择器：所有的标签，都可以是选择器，例子h1，页面中所有的h1就会变成下面的样式

   h1{
       color:blue;
       font-size: 50px;
       font-weight: bold;
       background-color: pink;
   }
   

2. id选择器:以#形式定义的css，调用id=“name”调用，name的命名规则：只能是字母开头，有字母数字下划线组成，不能与标签同名。

   <style type="text/css">
       #idname{
           color:red;
       }
   </style>
   
   <p id="idname">我是id选择器</p>
   
   <!--一个页面中不能出现同名id-->
   

3. 类选择器-class：与id相似，但是class可以重复使用

   .self{
       color: red;
   }
   .your{
       color: red;
   }
   
   <!--同一标签，可用多个类选择器，用空格分开-->
   <h3 class="self your">类选择器示例</h3>
   

4. id和class选择器

   • 尽量用class设计页面，id是用js调用的

5. 后代选择器：用空格隔开，.div1下的所有p的颜色是红色的。

   .div1 p{
       color:red;
   }
   
   <div class="div1">
       <ul>
           <li>
               <p>段落</p>
               <p>段落</p>
               <p>段落</p>
           </li>
       </ul>
   </div>
   

6. 并集选择器：逗号隔开

   h3,li{
       color:red;
   }
   

7. 交集选择器：以标签名开头

   h3.zhongya{
       color:red;
   }
   

8. 通配符：*，所有元素，效率低，不用

   *{
       color:red;
   }
   

9. 子类选择器（ie7开始兼容）

   div>p{
       color:red;
   }
   
   <!--能够选择：-->
   <div>
       <p>我是div的儿子</p>
   </div>
   <!--不能选择：-->
   <div>
       <ul>
           <li>
               <p>我是div的重孙子</p>
           </li>
       </ul>
   </div>
   

10. 时序选择器（ie8开始兼容）：可用class选择器实现兼容

    <!--ul第一项-->
    ul li:first-child{
        color:red;
    }
    
    <!--ul最后一项-->
    ul li:last-child{
        color:blue;
    }
    

11. 下一个选择器+

    h3+p{
        color:red;
    }
    
    <h3>我是一个标题</h3>
    <p>我是一个段落</p>
    

4.css的特性

1. css的继承性

   能够被继承的：关于文字样式的

   color、 text-开头的、line-开头的、font-开头的
   

   所有关于盒子的、定位的、布局的属性都不能继承

2. 层叠性

   选择器重复选中同一个地方，听谁的?

   1. 如果选中了，那么以（id数，类数，标签数）来计权重。谁大听谁的。如果权重一样，以后写的为准.
   2. 如果没有选中，那么权重是0。如果大家都是0，就近原则(层级接近)。
   3. 如果同一标签，携带多个类名有冲突话，以定义处后写的为准。
   4. !important,手动提高权重，为无限大。提升属性的权重，但是不影响就近原则，无法提升选择器权重，不用这个，因为会让css显得很乱。

       font-size:60px !important;
   

5.盒子模型

所有的标签都是盒子，无论是div、span、a都是盒子。图片、表单元素一律看作文本。

1. 简介

   • width是“宽度”的意思，CSS中width指的是内容的宽度，而不是盒子的宽度。
   • height是“高度”的意思，CSS中height指的是内容的高度，而不是盒子的高度
   • padding是“内边距”的意思
   • border是“边框”
   • margin是“外边距”

2. Padding

小属性

    padding-top: 30px;
    padding-right: 20px;
    padding-bottom: 40px;
    padding-left: 100px;    

综合属性（大属性）

    <!--上右下左-->
    padding:30px 20px 40px 100px;
    <!--上右下，左跟右一样-->
    padding:30px 20px 40px;
    <!--上右，下跟上一样，左跟右一样-->
    padding:30px 20px;
    <!--上右下左一样-->
    padding:30px;

小属性可以替换大属性，反之不行

    padding: 20px;
    padding-left: 30px; 

一些元素，默认带有padding,比如ul标签，所以用的时候，为了便于控制，总是清除这个默认的padding

    *{
        margin: 0;
        padding: 0;
    }

但是*的效率不高，所以使用并集选择器，罗列所有的元素

    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
        margin:0;
        padding:0
    }

1. border

   三个属性：粗细、线型（solid、dashed、dotted……）、颜色

   border: 1px dashed red;
   

   border属性能够被拆开，有两大种拆开的方式：

   1） 按3要素:border-width、border-style、border-color
   2） 按方向：border-top、border-right、border-bottom、border-left
   

   如果某一个小要素后面是空格隔开的多个值，那么就是上右下左的顺序：

   border-width:10px 20px;
   border-style:solid dashed dotted;
   border-color:red green blue yellow;
   

   用法可以拆拆拆……

   实际用法：简单着来，小属性替换大属性

   border:10px solid red;
   border-right-color:blue;
   

   border可以没有，

   border:none;
   

   某一条边没有：

   border-left: none;
   

   也可以调整左边边框的宽度为0：

   border-left-width: 0;
   

6.标准文档流

1） 块级元素

• 霸占一行，不能与其他任何元素并列
• 能接受宽、高
• 如果不设置宽度，那么宽度将默认变为父亲的100%。

2） 行内元素

• 与其他行内元素并排
• 不能设置宽、高。默认的宽度，就是文字的宽度。

3） 文本级、容器级

• 文本级：p、span、a、b、i、u、em
• 容器级：div、h系列、li、dt、dd

4） 所有的文本级标签，都是行内元素，除了p，p是个文本级，但是是个块级元素。
所有的容器级标签都是块级元素。

5） 块级元素和行内元素的相互转换

    display: inline;
    display: block;

7.脱离标准文档流的三种手段

• 浮动 float：right;浮动的元素脱标，可并排，并可以设置宽高，不管是行内元素还是块级元素
• 绝对定位

• 固定定位

  1. 浮动性质：

     • 脱标
     • 收缩：浮动元素不设置宽高，自动收缩为文字的宽度。
     • 贴边
     • 字围
     • 贴边

  2. 浮动清除

  3. 浮动元素的上级元素加高度。

  4. clear:both; 但是margin失效。
  5. 添加一个空白的标签隔开或者在内部添加标签-内墙法。
  6. overflow:hidden;溢出的内容隐藏掉.一个父亲不能被自己浮动的儿子，撑出高度。但是，只要给父亲加上overflow:hidden; 那么，父亲就能被儿子撑出高了。而且margin生效。

8. margin

1. 标准文档流中，竖直方向的margin不叠加，以较大的为准。
2. 盒子都浮动了，竖直方向的margin叠加.

3. 盒子居中margin:0 auto;

   注意：
   1） 使用margin:0 auto; 的盒子，必须有width，有明确的width
   2） 只有标准流的盒子，才能使用margin:0 auto; 居中。也就是说，当一个盒子浮动了、绝对定位了、固定定位了，都不能使用margin:0 auto;
   3） margin:0 auto;是在居中盒子，不是居中文本。
   文本的居中，要使用
   text-align:center;
   

4. 善于使用父亲的padding，而不是儿子的margin

9. 行高和字号

    line-height: 40px;

    文字在行中居中，行高字号一般是偶数，这样差可以被2整除。

—————————————————————————

    font: 14px/24px “宋体”;

    font: 14px/100% “宋体”;

    font-size:14px;
    line-height:24px;
    font-family:"微软雅黑","宋体","黑体";

10. 超链接

    <!--依次是没有点击、已经点击、鼠标悬停、点击时的效果，而且顺序固定-->

    a:link{
        color:red;
    }
    a:visited{
        color:orange;
    }
    a:hover{
        color:green;
    }
    a:active{
        color:black;
    }

    标准的，就是把link、visited、hover都要写。实际工作中不写link、visited浏览器也挺兼容。a:link、a:visited都是可以省略的，简写在a标签里面。也就是说，a标签涵盖了link、visited的状态。

    .nav ul li a{
        display: block;
        width: 120px;
        height: 50px;
        text-decoration: none;
        background-color: purple;
        color:white;
    }
    .nav ul li a:hover{
        background-color: orange;
    }

11. background

1. background-color，三种方式表示颜色

   background-color:red/rgb(255,0,0)/#ff00000;
   

2. background-image

   background-image:url(images/wuyifan.jpg);
   

3. background-repeat

   background-repeat:no-repeat;   不重复
   background-repeat:repeat-x;    横向重复
   background-repeat:repeat-y;    纵向重复
   

4. background-position ：css精灵通过此属性实现

   background-position:向右移动量 向下移动量;
   
   background-position: right bottom;
   background-position: left bottom;
   

5. background-attachment:背景是否固定。

   background-attachment:fixed;
   

6. background综合属性

   background:red url(1.jpg) no-repeat 100px 100px fixed;
   
   等价于（可任意省略）
   
   background-color:red;
   background-image:url(1.jpg);
   background-repeat:no-repeat;
   background-position:100px 100px;
   background-attachment:fixed;
   

12. 相对定位（不脱标）

    position: relative;
    top: 10px;
    left: 40px;
    top: 100px;
    bottom: 100px;

13. 绝对定位（脱标）

    span{
        position: absolute;
        top: 100px;
        left: 100px;
        width: 100px;
        height: 100px;
        background-color: pink;
    }

一个绝对定位的元素，如果父辈元素中出现了也定位了的元素，那么将以父辈这个元素，为参考点。

绝对定位之后，所有标准流的规则，都不适用了。所以margin:0 auto;失效。

        width: 600px;
        height: 60px;
        position: absolute;
        left: 50%;
        top: 0;
        margin-left: -300px;   → 宽度的一半

14. 固定定位（脱标，ie6不兼容）

固定定位，就是相对浏览器窗口定位。页面如何滚动，这个盒子显示的位置不变。

15. Z-index

• z-index值表示谁压着谁。数值大的压盖住数值小的。
• 只有定位了的元素，才能有z-index值。也就是说，不管相对定位、绝对定位、固定定位，都可以使用z-index值。而浮动的东西不能用。
• z-index值没有单位，就是一个正整数。默认的z-index值是0。
• 如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面能压住别人。定位了的元素，永远能够压住没有定位的元素。

• 从父现象：父亲怂了，儿子再牛逼也没用。

• 没有单位：
  1z-index: 100;