css3基础、（弹性、响应式）布局注意点

E1>E2选择父元素为E元素的所有E2元素(子类选择器)

E1+E2选择元素为E1之后的所有E2元素(兄弟选择器)

E[attr]只使用属性名，但没有确定任何属性值

E[attr="value"]指定属性名，并指定了该属性的属性值

E[attr~="value"]指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“〜”不能不写

E[attr^="value"]指定了属性名，并且有属性值，属性值是以value开头的

E[attr$="value"]指定了属性名，并且有属性值，而且属性值是以value结束的

E[attr*="value"]指定了属性名，并且有属性值，而且属值中包含了value（字符串查找的方式）

E[attr|=“value”]指定了属性名，并且属性值是value或者以“value-”开头的值（比如说zh-cn） 不能是词列表（如：dd b-leo或者dd b）

E:nth-child(n)  表示找到E的父级中的第n个子节点E

E:nth-child(odd){background:red}/*匹配奇数行*/

E:nth-child(even){background:red}/*匹配偶数行*/

标签 *:nth-child(n);/*找标签下第N个元素*/

E:nth-child(2n){background:red} /*n为0-无穷大

E:nth-last-child(n) 表示找到E父级中的第n个字节点，从后向前计算

E:nth-of-type(n)  表示找到E父级中的第n个字节点，且类型为E. E为这类集合，然后在集合中找第n的元素

E:nth-last-of-type(n)表示找到E父级中的第n个字节点，且类型为E,从后向前计算

E:empty 表示找到E元素中没有子节点。注意：子节点包含文本节点

E:first-child 表示找到E父级中的第一个子节点 =>nth-child(1)

E:last-child 表示找到E父级中的最后一个子节点 =>nth-last-child(1)

E:first-of-type 表示找到E父级中的第一个子节点且节点类型是E的 =>nth-of-type(1)

E:last-of-type 表示找到E父级中的最后一个子节点且节点类型是E的 =>nth-last-of-type(1)

E:only-child表示找到E元素中只有一个子节点。注意：子节点不包含文本节点

E:only-of-type 表示找到E的父级中只有一个子节点，且这个唯一的子节点的类型必须是E。注意：子节点不包含文本节点

E:target 表示当前的URL片段的元素类型，这个元素必须是E  （如：div:target{ display:block;}）

E:target 表示当前的URL的Hash，这个元素必须是E  （如：div:target{ display:block;}）

E:disabled 表示不可点击的表单控件

E:enabled 表示可点击、编辑的表单控件

E:checked 表示已选中的checkbox或radio

E:first-line 表示E元素中的第一行

E:first-letter 表示E元素中的第一个字符

E::selection表示E元素在用户选中文字时触发

E::before 生成内容在E元素前

E::after 生成内容在E元素后

E:not(s) 表示E元素不被匹配s元素; 通常是.类名如:(p:not(.cc))

E~F表示E元素毗邻的F元素

Content 属性,其常结合after、before使用。

direction:rtl;unicode-bidi:bidi-override;  文字排版（rtl右至左）

-webkit-text-stroke:3px red;  文字描边

white-space:nowrap; 文字超出不换行

1、弹性盒模型：

注意在使用弹性盒模型的时候 父元素必须要加display:box 或 display:inline-box

    Box-orient 定义盒模型的布局方向

        Horizontal 水平显示

        vertical 垂直方向

    box-direction 元素排列顺序

        Normal 正序

        Reverse 反序

    box-ordinal-group 设置元素的具体位置（如1、2...）

    Box-flex 定义盒子的弹性空间大小

        子元素的尺寸=盒子的尺寸*子元素的box-flex属性值 / 所有子元素的box-flex属性值的和

    box-pack 对盒子富余的空间进行管理

        Start 所有子元素在盒子左侧显示，富余空间在右侧

        End 所有子元素在盒子右侧显示，富余空间在左侧

        Center 所有子元素居中

        Justify 富余空间在子元素之间平均分布

    box-align 在垂直方向上对元素的位置进行管理

        Star 所有子元素在据顶

        End 所有子元素在据底

        Center 所有子元素居中

2、盒模型阴影：

    box-shadow:[inset] x y blur [spread] color

    参数

        inset：内投影

        不给：外投影

        x、y：阴影偏移

        blur：模糊半径

        spread：扩展阴影半径(先扩展原有形状，再开始阴影)

        color

3、其他盒模型新增属性：

    box-reflect 倒影

        方向 above(顶)|below(底)|left|right;

        距离（可选）

        渐变（可选）-webkit-linear-gradient(right,rgba(0,0,0,1) 0,rgba(0,0,0,0) 50%)

    resize 自由缩放

        Both 水平垂直都可以缩放

        Horizontal 只有水平方向可以缩放

        Vertical 只有垂直方向可以缩放

    注意：一定要配合overflow:auto 一块使用才可以缩放

    box-sizing 盒模型解析模式

        Content-box  标准盒模型

            盒模型的宽高=border+padding+content(width|height)

        Border-box 怪异盒模型 width/height=content

            盒模型的宽高=width/height

            Content的宽高=width/height-border-padding

4、Css3分栏布局：

    column-width 栏目宽度

    column-count 栏目列数

    column-gap   栏目距离

    column-rule  栏目间隔线

    宽度、内容都是平均分配

响应式布局:

1、媒体类型

    all 所有媒体

    braille 盲文触觉设备

    embossed 盲文打印机

    print 手持设备

    projection 打印预览

    screen 彩屏设备（常用）

    speech '听觉'类似的媒体类型

    tty 不适用像素的设备

    tv  电视

2、关键字

    And     条件同时成立

    not     not关键字是用来排除某种制定的媒体类型

    only    only用来指定某种特定的媒体类型

3、媒体特性

(max-width:600px)

(max-device-width: 480px)  设备输出宽度

(orientation:portrait)  竖屏

(orientation:landscape)    横屏

 (-webkit-min-device-pixel-ratio: 2) 像素比

devicePixelRatio 设备像素比 window.devicePixelRatio = 物理像素 / dips

4、样式引入方式（三种）

（1）、<link rel="stylesheet" type="text/css" href="styleA.css"  media="screen and (min-width: 800px)">

（2）、@import url("css/reset.css") screen;

（3）、@media screen [and 条件]{

       选择器{

        属性：属性值；

         }

       }

5、样式引入举例

<link rel=”stylesheet” media=”all and (orientation:portrait)” href=”portrait.css”>

<link rel=”stylesheet” media=”all and (orientation:landscape)”href=”landscape.css”>

@media screen and (min-width:400px) and (max-width:500px) {.box {margin: 0 auto;}}

-----------------------------------------------------------------------------------

<link rel="stylesheet" type="text/css" href="styleA.css"  media="screen and (min-width: 800px)">

<link rel="stylesheet" type="text/css" href="styleB.css" media="screen and (min-width: 600px) and (max-width: 800px)">

<link rel="stylesheet" type="text/css" href="styleC.css"    media="screen and (max-width: 600px)">

-----------------------------------------------------------------------------------

6、移动端meta

<meta name="viewport" content="" />

width [pixel_value | device-height]

height [pixel_value | device-height]

user-scalable 是否允许缩放 （no||yes）

initial-scale 初始比例

minimum-scale 允许缩放的最小比例

maximum-scale 允许缩放的最大比例

target-densitydpi [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi] 

indexa.css代码如下：

@charset "utf-8";

/* CSS Document */

