今日完成：

1.复习

2.了解弹性布局，浮动，定位，弹性布局以及各种居中

3.浮动那做了一个小demo

笔记：（划重点）

一、弹性布局：设为 Flex布局后，子元素的float、clear和vertical-align属性将失效。但是position属性，依然生效。

(一)、针对父元素，放在父元素容器中

1.flex-direction：col        竖着

                          row       横着

                          reverse  从后往前（元素顺序）

2.flex-wrap：nowrap        不换行，挤压

                    wrap             换行

                    wrap-reverse 换行，从下往上

3.flex-flow 是flex-direction和flex-wrap的缩写形式，默认值为：flex-flow: row wrap; 

4.justify-content: flex-start      默认    起点

        （主轴）     flex-end                  终点

                          center                     居中

                          space-between        两端对齐，项目之间的间隔都相等。(开头和最后的项目，与父容器边缘没有间隔)

                          space-around          两端对齐，项目之间的间隔都相等。所以，项目之间的间隔比项目与边框的间隔大一倍。(开头和最后的项目，与容器边缘有间隔)

5.align-items： flex-start：              起点

    （交叉轴）    flex-end：               终点

                        center：                  居中

                        baseline:                 项目的第一行文字的基线对齐。(文字的行高、字体大小会影响每行的基线)

                        stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

6.align-content：多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。(当项目换为多行时，可使用align-content取代align-items)

 flex-start、flex-end、center、space-between、space-around、stretch（默认值）

(二)、针对子元素：放在子元素css中

1.order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

2. flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

3.flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

<2、3>值为0时既不放大也不缩小

4.flex-basis定义项目占据的主轴空间。(如果主轴为水平，则设置这个属性，相当于设置项目的宽度。 原width将会失效。)优先级高

5.flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

此属性有两个快捷设置：auto=(1 1 auto)/none=(0 0 auto)

6.align-self:定义单个项目自身在交叉轴上的排列方式，可以覆盖掉容器上的align-items属性。

 属性值：与align-items相同，默认值为auto，表示继承父容器的align-items属性值。

二、选择器：

1.标签选择器：H1 {color:red}            1

2.类选择器（class）：.     同一个标签可以使用多个类选择器。用空格隔开。      10

3.ID(值唯一):#             100

4.后代选择器：用空格隔开  不兼容ie6

5.交集选择器：用.隔开   交集选择器，我们一般都是以标签名开头，比如div.haha 比如p.special

  内联1000    ！important权重最高，不建议使用

6.并集选择器（分组选择器）：用逗号隔开

7.伪类选择器：唯一一个带交互效果 :hover 滑动   ie6中只支持给a类标签加链接，想加滑动，只能js

（数字表权重值）

三、a{}和a:link{}的区别：

a{}定义的样式针对所有的超链接(包括锚点)

a:link{}定义的样式针对所有写了href属性的超链接(不包括锚点)

<a>标签，其对应几种不同的状态：

link：超链接点击之前

visited：超链接点击之后

focus：是某个标签获得焦点的时候（比如某个输入框获得焦点）

hover：鼠标放到某个标签上的时候

active：点击某个标签没有松鼠标时

习惯：

（1）不要去试图用一个类名，把某个标签的所有样式写完。这个标签要多携带几个类，共同完成这个标签的样式。

（2）每一个类要尽可能小，有“公共”的概念，能够让更多的标签使用。

（3）尽可能css用class ，js用id，类上样式，id上行为

四、定位：

1.static：

2.relative：空间不释放，推荐

3.absolute：相对于最近的已定位祖先元素（一点一点往上找，不一定是父元素），若没有，则相对于浏览器一开始左上角 ，即最初包含块，空间释放 

4.fixed：相对于浏览器，即视窗   ie6不支持

五、浮动：

1.两列布局左侧宽度固定，右侧宽度自适应       左边的浮动，右边上去，给右边加个左边距，让出左边

2.两边固定，中间自适应        先左右浮动，最后中间浮动        、

