（这是15年初学css时记的笔记）

选择器

简单选择器

标签选择器

直接把标签名加前面。

类选择器

用.+ className选择。className必须以字母开头，区分大小写。可以出现多次。

id选择器

用#+idName选择。只出现一次。

通配符选择器

用*可以选择页面中的所有元素。

属性选择器-[att]

用[]来选择具有某些属性的标签选中。
如[disabled]、[type=button]。
id选择器就是属性选择器的一个特例#nav{} == [id=nav]{}

属性选择器-[att~=val]

用[att ~= val]来选择属性中包含某些值的标签，只要存在一个值就会被选中，值与值之间用空格来分隔。
类选择器就是这种属性选择器的一个特例.sports{} == [class~=sports]{}

属性选择器-[att|=val]

用[att|=val]来选择属性中具有某些字符串片段的标签，只要字符串片段匹配到就会被选中。一般用在<p lang="">这种标签中。

属性选择器-[att^=val]

用[att^=val]来选择以属性中以某些字符开头的标签。例如要分开选择a标签中http地址与锚点两种不同的属性可以用[herf^="#"]来选中。

属性选择器-[att$=val]

用[att$=val]来选择属性以某些字符结尾的标签。比如a标签连接到了一个doc文档和一个pdf文档，如果要区分的选择可以用[herf$=pdf]来选择。

属性选择器-[att*=val]