.wrap{border:1px solid #000; font:14px/28px "宋体";color:#000; text-indent:2em; -webkit-column-count:4; -webkit-column-gap:30px; -webkit-column-rule:1px solid #000;}

indexb.css代码如下：

@charset "utf-8";

/* CSS Document */

.wrap{border:1px solid #000; font:16px/28px "宋体";color:#000; text-indent:2em; -webkit-column-count:2; -webkit-column-gap:20px; -webkit-column-rule:1px solid #000;}

indexc.css代码如下：

@charset "utf-8";

/* CSS Document */

.wrap{border:1px solid #000; font:16px/28px "宋体";color:#000; text-indent:2em;}

具体实例1：

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<!--重要部分-->

<link rel="stylesheet" type="text/css" href="indexa.css" media="screen and (min-width:800px)">

<link rel="stylesheet" type="text/css" href="indexb.css" media="screen and (min-width:400px) and (max-width: 800px)">

<link rel="stylesheet" type="text/css" href="indexc.css" media="screen and (max-width: 400px)">

</head>

<body>

<div class="wrap">

    <p>按照淘宝首页的无缝图片切换做：第一张和最后一张复制，打开浏览器时ul的left是-520，然后走完最后一张，ul的left是-1040。这样实现无缝切换，我就是卡在这里了，它这么样实现到最后一个还是顺着到-1040，保证不是倒 ...</p>

    <p>按照淘宝首页的无缝图片切换做：第一张和最后一张复制，打开浏览器时ul的left是-520，然后走完最后一张，ul的left是-1040。这样实现无缝切换，我就是卡在这里了，它这么样实现到最后一个还是顺着到-1040，保证不是倒 ...</p>

    <p>按照淘宝首页的无缝图片切换做：第一张和最后一张复制，打开浏览器时ul的left是-520，然后走完最后一张，ul的left是-1040。这样实现无缝切换，我就是卡在这里了，它这么样实现到最后一个还是顺着到-1040，保证不是倒 ...</p>

    <p>按照淘宝首页的无缝图片切换做：第一张和最后一张复制，打开浏览器时ul的left是-520，然后走完最后一张，ul的left是-1040。这样实现无缝切换，我就是卡在这里了，它这么样实现到最后一个还是顺着到-1040，保证不是倒 ...</p>

    <p>按照淘宝首页的无缝图片切换做：第一张和最后一张复制，打开浏览器时ul的left是-520，然后走完最后一张，ul的left是-1040。这样实现无缝切换，我就是卡在这里了，它这么样实现到最后一个还是顺着到-1040，保证不是倒 ...</p>

    <p>按照淘宝首页的无缝图片切换做：第一张和最后一张复制，打开浏览器时ul的left是-520，然后走完最后一张，ul的left是-1040。这样实现无缝切换，我就是卡在这里了，它这么样实现到最后一个还是顺着到-1040，保证不是倒 ...</p>

    <p>按照淘宝首页的无缝图片切换做：第一张和最后一张复制，打开浏览器时ul的left是-520，然后走完最后一张，ul的left是-1040。这样实现无缝切换，我就是卡在这里了，它这么样实现到最后一个还是顺着到-1040，保证不是倒 ...</p>

</div>

</body>

</html>

具体实例2：

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<link rel="stylesheet" media="all and (orientation:portrait)" href="indexb.css">

<link rel="stylesheet" media="all and (orientation:landscape)" href="indexa.css">

</head>

<body>

<div class="wrap">

    <p>按照淘宝首页的无缝图片切换做：第一张和最后一张复制，打开浏览器时ul的left是-520，然后走完最后一张，ul的left是-1040。这样实现无缝切换，我就是卡在这里了，它这么样实现到最后一个还是顺着到-1040，保证不是倒 ...</p>

    <p>按照淘宝首页的无缝图片切换做：第一张和最后一张复制，打开浏览器时ul的left是-520，然后走完最后一张，ul的left是-1040。这样实现无缝切换，我就是卡在这里了，它这么样实现到最后一个还是顺着到-1040，保证不是倒 ...</p>

    <p>按照淘宝首页的无缝图片切换做：第一张和最后一张复制，打开浏览器时ul的left是-520，然后走完最后一张，ul的left是-1040。这样实现无缝切换，我就是卡在这里了，它这么样实现到最后一个还是顺着到-1040，保证不是倒 ...</p>

    <p>按照淘宝首页的无缝图片切换做：第一张和最后一张复制，打开浏览器时ul的left是-520，然后走完最后一张，ul的left是-1040。这样实现无缝切换，我就是卡在这里了，它这么样实现到最后一个还是顺着到-1040，保证不是倒 ...</p>

    <p>按照淘宝首页的无缝图片切换做：第一张和最后一张复制，打开浏览器时ul的left是-520，然后走完最后一张，ul的left是-1040。这样实现无缝切换，我就是卡在这里了，它这么样实现到最后一个还是顺着到-1040，保证不是倒 ...</p>

    <p>按照淘宝首页的无缝图片切换做：第一张和最后一张复制，打开浏览器时ul的left是-520，然后走完最后一张，ul的left是-1040。这样实现无缝切换，我就是卡在这里了，它这么样实现到最后一个还是顺着到-1040，保证不是倒 ...</p>

    <p>按照淘宝首页的无缝图片切换做：第一张和最后一张复制，打开浏览器时ul的left是-520，然后走完最后一张，ul的left是-1040。这样实现无缝切换，我就是卡在这里了，它这么样实现到最后一个还是顺着到-1040，保证不是倒 ...</p>

</div>

</body>

</html>

具体实例3：

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style>

@media screen and (min-width:800px) {

    .wrap{border:1px solid #000; font:14px/28px "宋体";color:#000; text-indent:2em; -webkit-column-count:4; -webkit-column-gap:30px; -webkit-column-rule:1px solid #000;}

}

@import url("indexc.css") screen and (min-width:400px) and (max-width:800px);

@media screen and (max-width:400px) {

    .wrap{border:1px solid #000; font:16px/28px "宋体";color:#000; text-indent:2em; -webkit-column-count:2; -webkit-column-gap:20px; -webkit-column-rule:1px solid #000;}

}

</style>

</head>

<body>

<div class="wrap">

    <p>按照淘宝首页的无缝图片切换做：第一张和最后一张复制，打开浏览器时ul的left是-520，然后走完最后一张，ul的left是-1040。这样实现无缝切换，我就是卡在这里了，它这么样实现到最后一个还是顺着到-1040，保证不是倒 ...</p>

    <p>按照淘宝首页的无缝图片切换做：第一张和最后一张复制，打开浏览器时ul的left是-520，然后走完最后一张，ul的left是-1040。这样实现无缝切换，我就是卡在这里了，它这么样实现到最后一个还是顺着到-1040，保证不是倒 ...</p>

    <p>按照淘宝首页的无缝图片切换做：第一张和最后一张复制，打开浏览器时ul的left是-520，然后走完最后一张，ul的left是-1040。这样实现无缝切换，我就是卡在这里了，它这么样实现到最后一个还是顺着到-1040，保证不是倒 ...</p>

    <p>按照淘宝首页的无缝图片切换做：第一张和最后一张复制，打开浏览器时ul的left是-520，然后走完最后一张，ul的left是-1040。这样实现无缝切换，我就是卡在这里了，它这么样实现到最后一个还是顺着到-1040，保证不是倒 ...</p>

    <p>按照淘宝首页的无缝图片切换做：第一张和最后一张复制，打开浏览器时ul的left是-520，然后走完最后一张，ul的left是-1040。这样实现无缝切换，我就是卡在这里了，它这么样实现到最后一个还是顺着到-1040，保证不是倒 ...</p>

    <p>按照淘宝首页的无缝图片切换做：第一张和最后一张复制，打开浏览器时ul的left是-520，然后走完最后一张，ul的left是-1040。这样实现无缝切换，我就是卡在这里了，它这么样实现到最后一个还是顺着到-1040，保证不是倒 ...</p>

    <p>按照淘宝首页的无缝图片切换做：第一张和最后一张复制，打开浏览器时ul的left是-520，然后走完最后一张，ul的left是-1040。这样实现无缝切换，我就是卡在这里了，它这么样实现到最后一个还是顺着到-1040，保证不是倒 ...</p>

</div>

</body>

</html>

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style>

@font-face {

    font-family: 'ff';

    src: url('1-webfont.eot');

    src: url('1-webfont.eot?#iefix') format('embedded-opentype'),

         url('1-webfont.woff') format('woff'),

         url('1-webfont.ttf') format('truetype'),

         url('1-webfont.svg#untitledregular') format('svg');

    font-weight: normal;

    font-style: normal;

}

#wrap{width:600px;margin:0 auto; position:relative;}

#wrap label{float:left;margin:0 5px;}

#wrap label span:nth-of-type(1){float:left;height:30px;background:#f60; font:14px/30px "宋体"; color:#fff;padding:0 10px; transition:.3s;}

#wrap label span:nth-of-type(1):hover{ background:green;}

#wrap label i{ font:30px "ff"; padding:0 5px; vertical-align:middle;}

#wrap label span:nth-of-type(2){ position:absolute;left:0;top:30px;border:1px solid #000;height:300px; opacity:0;z-index:1;padding:10px; font:12px/24px "宋体";color:rgba(0,0,0,1);transition:2s;text-shadow:0 0 30px rgba(0,0,0,1); color:rgba(0,0,0,0);}

#wrap input{ position:absolute;top:-50px;}

#wrap input:checked~span:nth-of-type(1){background:green;}

#wrap input:checked~span:nth-of-type(2){ z-index:2;opacity:1; text-shadow:0 0 0 rgba(0,0,0,0); color:rgba(0,0,0,1);}

</style>

</head>

<body>

<div id="wrap">

    <label>

       <input id="btn1" type="radio" name="btns" checked />

       <span><i>0</i>dddd简介</span>

       <span>ddddddddddd3423432432432542532ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd<br />

目前主要针对的更多惊喜。</span>

    </label>

    <label>

           <input id="btn1" type="radio" name="btns" />

        <span><i>1</i>dddffd</span>

        <span>sfsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsdfsfsf</span>

    </label>

    <label>

           <input id="btn1" type="radio" name="btns" />

        <span><i>2</i>fdgfd</span>

        <span>sfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsf</span>

    </label>

    <label>

           <input id="btn1" type="radio" name="btns" />

        <span><i>3</i>sfdsf</span>

        <span>sfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsf</span>

    </label>

</div>

</body>

</html>

.overimg{

    position: relative;

    display: block;

    /* overflow: hidden; */

    box-shadow: 0 0 10px #000;

    width:1083px; height:335px;

    overflow:hidden;

}

.light{

    cursor:pointer;

    position: absolute;

    left: -1083px;

    top: 0;

    width: 1083px;

    height: 335px;

    background-image: linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.3),rgba(255,255,255,0));

    background-image: -ms-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.3),rgba(255,255,255,0));

    background-image: -moz-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.3),rgba(255,255,255,0));

    background-image: -webkit-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.3),rgba(255,255,255,0));

    transform: skewx(-25deg);

    -o-transform: skewx(-25deg);

    -moz-transform: skewx(-25deg);

    -webkit-transform: skewx(-25deg);

    /**************此位置可变****************/

    -moz-transition:0.5s;

    -o-transition:0.5s;

    -webkit-transition:0.5s;

    transition:0.5s;

}

.overimg:hover .light{

    left:1083px;

}

#lightbox { background: white;border: 20px solid rgba(0,0,0,0.5); width:200px; height:100px; margin:300px auto; position:absolute; top:50%; left:30%; border-radius:20px; box-shadow:0 0 3px 3px rgba(0,0,0,0.5);}

#lightbox { -moz-background-clip: border; /* Firefox 3.6 */

            -webkit-background-clip: border; /* Safari 4? Chrome 6? */

            background-clip: border-box; /* Firefox 4, Safari 5, Opera 10, IE 9 */

            -moz-background-clip: padding; /* Firefox 3.6 */

            -webkit-background-clip: padding; /* Safari 4? Chrome 6? */

            background-clip: padding-box; /* Firefox 4, Safari 5, Opera 10, IE 9 */

            -moz-background-clip: content-box; /* Firefox 3.6 */

            -webkit-background-clip: content-box; /* Safari 4? Chrome 6? */

            background-clip: content-box; /* Firefox 4, Safari 5, Opera 10, IE 9 */

}