css基础篇（一）

一、css盒模型：
Margin-Border-Padding-Content

二、Position定位：
static:HTML元素的默认值，即没有定位，元素出现在正常的流中。静态定位的元素不会受到 top, bottom, left, right影响。
fixed:元素的位置相对于浏览器窗口是固定位置。Fixed定位使元素的位置与文档流无关，因此不占据空间。
Relative:
1、相对定位元素的定位是相对其正常位置。
2、可以移动的相对定位元素的内容和相互重叠的元素，它原本所占的空间不会改变。
3、相对定位元素经常被用来作为绝对定位元素的容器块。
4、relative-relative relative-absolute
absolute:
1、绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于:
2、absolute 定位使元素的位置与文档流无关，因此不占据空间。
3、absolute 定位的元素和其他元素重叠。
4、relative-absolute absolute-absolute

三、CSS选择器：
1、类选择器(class)

.demoDiv{
  color:red;
}
<div class="demoDiv"></div>

2、标签选择器

<style>
p{
 color:red;
}
</style>
<p>87979</p>

3、ID选择器(#)

#demoDiv{
color:red;
}
<div id="demoDiv"></div>

4、 后代选择器

<style>
    .father.child{
        color:red;
    }
</style>
<p class="father">
    <label class="child">
         我变红了
        <p>我也变红了</p>
    </label>
</p>

5、子选择器

<style>
    #lala a{color:red;}/*所有<a>子元素*/
    #lala >a{color:blue;}/*lala下面第一个<a>子元素*/
</style>
<p id="lala">
    <a href="#">我是蓝色</a>
    <span><a href="#">我变红了</a></span>
    <span><a href="#">我变红了</a></span>
</p>

6、伪类选择器

<style>
    a:link{
        color:red;
    }
    a:visited{
        color:red;
    }
    a:hover{
        color:blue;
    }
    input:focus{
        background:black;
    }
</style>

Link表示链接在没有被点击时的样式。Visited表示链接已经被访问时的样式。Hover表示当鼠标悬停在链接上面时的样式。
伪类不仅可以应用在链接标签中，也可以应用在一些表单元素中，但表单元素的应用IE不支持，所以一般伪类都只会被应用在链接的样式上。
7、通用选择器

<style>
    *{
        font-size:20px;
    }
    p*{
        color:green;
    }
</style>

8、群组选择器

<style>
    *{
        font-size:20px;
    }
    p*{
        color:green;
    }
</style>
8、群组选择器
<style>
    p ,td ,li{
       color:red;
        height:20px;
    }
    #main p,#sider span{
        color:blue;
        font-size:30px;
    }
    #main p span{
       color:yellow;
    }
    .text1 h1,#sider h3,.art_title h2{
        color:black;font-weight:100;
    }
</style>

使用群组选择器，将会大大的简化CSS代码，将具有多个相同属性的元素，合并群组进行选择，定义同样的CSS属性，这大大的提高了编码效率，同时也减少了CSS文件的体积。

9、 相邻同胞选择器

<style>
    h1+p{
        color:red;
    }
    /* +和~的区别：类似上面一个，两者都表示兄弟关系，但是+必须是“大哥+二哥”，~还能是“大哥~三弟”、“二哥~四妹”*/
</style>

<h1>我和<p></p>相邻</h1>
<p>我和<h1></h1>相邻</p>
<p>我和他们都不相邻，所以样式不影响我</p>

10、属性选择器

/*属性选择器，是根据元素的属性来匹配的，其属性可以是标准属性也可以是自定义属性；!ie6，0 0 1 0*/
[attr]
[title]{margn-left:10px}
/*选择具有title属性的所有元素*/
[attr=val]
[tittle='this']{margin-right:10px;}
/*选择属性title的值等于this的所有元素*/
[attr^=val]
[title^='this']{margin-right:200px;}
/*选择属性title的值以this开头的所有元素*/
[attr$=val]
[title$='this']{margin-right:10px;}
/*选择属性title的值以this结尾的所有元素*/
[attr*=val]
[title*='this']{margin:10px;}
/*选择属性title的值包含this的所有元素*/
[attr~=val]
[title~='this']{margin:20px;color:red;}
/*选择属性title的值包含一个以空格分隔的词为this的所有元素,*/
/*即title的值里必须要有this这个单词并且this要与其他单词之间有空格分隔*/
[attr|=val]
[title|='this']{color:red;}
/*选择属性title的值等于This,或值以this-开头的所有元素*/

11、伪元素选择器