如果左浮动，中间浮动，右浮动，结果是左中在上面，右在下面

3.块状元素 一但浮动就是靠内容撑开，宽高是内容的宽高

4.假如后面还有元素，后面元素会跟着上来，可以在后面元素加clear；

5.把竖块横过来的方法：浮动

6.左20%有外边距  浮动  右80%   浮动      右会在左的下面

补充：关于文本流和文档流：

文档流是相对于盒子模型讲的

文本流是相对于文子段落讲的

元素浮动之后，会让它跳出文档流，也就是说当它后面还有元素时，其他元素会无视它所占据了的区域，直接在它身下布局。但是文字却会认同浮动元素所占据的区域，围绕它布局，也就是没有拖出文本流。

但是绝对定位后，不仅元素盒子会拖出文档流，文字也会出文本流。那么后面元素的文本就不会在认同它的区域位置，会直接在它后面布局，不会在环绕。

当然你可以使用 index-z 来让底部的元素到上面来，类似于一个图层的概念

各种居中：

1.行元素（例文字）：水平：text-align：center；

                               垂直：line-height=height；

2.块元素：水平：margin：0 auto；

               垂直：无直接语法，(1).如果元素定位了，只能通过：

                                                   position：absolute；

                                                   left：50%；

                                                   margin-left:负的宽度的一半

                                                   margin-top：负的高度的一半（已知宽高）

                                                   transform：translateX（-50%）（不知宽高）

                                           (2).加入 table 标签：在想居中的块状元素外面加入table，tr，td，把它放在一个td里面，然后对table设置margin:0 auto;

                                           (3).设置 display: inline 方法：与第一种类似，显示类型设为 行内元素，进行不定宽元素的属性设置:与第一种情况不定宽内                                                  联元素居中差不多，把块状元素设置为行内元素，然后设置这个行内元素的父元素text-align：center；

3.图片和文字垂直方向上对齐：在图片上使用vertical-align：middle；

快捷键：

如果在sublime中输入<st或者<style然后按tab键，可以自动生成的格式如下：（建议）

    <style type="text/css"></style>

字体颜色：（c）

字号大小：（fos）

背景颜色：（bgc）

加粗：（fwb）

不加粗：（fwn）

斜体：（fsi）

不斜体：（fsn）

下划线：（tdu）

没有下划线：（tdn）

p#haha，<p id="haha"></p>。

p.haha，<p class="haha"></p>。

实践：

属性名和冒号之间最好不要有空格（经验）

如果一个属性有多个值的话，那么多个值用 空格 隔开

任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。

inherit 规定应该从父元素继承字体的粗细。

/* */注释

常用语句：

css引入   

引入外部样式表css文件的方式。这种方式又分为两种：

（推荐）1、采用<link>标签。例如：<link rel = "stylesheet" type = "text/css" href = "a.css"></link>

2、采用import，必须写在<style>标签中，并且必须是第一句。例如：@import url(a.css) ;

两种引入样式方式的区别：外部样式表中不能写标签,但是可以写import语句。

 * {

    magin:0;

    padding:0;

    }

    ul,ol{

        list-style:none;

    }

    a{

        text-decoration:none;

     }

    img{

    border:0;

    }

html {    

  font-size: 62.5%;  

}  

body {    

  font-size: 1.4rem; /* =14px */  

}  

h1 {    

  font-size: 2.4rem; /* =24px */  

}  

遇到的问题：

1.浮动一开始不太清楚，但是通过小demo，了解了各种释放，文本环绕之类浮动方式

2.试着上传了一下GitHub，但是没有成功

3.弹性布局属性虽然了解，但是还没用过，明天找demo做一做

明天计划：

1.弹性布局实践

2.上传GitHub

3.九宫格代码编写

收获：看例子挺顺利的，但是自己布局的时候很多问题，还是要通过实践和百度，好好思考，才能清楚一些坑，以及怎么避免还有知识漏洞