用[att*=val]来选择属性中包含某些字符串的标签。
比如要选中a标签中game频道与sport频道的标签，可以用`[href*="game.163.com"]。

伪类选择器

用a:link如果选择a标签中的链接的标签。
用a:visited选择已经点进去之后的链接。
用a:hover选择鼠标移上去的链接。
用a:active选择鼠标点击时的链接。

:enabled选择元素可用的状态。
:disabled选择元素不可用的状态。
checked选择单选框复选框这种用户选中的元素。

用li:first-child选中一组子元素中的第一个。
用li:last-child选中一组子元素中的最后一个。
用li:nth-child(even)选中所有偶数项的子元素。
用li:nth-child(3n+1)选中4,7……位的子元素。
用li:nth-last-child(3n+1)选中倒数第4,7……位子元素。

用:only-child选中只有一个子元素的父元素。
用:first-of-type选中一类子元素中出现的第一个。
用:last-of-type选中一类子元素中的最后一个。
用:nth-of-type(even)选中一类子元素中的偶数项元素。
用:nth-last-of-type(2n)选中倒数的偶数项子元素。

用span:only-of-type选中一组父标签中仅有的那个span。

伪元素选择器

如果要凸显出类中的某个元素就要用伪元素选择器。
推荐使用两个冒号。

::first-letter

::first-letter{color:red;}选择第一个元素。

::first-line

::first-line{}用于选择页面中第一行。

::before/after

::before{content:"…"} after{content:"…"}
这两个伪元素选择器用于在某些元素之前/之后插入一些内容。

::selection

::selection伪元素选择器用于被选中的内容样式。可以更改选中内容的颜色什么的。

组合选择器

后代选择器

如果只想选择某一个div中全部的h2,可以用后代选择器。

<div class="main">
    <h2>标题一</h2>
    <div>
        <h2>标题二</h2>
        <p>段落一</p>
    </div>
</div>

.main h2{color:red};会将class为main的div中所有的h2选中。

子选择器

如果只想选择这个div子类中的h2选中，使用.main>h2{},这样只会选中main这个div下一级子类的h2。

兄弟选择器

<div>
    <h2>标题</h2>
    <p>段落一</p>
    <p>段落二</p>
    
</div>

如果要选中这段代码中两个紧挨着中的某个标签的样式，使用兄弟选择器。注意这个紧挨着的关系不是嵌套……
比如要只选择h2下的第一个p，使用h2+p{color:red;}
如果要选择h2下的所有p，使用h2~p{color: red;}

选择器分组

如果有好多标签要套用统一的样式，可以这么做：

h1,h2,h3{color:gray; font-family:sans-serif;}

继承

在母元素上设置的样式大部分可以自动继承到子元素。但是有几个比较常见的例外：background、border、position

继承的优先级

计算方法
a = 行内样式
b = Id选择器的数量
c = 类、伪类和属性选择器的数量
d = 标签选择器和伪元素选择器的数量
a>b>c>d 依次降低。

如果优先级相同，后出现的会覆盖掉之前出现的。
改变应用样式的先后顺序的几种方法：

1. 改变同等级选择器出现的先后顺序。
2. 提升选择器的优先级。
3. 在某一项属性之后加!important关键字，这样就会无视优先级。

文本

font-size 文字大小

px、百分比、em什么的。

font-family 字体名称

<generic-family>指一类字体，较为常用的只有两种：serif、sans-serif（衬线体和非衬线体）。可用逗号分隔取多个值。

font-weight 字体加粗

值有normal普通、bold加粗。一般字体都支持400（普通），700（加粗）这两档。

font-style 字体倾斜

值有normal、italic倾斜、oblique当字体没设置斜体时强制倾斜，oblique一般不用。

line-height 行距

值有normal、number一般由浏览器决定，1.1~1.2左右、lengthpx,em、百分比。默认行高是30px。如果设置行高为一个数字，行高则由字体大小的px乘以这个数字设置。

font 快速设置的font中的多个样式

设置顺序是：倾斜/加粗（可选） 字体大小（必填） 行高（可选，添加前必须在前面添加一个“/”） 字体（必填，可填多个值）。如果顺序错误或必填项缺少，font设置将不起作用。

text-align 字体对齐方式

left  right //左对齐  右对齐
center  justify //居中  两端对齐

vertical-align 垂直对齐

<table><caption style="text-align: center;">vertical的属性</caption><tr><td>baseline</td><td>位于基线</td></tr><tr><td>sub</td><td>下标</td></tr><tr><td>super</td><td>上标</td></tr><tr><td>top</td><td>对齐到行高最高点</td></tr><tr><td>text-top</td><td>对齐到font-size最高点</td></tr><tr><td>middle</td><td>居中</td></tr><tr><td>bottom</td><td>对齐到行高最低点</td></tr><tr><td>text-bottom</td><td>文本最低点</td></tr><tr><td><percentage></td><td>以行高为参照的百分比</td></tr><tr><td><length></td><td>以baseline为起点，向上的px、em</td></tr></table>

text-indent 文本缩进

<table><tr><td><length></td><td>可填em、px(如果是正数向后缩进)</td></tr><tr><td><percentage></td><td>以一行容器的宽度为单位缩进百分比(正数向后缩)</td></tr></table>

white-space 空行、换行处理

用于设置换行不要保留，空格、tab要不要合并，是否要自动换行。
pre-wrap会保留换行和空格，同时会自动换行，所以比较常用。
<table><tr><th></th><th>换行(New Lines)</th><th>空格tab</th><th>自动换行(Text Wrapping)</th></tr><tr><th>normal</th><td>collapse(折叠收缩)</td><td>collapse</td><td>wrap(自动换行)</td></tr><tr><th>nowrap</th><td>collapse</td><td>collapse</td><td>no wrap(行满不换行)</td></tr><tr><th>pre</th><td>preserve</td><td>preserve</td><td>no wrap</td></tr><tr><th>pre-wrap</th><td>preserve</td><td>preserve</td><td>wrap</td></tr><tr><th>pre-line</th><td>preserve</td><td>collapse</td><td>wrap</td></tr></table>

word-wrap 文本换行

<table><tr><td>normal</td><td>不换行</td> </tr> <tr><td>break-word</td> <td>自动换行，中断单词</td> </tr></table>

word-break 断词

<table><tr><td>normal</td><td>单词中间不允许断掉</td></tr><tr><td>keep-all</td><td>单词都不break</td> </tr><tr><td>break-all</td> <td>任意两个词都可以break掉</td></tr></table>

text-shadow 文字阴影

文字阴影可以不填。
<length>后接2到3个值。分别是x，y，虚化值。
<color>可选，不填就用字体颜色。

text-decoration 文本修饰

修饰可以不填。
underline、overline、lind-through三个不冲突，分别是下划线上划线中划线。

text-overflow 文字溢出

这个属性用来设置一行文字不能完全在一行显示时后面接省略号的效果。如果使用了text-overflow一般来说后面两个属性也必须如下设置：

text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;

cursor 光标设置

可以用图片自定义鼠标形状，可以使用多个图片。
后面可以接如下值[auto | default | none | help | pointer | zoom-in | zoom-out | move]
auto是自动处理，未设置时的默认样式。
default是普通的箭头光标。
none让光标消失。
help带个问号。
pointer是点连接的那个手指形状。
zoom-in/out是缩小，放大镜形状。
move分向两边的箭头，上下的箭头。

当自定义图片失效是缺省使用pointer。
e.g.cursor:pointer; cursor:url(xx.cur), pointer;

inherit 强制继承

不管父元素是什么，让子元素继承父元素的属性值。

position

有多种定义方式可以设定标签的位置如何突破流的限制在全屏位置设置。有四种属性：

absolute 绝对定位

元素原来的位置就不会保留，需要另外去指定原来的位置。

relative 相对定位

这会使元素偏移某一个距离，仍然保持原来的形状，它原来占据的空间仍然会保留，这与absolute相反，但是会偏移一个距离。

static 静态定位

元素框正常生成，快捷元素形成矩形框，作为文档流的一部分，行内元素会形成一个或多个行框放在父元素当中。

fixed 固定的位置

表现为position设置为absolute，元素框原来的位置时不保留的，但是它的包含框是浏览器窗口本身，由窗口大小决定位置。

盒模型

盒模型示例
从内到外依次是content,padding,border,margin。
content = width * height
padding,border,margin都有top,right,bottom,left四部分，从上开始顺时针方向排列。

width、height

值多用像素和百分比来定义。百分比的参照物大多是它的父元素。
width的默认值是auto。
引申：max-width、min-width。
height的语法与宽度一样。默认的height是内容高度。
引申：max-height、min-height。

padding 填充

padding:[<length>|<percentage>]{1,4}
只填一个值就会上下左右都收缩。
padding填充值不足4个时就有值缩写的效果。

padding: 20px; == padding: 20px 20px 20px 20px;
padding: 20px 10px; == padding: 20px 10px 20px 10px;//对称排列
padding: 20px 10px 30px; == padding: 20px 10px 30px 10px;

对面相等，后面省略；四面相等，只填一个。

margin 外边距

margin:[<length>|<percentage>|auto]{1,4}|inherit
这部分设置值的语法跟padding一样。

margin合并

两个元素的底部和上部都有margin的值的话会存在合并现象，这两个元素之间的空间会取两个margin的最大值。
父元素与第一个/最后一个子元素也存在margin合并的现象，会取margin的最大值。

水平居中

如果margin分配为auto的话浏览器会自动平分两边多余的空间，会达到居中的效果。

border 边框

border:[<border-width>||<border-style>||<border-color>]
border-width:[<length>]{1,4}
设置边框线的宽度。
border-style:[soild(实线)|dashed(虚线)|dotted(点)|...]{1,4}
设置边框线的样式，可以分别设置4个。
border-color:[<color>|transparent]{1,4}
默认颜色是字体颜色，默认width是中等。
可以用border:来分别设置上下左右边框。

border-radius 边框圆角

分别设置四个角的效果：top-left，top-right，bottom-right，bottom-left。
border-radius:[<length>|<percentage>]{1,4}[/[<length>|<percentage>]{1,4}]?
前面四个值表示x方向上的半径，后四个值表示y方向上的半径。后四个值可选，不填的时候表示x和y的值相等。
只设置一个值时8个值都是一致的，四个角水平垂直半径都一样。
如皋要设置满8个值，每4个分一组，两组之间记得加一个"/"每组中的每一对数分别是从左上角开始呈顺时针方向的border-radius的x，y方向的值，如图：

image
不过这方法不怎么常用。
也可以用border-top-left这种方式去专门设置一个角。

overflow 盒子内容溢出设置

overflow: visible | hidden | scroll | auto
visible强行全部显示。
hidden内容被修剪，其他元素不可见。
scroll会无论盒子中有多少内容都显示纵向和横向的滚动条。
auto会根据内容是否超出盒子自行决定是否显示滚动条。
引申：overflow-x,overflow-y。

box-sizing 设置外边框的宽高

boxsizing:content-box| border-box| inherit
由于直接设置width，height更改的是content-box的宽高，所以当要设置边框快高时要用到box-sizing。
当使用content-box时，边框的总宽/高为width/height加两倍的padding再加上border-weight的像素值。
使用border-box时外边框的总宽高就是width和height设置的高度。
总之border-box比较小content-box比较大。

box-shadow 盒的阴影

box-shadow: none | <shadow>[,<shadow>]*
shadow可以有一个或多个，也就是多阴影。
<shadow>:inset? && <length>{2,4} && <color>?

length中第一个值设置的是水平偏移量
第二个值设置的是垂直偏移量
第三个值设置模糊半径
第四个值设置阴影大小

color值默认为字体颜色。

当添加了inset时效果为内阴影。四个值属性不变。
多组阴影可以叠加，用逗号隔开每组值。阴影不占空间。

outline 轮廓

用来在border外描边来区分盒子的边界，如果border已经设置颜色了再用outline来描个边就没什么必要了。
语法看起来与border几乎一样。
outline:[<outline-width>||<outline-style>||<outline-color>]|inherit
outline-width:<length>
outline-style:solid | dashed | dotted
outline-color: <color>|invert(当前背景色的相反色)

outline不占据空间，而且在描边时会在border以外。

背景

background-color 背景颜色

<color>可以用rgb，rgba，十六进制或者transparent设置。
color的默认颜色就是transparent。

background-image 背景图片

<bg-image>[,<bg-image>]*

<bg-image> = <image> | none
引入一个<image>可以用url("")的方法,可以添加多个图片。先写的图片会在最上面的图层，之后设置的图片会依次在下层，同时也可以设置background-color。

background-repeat 图片的平铺设置

<repeat-style>[,<repeat-style>]*
每一个repeat-style与之前设置的每张图片一一对应。
<repeat-style> = repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}
repeat-x/y表示只延x轴平铺，或只延y轴平铺。
repeat表示既延x轴平铺，又延y轴平铺。
space用于图片平铺时为图片之间添加空隙，同时保证图片在保持原来大小的情况下铺遍整个屏幕，在图片之间添加合理的空隙。
round使图片平铺的同时进行伸缩，使图片紧密的铺满画面而不会出现截掉一部分的情况。
no-repeat表示图片不平铺，只出现一次。

background-repeat如果写：no-repeat repeat则这两个设置分别对应x轴，y轴。

background-attachment 背景是否依附滚动条

<attachment>[,<attachment>]*
<attachment> = scroll | fixed |local
scroll是默认值，随着内容动的时候背景图不动。
改为local时，背景和内容一起动。

background-position 背景图位置

<position>[,<position>]*

<position>=[left | center | right | top | bottom | <percentage> | <length>] | 
[left | center | right | <percentage> | <length>] [top | center | bottom | <percentage> | <length>] |
[center | [left | right ][<percentage> | <length>]?] && [center |[top | bottom][<percentage> | <length>]?]

当设置background-position: 10px 20px;时，图片x轴向右偏移10px，y轴向下偏移20px。
设置20% 50%。相对固定点是图片的百分比位置，固定位置是容器的百分比位置。
设置50% 50% 和center center是一个意思。
当设置了一个right时候，另外一个值默认是center。
当设置：right 10px top 20px时分别以右以上为参照物向远离的方向移动相应的距离。

可以通过background-position的负值来让一大张图片中的某一部分显示出来（比如图标）。

linear-gradient 颜色的线性渐变

[[<angle> | to <side-or-corner>],]? <color-stop>[,<color-stop>]+
可以是一个角度，或者是一个线性的方向，到一个边或者到一个角。
<side-or-corner> = [left | right] || [top | bottom]
描述方向。
<color-stop> = <color> [ <percentage> | <length> ]?
color-stop用来写颜色的断点。 后面的值写颜色停下的位置，可以缺省。

有种最简化的写法:background-image:linear-gradient(red, blue);这时候是从上往下渐变red，blue。
如果方向反过来linear-gradient(to top, red, blue)。
要让渐变方向从左上角到右下角linear-gradient(to right bottom, red, blue)。
如果填的是角度，如linear-gradient(0deg, red, blue)，这样的效果是从下向上的渐变。改成45°，linear-gradient(45deg, red, blue)这样的效果就阿是从左下角多右上角。
如果填了3个值，linear-gradient(red, green, blue)就会从上至下平均的渐变三种颜色。改成linear-gradient(red, green 20%, blue)这样，就会使绿色出现在从上到下20%的位置。

radial-gradient 放射状渐变

指沿着圆或者椭圆的半径向外扩散的颜色渐变，语法：

[[circle || <length> ][at <position>]?,|
//circle可以设置为圆形，length是半径，at <position>就是圆心所在的位置。

[ellipse || [<length> | <percentage> ]{2}][at <position> ]?,|
//或者是椭圆，分别设置x，y方向上的半径值，用百分比表示半径，然后设置它的圆心位置。

[[circle | ellipse] || <extent-keyword> ][at <position> ]?,| at <position>,]?
<color-stop> [,<color-stop>]+
或者是设置（圆形/椭圆形）后加上关键字<extent-keyword>，然后接上圆心位置。
<extent-keyword> = closest-side(离圆心最近的那条边) | farthest-side(离圆心最远的那条边) 
  | closest-corner(离圆心最近的那个角) | farthest-corner(离圆心最远的那个角)

这四个最近最远的值用于设置渐变的半径。当设置了具体圆的px后，渐变半径就为相应的px。
当如background-image:radial-gradient(red, blue);这时中心渐变椭圆的半径对于盒子的比例等于closest-side的距离。

repeat-*-gradient 渐变重复

也就是在刚才的线性渐变或者放射状渐变之前添加一个repeat。适用于设置好了具体的length的时候。

background-origin 背景起源位置

<box>[,<box>]*
当设置background-position:right bottom;时，图片会默认放在padding-box的右下角，如果想更改就要使用background-origin来设置。
这个属性确定了(0,0)和(100%,100%)两个坐标的位置。
可以设置多个，每个都对应于一个图片元素。
<box> = border-box | padding-box | content-box

background-clip 背景的裁剪

如果想要控制背景图在盒子中的显示范围就要用background-clip来设置。
<box>[,<box>]*
<box> = border-box | padding-box | content-box
语法与background-origin一样，在这里设置为哪一个值，背景就会在这个值的范围里显示。默认值为border-box。

background-size 背景大小

用来控制背景的大小。
<bg-size>[,<bg-size> ]*
<bg-size> = [<length> | <percentage> | auto ]{1,2} | cover | contain
percentage是相对于背景的容器。当宽高只设置了一个值时，另一个值默认为auto。
可以在之后添加关键字cover和contain。cover关键字会使背景图像按比例拉大，使之完全覆盖背景区域，使图像的宽或者高与容器一致。contain关键字会使图片在不变形的前提下合理的扩展至容器的最大值。

background 快速设置背景属性

[<bg-layer>,]*<final-bg-layer>
这个则是有关于怎么放在一起写background。
<bg-layer> = <bg-image> || <position> [/<bg-size> ]? || <repeat-style> || <attachment> || <box> || <box>
中间如果要同时设置背景位置和背景尺寸，一定要注意好顺序，而且之间要加一个斜线。
<final-bg-layer> = <bg-layer> || <'background-color'>
这里设置一个层，用于给背景加上颜色，必须用于最后一个背景图片。

举例：

background:
url(red.png) 0 0/20px 20px no-repeat,url(blue.png) 50% 50%/contain no-repeat content-box green;

image

display 显示方式

用于设置元素的显示方式
display： block | inline | inline-block | none

display: block 块级元素

默认宽度为父元素宽度，可设置宽高，是换行显示的。
默认情况下属于display:block的块级元素的有：div，p,hi-h6,ul,form,...

display: inline 行级元素

默认宽度为内容宽度，不可设置宽高，在同行显示。
默认属于display：inline的行级元素有：span, a, label, cite, em,...

display: inline-block

默认宽度为内容宽度，可设置宽高，边上的行级元素同行显示，后续元素如果宽度超过这一行的边界会整块换行显示。
默认属于inline-block的元素有：input，textarea,select,button,...

display: none

设置元素不显示。这部分的元素就会像被注释掉一样，不显示。
visibility: hidden也可以隐藏一部分元素，但是这部分只是不显示而已，空间还是会占据的。
用display: none的话这部分真的在页面就完全不可见了，位置也会被其他内容占据。

块级元素水平居中

想要达成块级元素水平居中，最重要的属性是margin:auto，这样浏览器会自动平分左右两侧的内容宽度.

导航居中

对ul设置text-align: center; line-height:只对行距元素有效果。
对li,a设置display:inline-block; width: height

position 定位

position用于设置定位方式，用于设置参照物。有4个属性来设置位置：top，right，bottom，left，z-index。
position: static|relative| absolute | fixed
默认情况下是static（静态）。

relative 相对位置

假设有3个纵向排列的元素，如果position：relative（相对定位），那么这个元素仍在文档流中，如果用top/left这种属性设置了移动，参照物为元素本身。

absolute 绝对位置

absolute表示绝对定位，默认宽度为内容宽度，这部分内容脱离文档流（不按照文档流的顺序排列），它的起始位置是之前在文档流的位置。参照物为为第一个定位的祖先/根元素（html标签元素）。
如果父元素的position是相对定位(relative)，那么它的参照物就会变成父元素。

轮播头图

<style>
    .is{position: relative; width: 480px;}
    .is img{display: block;}
    .is .title{position: absolute; bottom: 0px;
        margin: 0; width: 100%;line-height: 35px;
        background-color: #000; opacity: 0.7;}
    .is .title a{margin-left: 20px;color: #fff;
        text-decoration: none;}
    .is .controls{position: absolute; bottom: 13px; right: 10px;line-height:10px;}
    .is .controls span{display: inline-block; width: 10px;margin: auto 1px; height: 10px; border-radius: 10px;background-color: gray;}
    .is .controls span.cur{background-color: #fff;}
</style>

<div class="is">
    <a href="http://www.gamersky.com/ent/201506/609528.shtml">
        <img src="http://ww2.sinaimg.cn/mw690/6adc108fjw1etbl5cljgtg20dc07iu0x.gif" >
    </a>
    <p class="title">
        <a href="http://www.gamersky.com/ent/201506/609528.shtml">这C++作业根本不按套路出牌啊啊啊！</a>
    </p>
    <div class="controls">
        <span></span>
        <span class="cur"></span>
        <span></span>
        <span></span>
        <span></span>
    </div>  
</div>

以上代码在模拟轮播头图的效果。父元素的position是相对的，其他子元素位置以父元素为参照物，position是绝对的。

fixed 固定位置

设置了position:fixed；后，元素的默认宽度为内容宽度，虽然元素位于原来的位置，但是这部分内容会脱离文档流。固定定位的参照物为窗口。

固定顶栏

<style>
    body{padding-top: 50px; margin:0; line-height: 1.8;}
    .top{position: fixed; top: 0; width: 100%; height: 50px;background-color: pink; color:#fff;}
    .main{height:3000px; background-color: #eee;}
</style>

<body>
    <div class="top">top bar</div>
    <div class="main">main content area</div>
</body>

top/right/bottom/left

top/right/bottom/left是元素与上下左右边缘的距离。
如果像设置为top：30px；left：30px；这样位于不相对面的两个属性，这个元素的大小不会改变，会移动到离顶部，左部30px的位置。如果设置了位于向对面的两个属性，这个元素的大小就会被抻长。

z-index

如果有个z-index:0的元素和一个z-index:1的元素,1这个元素就会在0之前显示。z-index用来形容元素在页面上的排序顺序。

z-index栈

对于父元素也可以设置z-index值，这就称为z-index栈。当不同的元素分别属于不同的父元素时，如果一个元素的父元素的z-index栈值更高，这个父元素中的元素会永远位于z-index栈比它低的元素之上。

遮罩

如果要产生遮住全页面的效果：

<style>
.mask{position: fixed; top:0; left:0; z-index: 999; width: 100%;height: 100%; opacity: 0.3;}
</style>
<div class="mask"></div>

三行自适应布局

如果要产生顶栏底烂位置固定，移动滚动条的时候只有中间内容区移动的效果：

<style>
    .head{position: absolute;top: 0;left: 0;width: 100%;height: 100px;background-color: #ccc;}
    .body{position: absolute;top: 100px;left: 0;bottom: 100px;right: 0;overflow: auto;}
    .content{height:200px;}
    .foot{position: absolute;bottom: 0;left: 0;width: 100%;height: 100px;background-color: #ccc;}
</style>
<div class="head">head</div>
<div class="body"><div class="content">contentarea</div></div>
<div class="foot">foot</div>

float 浮动

有四个取值：float: left | right | none (默认) | inherit
浮动元素的默认宽度为内容宽度，内容会脱离文档流，但是不会完全脱离，浮动元素会向指定方向一直移动。

<style>
    div{line-height: 50px;}
    .sample{background-color: pink;}
    .sb0{background-color: blue;}
    .sb1{background-color: green;}

    .sample{float: left;}
</style>
<head>
    <body>
        <div class="sb0">&nbsp;</div>
        <div class="sample">sample</div>
        <div class="sb1">&nbsp;</div>
    </body>
</head>

float的元素都会脱离原有文档流，并位于一新同一文档流，如果页面中有多个float元素，float会放在一起排列：

image

float元素半脱离文档流，对于元素，脱离文档流；但是内容还在文档流中，因此元素的位置会重叠，但内容不会覆盖在一起：

image
效果演示：这种效果有些混乱。

<style>
    body{width: 400px;line-height: 1.6;}
    .sample{width: 100px;line-height: 100px;margin: 3px;text-align: center;background-color: pink;}
    .sb{margin: 10px auto;padding: 5px;border: 1px dashed #FF9A00;}
    .sample{float:left;}
</style>
<body>
    <div class="sb clearfix">
        <div class="sample">float:left;</div>
        人们常认为iPhone的双核能战安卓阵营的4核乃至8核是因为iOS系统优化好，其实就是放屁，论系统优化，原生Android绝逼天下无敌，事实总是和人们所想的相反，iPhone的CPU在整体而言，是优于android阵营的，功耗发热什么的，更不用说了，例如目前史上最坑的处理器。。。高通骁龙810，坑了一帮队友，尤其把HTC坑的不要不要的。。。。在CPU上，也只有三星自家的处理器还能看的过去了，至于GPU，唉，感觉何止领先几年啊，完全是领先一个时代啊
    </div>
    <div class="sb">
        应用生态，其实这是老生常谈的问题了，android系统的开源特质，注定android不能像iOS一样有着统一的应用体验，google也绝不可能像apple一样有着系统的绝对掌控权，android一开始就输在了起跑线上，虽然google近年来不断加强自己的控制权限，奋起直追，但很明显。。。。友商和APP厂商们并不买账（国内流氓软件尤为明显，bta万恶之首）
        以上两点，是android在全球范围内遇到的问题，至于其他问题，其实都是安卓2.0时代的事情了，随着google的不断完善，android早就焕然一新了，而下面，则是我们天朝特色了
    </div>
</body>

clear 清除浮动效果

clear: both | left | right | none | inherit
应用与后续元素、块级元素，用以清除浮动效果。
clear属性规定元素的那一侧不允许其他浮动元素。
both：两侧都不允许。left/right左/右侧不允许出现浮动元素。none允许两侧有浮动元素。
当没有使用浮动清除效果时：

<style>
    body{width: 400px;line-height: 1.6;}
    .sample{float: left;width: 100px;line-height: 100px;text-align: center;background-color: pink;}
    .parent, .sb{padding: 5px 0;margin-bottom: 10px;outline: 1px dashed blue;}
    .sample{
        margin: auto 5px;
        float: left;
    }
    
</style>
<body>
    <div class="parent">
        <div class="sample">float: left</div>
        <div class="sample">float: left</div>
        <div class="sample">float: left</div>
        <br class="cb">
    </div>
</body>

效果：

image
为了达到良好的效果，在css中添加一句.cb{clear: both;height: 0;overflow: hidden ;visibility: hidden;}这样就在上面三个浮动元素后添加了一个隐藏的，在两侧不显示浮动的换行元素。可以达到看起来需要的效果。

也可以在需要让浮动元素不超出的块级元素中添加如下属性：

.父块级元素::after{content:".";display: block;clear: both;overflow: visible;visibility: hidden;height: 0;}

在ie低版本中可以用.父块级元素{zoom: 1;}来实现。

两列布局

如果要实现两列显示的效果，如下，别忘了清除浮动。

<style>
    html, body, .body, .main, .side{margin:0;padding: 0;height: 100%;}
    .body{width: 960px; margin: 0 auto;}
    .main{background-color: pink;}
    .side{background-color: #eee;}

    .main{float: left;width: 660px;}
    .side{float: right;width: 300px;}

    .clearfix::after{content:'.';display: block;clear: both;height: 0;overflow: hidden;visibility: hidden;}
</style>
<body>
    <div class="body clearfix">
        <div class="main">main</div>
        <div class="side">side</div>
    </div>
</body>

Flex 弹性布局

如果要设置flex弹性布局，则需要设置:display:flex

flex item

只有弹性容器在文档流中的子元素才是flex item。
常见例子：

<div style="display:flex">
    <div>block</div>
    <div style="float: left;">float</div>
    <span>inline</span>
    <div style="position:absloute;"></div>
    <div>
        <div>grandson</div>
    </div>
</div>

其中，float:left是弹性元素；position：absloute不是弹性元素；如果是孙元素而非子元素或等级太低的元素也不是弹性元素。

flex 方向

有四个属性可用于设置方向。

• flex-direction
• flex-wrap
• flex-flow
• order

flex-direction 方向

用于设置弹性元素排列的方向。
flex-direction: row | row-reverse | column | column-reverse
默认排列方向是row(行)，如果设置row-reverse就会从右向左反向排列。设置column从上向下排，用column-reverse则会使之从下向上排列。

flex-wrap 换行

flex-wrap: nowrap | wrap | wrap-reverse
默认是不换行的(nowrap)，设置为wrap后到了一行的长度就会换行，设置为wrap-reverse就会反向换行（从下到上，从左到右）。

flex-flow 快速设置方向换行

flex-flow: <'flex-direction'> || <'flex-wrap'>
只是上面那两个属性一次性设置两个。

order 顺序

order用于设置flex元素的顺序，设置值是一个整数，默认值为0。

flex 弹性

有三个属性用于设置弹性。

• flex-grow
• flex-shrink
• flex-basis

flex-basis 初始基础值

flex-basis: main-size | <width>
默认值是main-size也就是主轴的size，可以用width来设置，用于设置flex item的初始宽/高。

flex-grow 扩张

flex-grow的设置值是一个数字，初始值是0。
当一行的flex元素没有设置flex-grow的时候，元素的宽度先默认排序，一行剩下的元素的空间会按照flex-grow的权重来分配。因此一块元素最后占的宽度大小公式为flex-basis + flow-grow/sum(flow-grow) * remain

flex-shrink 收缩

默认值是1，设置值是一个数，用于分配一行之后超出去的空间。公式和flex-grow很类似：flex-basis + flow-shrink/sum(flow-shrink) * remain。当flex-shrink设置为0的时候，超出的部分不会去自动分配。

flex 与flex有关的快速设置

flex:<'flex-grow'> || <'flex-shrink'> || <'flex-basis'>
这三条设置的顺序是：伸展，收缩，基础值。默认值为：0 1 main-size。

justify-content 主轴上对齐方式

用于设置在main-axis上的对齐方式，之前每个弹性元素的大小不变。
justify-content: flex-start | flex-end | center | space-between | space-around

justify-content的设置属性：
<table><tr><th>默认值flex-start</th><td>元素从主轴开始对齐</td></tr><tr><th>flex-end</th><td>元素在主轴的尾部对齐</td></tr><tr><th>center</th><td>在主轴居中对齐</td></tr><tr><th>space-between</th><td>在主轴上留出空隙对齐（首尾无空隙）</td></tr><tr><th>space-around</th><td>在主轴上留出空隙对齐（首尾留空隙）</td></tr></table>

align-items 垂直方向对齐对齐

设置一行高度不同的元素在垂直方向的对齐方式
align-items: flex-start | flex-end | center | baseline | stretch
当不同元素的高度不同时，使用align-items来设置纵向对齐方式。使用flex-start来向上对齐，使用flex-end来向下对齐，center会居中对齐，stretch使元素拉伸为上下容器宽度，baseline是以基线对齐。

align-self 单个元素

设置单个flex item在cross-axis（辅轴）方向上对齐方式。
align-self的默认值是auto，使用的是在容器里默认的对齐方式，当要给某个单个元素更改在轴上的对齐方式时使用align-self属性align-items: flex-start | flex-end | center | baseline | stretch

align-content 辅轴上行对齐方式

设置cross-axis方向上行对齐方式，设置值有align-content: flex-start | flex-end | center | space-between | space-around | stretch
当容器中出现了多行的效果，且还留有空余空间的时候，使用align-content来设置不同的行的分布样式。

image

三行两列自适应布局

下面这种布局比较好用，顶边栏和底栏

<body>
<style>
    body{display: flex; flex-flow: column;}
    body{height: 100%; margin: 0;border:0;padding: 0;}
    html{height: 100%; margin: 0;border:0;padding: 0;}
    .head, .foot{height: 100px;}

    .body{flex:1 ; 
        display:flex;
        width: 1000px; 
        align-self:center;}
    .side{width: 200px;
        background-color:#0055FF;}
    .main{flex:1;
        background-color: pink;
        margin-left: 10px;}
    .head{line-height: 100px;background-color: #CE4848;}
    .foot{line-height: 80px;background-color: #45C643}
    
</style>

<div class="head">head</div>
<div class="body">
    <div class="side">side</div>
    <div class="main">main</div>
</div>
<div class="foot">foot</div>

</body>

侧栏固定，主栏自适应布局

<style>
body{
    display:flex;
    flex-flow:column;
        }
html, body{height:100%;flex-flow:column;}
.parent{
    flex:1;
    display: flex;
    align-sels:center;
}
.side{
    background-color:red;
    width:200px;
    margin-right:10px;
    text-align:center;
    vertical-align:middle;
    color: #FFF;
    font-family: Microsoft YaHei, Arial, Helvetica, sans-serif;
    font-size: 18px;
    }
.main{
    background-color:blue;
    flex:1;
    height:auto;
    text-align: center;
    vertical-align:middle;
    color: #FFF;
    font-family: Microsoft YaHei, Arial, Helvetica, sans-serif;
    font-size: 18px;
}
 
</style>
</head>
<body>
    <div class="parent"> 
        <div class="side">侧栏</div>
        <div class="main">主栏</div>
    </div>
</body>

三个标签的Tab

<style type="text/css">
   .tab {
       border: 1px solid #999;
       font: 14px "Microsoft YaHei";
       width: 573px;
   }        
   .title {
       display: flex;
       background-color: #f1f1f1;
       text-align: center;
       line-height: 2
   }
   .t1, .t2 {
       border-right: 1px solid #cecece; 
   }
   .t1, .t2, .t3 {
       flex: 1;
       border-bottom: 1px solid #cecece;
   }
   .content {
       padding: 20px;
       background-color: white;
   }
   .t1 {
       background-color: white;
       border-bottom-color: white;
   }
        </style>
 </head>
 <body>
     <div class="tab">
         <div class="title">
             <div class="t1">课程</div>
             <div class="t2">学习计划</div>
             <div class="t3">技能图谱</div>
         </div>
         <div class="content">课程内容</div>
     </div>

变形

transform

如果要让某个元素旋转180°，使用transform:rotate(180deg)。
语法：transform: none | <transform-function>+
后面可以写下列的多个方法，用空格连接。
none表示不做变形和动画。

rotate() 旋转

rotate(<angle>)用于让元素旋转。比如填transform:rotate(45deg);就会使元素顺时针旋转45度。填负值就会让元素逆时针旋转。
旋转后原来的坐标轴方向也会旋转，会影响后续位移。

translate() 位移

语法translate(<translation-value> [,<translation-value>?])
分别对应于X,Y方向上的偏移，如果没有填第二个值，那么只会在X轴上偏移。语法也可以改成translateY(<translation-value>)或者translateX(<translation-value>)这种形式。默认是向右，向下偏移。
<translation-value>可以填百分比，参照物是当前盒子的大小。

scale() 缩放

scale( <number> [,<number>]?)
可以填两个数，意义为缩放为原来的number倍，如果省略了第二个值，那么这个数默认与第一个值一样。两个值分别对应X,Y轴。

skew() 倾斜

skew( <angle> [,<angle> ]?)
填的分别是X,Y轴的倾斜度数。也可以拆成skewX，skewY两个值。
X方向角度是正数时设置的是x方向的像素向逆时针方向倾斜的角度。
Y方向角度是正数时设置的是y方向的像素向顺时针方向倾斜的角度。
如果设置transform:skew(30deg);那么Y轴就会向X轴逆时针倾斜30度。

origin 设置变换时坐标轴原点

transform-origin:
    [left | center | right | top | bottom | <percentage> | <length> ]  
    |
    [left | center | right | <percentage> | <length>]
    [top | center | bottom | <percentage> | <length>] <length>?
    |
    [center | [left | right]] && [ center | [top | bottom]] <length>?

可以填1/2/3个值（分别对应x,y,z方向的坐标），或者这三个值用关键字来代替。
transform-origin的默认值是50% 50%，也就是图像的中心点。如果只填了一个值，默认第二个值为50%。
如果设置transform-origin: 0 0;图像的原点就到了左上角。

perspective 透视

这个属性与rotate一起用可以做出透视效果。
perspective: none | <length>
perspective后接的值越大，透视效果越不明显。

perspective-origin 透视角度

定义3D元素在透视时对着它看的视角。x越大镜头越向右，y越大镜头越向上。

transform-origin:
    [left | center | right | top | bottom | <percentage> | <length> ]  
    |
    [left | center | right | <percentage> | <length>]
    [top | center | bottom | <percentage> | <length>]
    |
    [center | [left | right]] && [ center | [top | bottom]] 

可以填1/2个值，分别是x，y方向。

translate3d() 3d的移动

translate3d( <translation-value>,<translation-value>,<length>)
设置的三个值分别为x,y,z轴上的移动。
比如transform: translate3d(10px, 20%, 50px);会向右移动10px，向下移动自身的20%，向z轴的正方向（屏幕方向）移动了px。也可以用transform: translateX/Y/Z单独设置x,y,z轴上的位移距离。

scale3d() 3d的缩放

scale3d(<number>, <number>, <number> )
三个值分别对应x,y,z的缩放比率。也可以分别设置transform: scaleX/Y/Z来设置缩放比率。如果只设置了scaleZ，不会改变盒子的大小。

rotate3d() 3d的旋转

rotate3d(<number>, <number>, <number>, <angle>)
前三个值是对应xyz上的坐标，原点到这个点的连线就是旋转的轴，最后的值时旋转的角度。
也可以用rotateX(<angle>)这种方式设置旋转角度。

transform-style 扁平化

transform-style: flat | preserve-3d
默认是扁平的，如果设置了3d效果，经过x轴y轴的旋转(rotateX,rotateY)之后就会看出来透视的效果（之前也得在父元素设置prespective）。

backface-visibility 背面不可见设置

backface-visibility: visible | hidden
默认是可见的，当一个元素翻转了90°以上时，就可以看到背面。
如果设置了hidden，转到背面这个容器就不可见。

动画

transition-property

动画效果设置。
transition-property: none | <single-transition-property> [',' <single-transition-property> ]*
可以不填或者设置多个single-transition-property。
<single-transition-property> = all | <IDENT>
all表示所有的效果都可以做过渡。left表示只对left属性做过渡效果。
left, color表示left和color这两个属性会有动画效果。
下面是我做的第一个动画效果。

<style>
*{
    margin:0;
    padding:0;
}
html,
body{
    width:100%;
    height:100%;
    
}
    .m-demo{
        width:600px; 
        height: 100px;
        outline: 2px none;
        margin: 20px auto;
        transition:2s;
        background-color: #476CED;
        border-radius: 50px;
        box-shadow: 1px 1px 5px #000;
    }
    .m-demo pre{
        transition:1s; 
        width: 100px;
        height: 100px;
        padding: 0;
        line-height: 100px;
        border-radius: 50%;
        font-size: 20px;
        text-align: center; 
        position: absolute; 
        background-color: #FF9A00;
        margin-top: 0;
        box-shadow: 1px 1px 5px #000;
        font-family: "consolas";
    }
    .m-demo:hover pre{margin-left:500px;color: #FF9A00;}
    .m-demo pre{transition-property:margin-left,color;}
</style>
<body>
    <div class="m-demo">
        <pre>none</pre>
    </div>
</body>

transition-duration 动画持续时间

transition-duration: <time> [,<time>]*
设置的秒数就是动画持续的时间。

transition-timing-function 动画的时间函数

transition-timing-function: <single-transition-timing-function> [',' <single-transition-timing-function>]*
用以设置动画的速率函数。

<single-transition-timing-function> = 
    ease | linear | ease-in | ease-out | ease-in-out |
    cubic-bezier(<number>, <number>, <number>, <number>)|
    step-start | step-end |
    steps(<integer>[,[ start | end ]]?)

ease是默认值，两头慢，中间快。
linear是线性效果，全程匀速。
ease-in在开始快，ease-out在结束慢。
ease-in-out的效果也是两头慢中间快，但是幅度比ease要大。
cubic-bezier是贝塞尔曲线，四个值分别设置两个点的坐标，第一点与原点的连线是起始时的切线，第二个点与结束点的连线是曲线结束时的切线。
steps用来设置分步的运动，后面接的start/end用来设置是每一步的开始还是结束时作动画。

transition-delay 延时

transition-delay: <time> [,<time>]*
用来设置动画效果延时执行的秒数。

transition 动画的缩写

transition: <single-transition> [',' <single-transition>]*
<single-transition> = [none | <single-transition-property>] || <time> || <single-transition-timing-function> || <time>
第一个time是transition-duration，第二个添加的time是transition-delay。
例如：transition: none; transition: left 2s ease 1s;

animation-name 自运行动画

animation-name: <single-animation-name> [',' <single-animation-name> ]*
<single-animation-name> = none | <IDENt>
animation-name:之后可以自己定义一个名字，意义为关键帧效果的关键字。
在css中首先为某个属性定义animation-name，这样就会创建多个关键帧效果，随后在css中用@-webkit-keyframes animation-name{10% …… 50% }来为某个关键帧名定义一系列的属性。

animation-duration 动画持续秒数

animation-duration:<time> [,<time>]*与transition-duration类似，用于设置动画持续秒数。

animation-timing-function 这部分以后补全……

transition-timing-function: <single-transition-timing-function> [',' <single-transition-timing-function>]*
与上面出现的那货几乎一模一样…………

<single-transition-timing-function> = 
    ease | linear | ease-in | ease-out | ease-in-out |
    cubic-bezier(<number>, <number>, <number>, <number>)|
    step-start | step-end |
    steps(<integer>[,[ start | end ]]?)