<style>
    :first-letter，设置块元素首字母样式，行内元素转换成块元素和行内块元素也支持；
    div p:first-letter {font-size: 20px}
    :first-line，设置第一个文本行样式；
    .box .main:first-line {color: #f00}
    :before，设置之前的样式，可以插入生成的内容，并设置其样式；
　　body:before {content: 'The Start:'; display: block}
　　//在body元素前插入文本内容'The Start:'，并设置其为块元素
　　:after，设置之后的样式，可以插入生成的内容，并设置其样式；
　　body:after {content: 'The End.'; display: block}
　　//在body元素最后插入文本内容'The End.'，并设置其为块元素
 </style>

12、结构性伪类选择器

<style>
 .box .ft:first-of-type{color:yellow;}
 /*:first-of-type，选择相对父元素里同类型子元素中的第一个，!lte8*/
 .box :last-of-type {color: deeppink}
    /*:last-of-type，选择相对父元素里同类型子元素中的最后一个，!lte8*/
 .box :only-of-type {color: blanchedalmond}
    /*:only-of-type，选择相对父元素里同类型子元素中只有一个的元素，!lte8*/
 .box .ft:only-of-type {color: blueviolet}
    /*//只匹配4里的strong*/
 .box :nth-child(3) {color: olivedrab}
    /*:nth-child(n)，选择其父元素的第n个子元素或多个子元素，索引从1开始，当n用于表达式时索引从0开始!lte8
    //匹配第三个子元素即这里的4
    */
 .box :nth-child(odd) {color: orange}
    /*等价于 .box :nth-child(2n + 1) {color: #f00}
    //匹配奇数即这里的2.4.6以及4里的strong和6里的第一个span
    */
 .box :nth-child(even) {color: orangered}
    /*等价于 .box :nth-child(2n + 2) {color: #f00}和.box :nth-child(2n)
    //匹配偶数即这里的3.5以及6里的第二个span
    */
 .box :nth-child(n + 1) {color: #f00}
    /*
    //匹配 n + 1开始的所有子元素即.box里所有的子元素以及子孙元素，因为这里n是从1开始的即：
　　n = 0 ----> n + 1 = 0 + 1 = 1，即这里的2
　　n = 1 ----> n + 1 = 1 + 1 = 2，即这里的3
　　... ...
　　n = 4 ----> n + 1 = 4 + 1 = 5，即这里的6
    */
 .box :nth-last-child(3) {color: #f00}
    /*
    :nth-last-child(n)，跟:nth-child(n)使用类似，只是索引是从最后开始往前数，!lte8
    //匹配倒数第三个子元素即这里的4
    */
 .box :nth-of-type(2) {color: #f00}
    /*
    :nth-of-type(n)，选择父元素的第n个或多个同类型的子元素，!lte8
    //匹配5和6以及6里面的第二个span
    */
 .box :nth-last-of-type(2) {color: #f00}
    /*
    :nth-last-of-type(n)，同上，只是从最后开始往前数，!lte8
    //匹配3和4以及6里面的第一个span
    */
 .box :first-child {color: #f00}
    /*:first-child，选择父元素里的第一个子元素，!ie6
    //匹配2和4里的strong以及6里的第一个span
    */
 .box :last-child {color: #f00}
    /*
    :last-child，选择父元素里的最后一个子元素，!lte8
    //匹配6和6里的最后一个span以及4里的strong
    */
 table td:empty {background-color: #ffc}
    /*
    :root，选择文档的根元素，在HTML中就是指<html>标签，!lte8
　　:empty，选择没有任何内容的元素，那怕是有一个空格也不行，!lte8
    //匹配表格里没有内容的td
    :target，选择当前活动的元素，指锚点点击后跳转到的那一个元素，!lte8
　　:not(selector)，选择排除selector以外的其他所有元素，!lte8
    */
 .box *:not(div) {background-color: #ffc}
    /*
    //选择box里除div以外的所有后代元素，如果div里有其他非div元素，也会选择上，如上的HTML CODE就会选择上div里面的span和strong
    */
</style>

13、UI元素状态伪类选择器

<style>
    :enabled，指定元素处于可用状态时的样式，一般用于input，select和textarea
　　:disabled，指定元素处于不可用状态时的样式，一般用于input，select和textarea
    :read-only，指定元素为只读状态时的样式，FF为-moz-read-only，一般用于input和textarea
　　:read-write，指定元素为只可写状态时的样式，FF为-moz-read-write，一般用于input和textarea
　　:checked，指定元素被选中状态时的样式，FF为-moz-checked一般用于checkbox和radio
　　:default，指定元素默认选中的样式，一般用于checkbox和radio
　　:indeterminate，指定默认一组单选或复选都没被选中的样式，只要有一个被选中则样式被取消，一般用于checkbox和radio
　　::selection，指定元素处理选中状态时的样式，可用于所有元素，上面的几个基本上只用于表单元素；!lte8
　　FF为::-moz-selection，不能用群组选择器来写；
　　::selection {background-color: #ffc; color: #fff}
　　::-moz-selection {background-color: #ffc; color: #fff}
</style>

四、css选择符分类　　
首先来看一下css选择符(css选择器)有哪些?
1.标签选择器(如：body,div,p,ul,li)

　　
2.类选择器(如：class=”head”,class=”head_logo”)

　　
3.ID选择器(如：id=”name”,id=”name_txt”)

　　
4.全局选择器(如：*号)

　　
5.组合选择器(如：.head .head_logo,注意两选择器用空格键分开)

　　
6.后代选择器 (如：#head .nav ul li 从父集到子孙集的选择器)

　　
7.群组选择器 div,span,img {color:Red} 即具有相同样式的标签分组显示

　　
8.继承选择器(如：div p,注意两选择器用空格键分开)

　　
9.伪类选择器(如：就是链接样式,a元素的伪类，4种不同的状态：link、visited、active、hover。)

10.字符串匹配的属性选择符(^ $ *三种，分别对应开始、结尾、包含)

　　
11.子选择器 (如：div>p ,带大于号>)

　　
12.CSS 相邻兄弟选择器器 (如：h1+p,带加号+)

五、css优先级
当两个规则都作用到了同一个html元素上时，如果定义的属性有冲突，那么应该用谁的值的，CSS有一套优先级的定义。
不同级别
在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
作为style属性写在元素内的样式
id选择器
类选择器
标签选择器
通配符选择器
浏览器自定义或继承

总结排序：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

同一级别
同一级别中后写的会覆盖先写的样式
注意点：
　　①、!important的优先级是最高的，但出现冲突时则需比较”四位数“;

　　②、优先级相同时，则采用就近原则，选择最后出现的样式;

　　③、继承得来的属性，其优先级最低;

　　!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

　　*css选择器使用强烈建议采用低权重原则，利于充分发挥css的继承性，复用性，模块化、组件化。
多重样式优先级
内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

常见的链接样式
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
* a:link - 正常，未访问过的链接
* a:visited - 用户已访问过的链接
* a:hover - 当用户鼠标放在链接上时
* a:active - 链接被点击的那一刻

块级元素(block)特性：
* 总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
* 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
内联元素(inline)特性：
* 和相邻的内联元素在同一行;
* 宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小;
块级元素主要有：
* address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li
内联元素主要有：
* a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var
主要用的CSS样式有以下三个：
* display:block – 显示为块级元素
* display:inline – 显示为内联元素
* display:inline-block – 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性,我们常将ul元素加上display:inline-block样式，原本垂直的列表就可以水平显示了。(部分浏览器不兼容)
css伪元素

六、让DIV垂直居中多种方法：
1、

body{text-align:center;vertical-align:middle}

2、实现绝对定位元素的居中

.style{margin:0 auto;} 

3、div绝对定位水平垂直居中【margin 负间距】

.autoDiv{position: absolute;left:50%;top:50%;margin-left:-width/2;margin-top:-height/2;}

4、div绝对定位水平垂直居中【Transforms 变形】

 div{
            width: 200px;
            height: 200px;
            background: green;
            position:absolute;
            left:50%;    /* 定位父级的50% */
            top:50%;
            transform: translate(-50%,-50%); /*自己的50% */
        }            

5、css不定宽高水平垂直居中

.box{

             height:600px;
             display:flex;
             justify-content:center;
             align-items:center;
               /* aa只要三句话就可以实现不定宽高水平垂直居中。 */
        }
        .box>div{
            background: green;
            width: 200px;
            height: 200px;
        }

Flex布局：
容器的属性有哪些(最外层父容器Box)
flex-direction: row | row-reverse | column | column-reverse;
flex-wrap: nowrap | wrap | wrap-reverse
flex-flow:: || ;flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
justify-content: flex-start | flex-end | center | space-between | space-around定义了项目在主轴上的对齐方式
align-items : flex-start | flex-end | center | baseline | stretch;(垂直对齐方式定义项目在交叉轴上如何对齐。)
align-content：flex-start | flex-end | center | space-between | space-around | stretch;定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
项目的属性item
order:;定义项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow: ; /* default 0 */定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
flex-shrink: ; /* default 1 */定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
flex-basis: | auto; /* default auto */flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小
flex：none | [ <’flex-grow’> <’flex-shrink’>? || <’flex-basis’> ]flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选
flex:放大，缩小，分配多余空间
align-self :auto | flex-start | flex-end | center | baseline | stretch;
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性，如果没有父元素，则等同于stretch