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、绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于< html >
2、absolute 定位使元素的位置与文档流无关，因此不占据空间。
3、absolute 定位的元素和其他元素重叠。
4、relative-absolute absolute-absolute
三、CSS选择器：
1、类选择器(class)
.demoDiv{
color:red;
}
2、标签选择器
87979
3、ID选择器(#)
#demoDiv{
color:red;
}
4、 后代选择器
5、子选择器
6、伪类选择器
Link表示链接在没有被点击时的样式。Visited表示链接已经被访问时的样式。Hover表示当鼠标悬停在链接上面时的样式。
伪类不仅可以应用在链接标签中，也可以应用在一些表单元素中，但表单元素的应用IE不支持，所以一般伪类都只会被应用在链接的样式上。
7、通用选择器
8、群组选择器
8、群组选择器
使用群组选择器，将会大大的简化CSS代码，将具有多个相同属性的元素，合并群组进行选择，定义同样的CSS属性，这大大的提高了编码效率，同时也减少了CSS文件的体积。
9、 相邻同胞选择器
我和
相邻
我和
相邻
我和他们都不相邻，所以样式不影响我
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、伪元素选择器
12、结构性伪类选择器
13、UI元素状态伪类选择器
**四、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
undefined
undefined
undefined
undefined
undefined