1、嵌套之间的盒子垂直外边距如果紧挨在一起会发生塌陷，这种情况一旦发生是必须要解决的，解决方法就是给父级添加一个overflow：hidden；禁止超出

2、属性名称：background；值1：颜色；值2：图片；值3：平铺方式； no-repeat,repeat-x,repeat-y;值4：背景定位，注意是一对。先水平后垂直。水平包括：left center right；垂直包括：top center bottom；除此之外还接受直接设置坐标值。

3、属性名称：border：粗细 类型 颜色；  类型：dashed虚线， solid实线。

4、具有隔离性质的标签适合做分区，做布局。不隔离性质的标签适合做内容。

5、经验值：浮动的元素显示模式都会自动变成行内块。

6、属性名：overflow：hidden，auto； 第一：当设置了实体范围的时候再加溢出隐藏表示修剪掉超出的部分。           第二：当实体范围没有设置，或者高度是auto的时候再加溢出隐藏它可以强制检测子级中浮动的元素。

7、css属性的书写顺序：第一：个模块先实体化书写所有自身控制属性，主要为了就是画盒子。第二：书写所有关于定位的属性，主要是边距或浮动，或定位第三：最后在书写所有内容控制的属性，例如文字控制属性。

8、链接标签：link标签它拥有链接三属性。分别是格式，关系，地址。rel表示链接对象和当前文档的关系；type表示链接对象的格式或类型；href表示链接对象的地址。

9、table>thead+tbody+tfoot    //table>tr>td

10、属性名：border-collapse：collapse塌陷；separate 分离； 作用：边框合并；

11、type=text;表示一个文本框；type=button；表示一个按钮；type=radio；表示一个单选框；type=checkbox；表示一个复选框；       type=submit；表示提交表单的按钮；type=reset； 表示拥有重置功能的按钮；type=image；表示一个图片按钮；（可以将一个图片变成按钮）；       type=file；表示一个可以上传文件的组件；type=hidden；表示一个在前台不可见的表单但是可以传递隐藏数据给后台。type=password; 表示一个密码输入框。12、fieldset>legend    快捷键 ctrl+shfit+空格。会自动生成一个符号  但是尽量少用。

13、 label标签   作用：扩大表单元素的触发范围。常规使用方法：label，for，id；给这个标签添加一个for属性，属性值是某个表单元素的id即可。       简易方法：直接用label把文字信息和表单元素包含起来就可以了。

14、dl>dt>dd   一个dl里面可以有多对dt和dd嵌套。

15、*big：定义大号文本；*small：定义小号文本；*strong：定义加粗强调；*em：定义斜体强调，淘宝特别喜欢用这个标签。*bui：它是三个标签，分别是表示加粗，下划线，斜体。但是都不具备任何的语义强调。*sub：定义下标；*sup：定义上标；

16、*address：定义出处，注意它是有隔离性质的，并且有默认样式斜体。一般来讲这个标签内部搜索引擎会有意识的查找三个数据，作者，地址，联系电话。

17、文本缩进属性：text-indent：2em；em表示一个字。也可以接受正常的像素单位。

------------------------------------------------------HTML5--------------------------------------------------------------1、标签名称：video，是一个双标记。标签属性：autoplay：是否自动播放； controls；表示是否添加播放控件；（一般情况这个都是不开放给用户的）poster：定义视频的封面图片；loop：设置视频是否循环播放；（广告肯定有这个属性）；preload：设置视频是否预加载；（和autoplay冲突）muted：设置视频一开始是否是静音播放；width：宽度；height：高度；src：视频路径（必选属性）《视频格式》 简介：目前浏览器支持的视频格式一共只有3种分别是 ：webm格式，专用的web视频格式；mp4格式；ogg格式；

2、《source标签》作用：设置video标签的多个格式的视频。浏览器会优先播放支持的格式。使用的基本结构：video>source 相当于又是一个 ul>li结构标签属性：src：视频路径；type：表示设置视频的格式 举例： typ=“video/mp4”例如：

3、《音频标签》：audio；标签属性：它几乎拥有所有的video属性，除了3个可见属性。分别是width，height，poster。

4、《测量标签》：meter；是一个双标记，可以用在任何数据测量的地方用图形表示更直观，例如今日访问量，或者投票支持数。       标签属性：  min：最小；max：最大；low：较低；high：较高；optimum：最佳值；value：当前值；       可以设置width与height，但是背景颜色是设置不了的。       如：可以做今日访问量；

5、《进度条标签》progress；进度；标签属性：max，和value；  与meter有点相似，但是注意其中的一些区别 ，        注意：$('video').get(0).play();   表示在jq中变回js的元素，在继续使用。因为jq中没有play（）这个方法。

6、《数据列表标签》：datalist； 作用：它可以在后台当中定义一组隐藏的数据，这些数据默认都是不可见的可以绑定给input标签。      使用方式：1通过datalist标签定义一组数据并制定id名称。2将这个id名称绑定给input标签的list属性即可使用。      例如：QQ请输入您的汽车品牌：

7、《细节和概要标签》：details>summary;   details表示整个信息的详情；  summary表示整个信息的概要；      作用：将整个信息分区自动折叠为概要内容，当单击以后展示全部详情。      例如：奥运(概要)（细节）中国奥委会,北京奥运会... ……奥林匹克新闻 历史与未来 趣事轶闻

8、《标记标签》：mark，是一对双标记。标签属性：无属性标签。标签作用：在文本中定义标记样式。

9、时间标签8：0010、【marquee标签】标签属性：direction：表示滚动方向，up，down，right，left；    scrollamount：设置滚动速度，可以接受一个数值；loop：设置滚动次数；默认是-1；是无限循环的； behavior：设置滚动类型；有两个值需要注意：alternate表示往复循环滚动；slide滚动到边缘并停止。总结：marquee标签实际上是具有隔离性质的标签，所以它接受正常的实体化，另外它的内容可以嵌套更复杂的结构去实现滚动动画，而不仅仅是一行文字。

--------------------------------流派【标准流、浮动流、定位流】------------------------------------------

1、【标准流】定义：标准流就是网页默认的一种排列顺序。只有两种方式块级元素竖直向下排列，行内元素水平排列。

2、【浮动流】浮动流是脱离标准流的第一种排列方式。浮动流中只有一种规则，就是所有元素都水平排列，排满一行自动换行。***流派之间的注意事项。主要指的是互相影响的问题。因为同级的所有元素你只能用一种流派，不能混用，如果发生了混用就会互相影响，尤其是浮动流和标准流之间。****浮动元素的性质：1.浮动的元素会删除原来标准流中占的位置。进入浮动流占位。2.浮动的元素不存在隔离性质。都是行内块。3.如果都是在同级之间浮动元素会影响正常的标准流元素。

3、行内元素不生效问题： 设置margin-top不生效，padding-top会超出边界，需要设置为行内快。4、垂直对齐属性：vertical-align:bottom（center/top）  例如：img,input{ vertical-align:bottom}

5、《定位流》   *相对定位： 脱离方式：号称占位脱离；也是绝对不会影响到标准流中的正常元素。定位属性名称：position：relative；作用：设置相对定位模式；   坐标值设置属性：left，top，bottom，right；   *绝对定位：   使用原则：如果要使用决定定位，必须是子绝父相； 脱离方式：号称彻底脱离；它是绝对不会在标准流中占任何位置。也不会影响标准流中的任何元素。     相关属性：position：absolute;     *定位元素的图层顺序设置：属性名称：z-index;         属性值：注意它只是表示一种图层顺序所以不带px单位。  *固定定位： 属性名称：position：fixed；  作用：表示固定在屏幕上定位；  注意事项：因为它肯定是相当屏幕的所以不需要子绝父相的原则；

6、基本的顺序：   一般来讲标准流能解决的事情，不用浮动流，浮动流能解决的事情不用定位流。7、精灵图：background:url(_r1_c1.png) no-repeat 0 0; .pic2{ background-position:0 -30px;}  注意： background-position的使用8、css中的继承：inherit  比如说继承父类的border；border:inherit;   9、圣杯布局*****  换行问题：文字的时候会自动换行？为什么是字母的时候不会自动换行呢？

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

居中问题：特例：left：0；top：0；right:0; bottom:0; margin:auto; position:absolute

--------------------------------CSS3---------------------------------------------------------------------------

1、《背景尺寸控制属性》属性名称：background-size；属性值：水平 垂直；    可以接受百分比设置。    可以接受固定的人为像素设置尺寸。    contain：表示尽可能完整的显示图片。  background-size:contain;    cover：表示尽可能覆盖住盒子   background-size:cover;

2、《背景起源属性》 属性名称：background-origin；属性值：它只有3个特殊的关键词值，分别表示；     border-box：从边框盒子开始渲染图片。     padding-box：从内边距盒子开始渲染图片。     content-box：从内容空间盒子开始渲染图片。

3、属性名称：background-clip； 作用：设置图片从哪开始显示，被裁切的地方是显示的，其他地方不显示图片。     属性值：也是3中类型的盒子； border-box，padding-box（默认），content-box。

4、背景图定位模式属性 ：属性名称：background-attachment；属性值：fixed表示将背景图片固定到屏幕上显示。

5、多背景：css一个属性如果有多个值，那么值与值之间用空格，如果值太多了发生了分组，那么组与组之间用逗号隔开。 如：      background:url(images/mimi.jpg) no-repeat 0 0,     url(images/shishi.jpg) no-repeat right bottom,      url(images/shitailong.jpg) no-repeat right 0,     url(images/longlong.jpg) no-repeat 0 bottom;

6、选择器： div>*通过这种方式可以选择所有子级标签。+表示选择指定目标其后紧挨着的唯一一个元素。~表示选择其后所有。

7、属性过滤选择器：[k]过滤拥有指定属性的标签。[k=v]过滤拥有指定属性值的元素； 常用于input的筛选；     [k^=v]以特定属性值开头 ；  [k$=v]以特定属性值结尾；  [k*=v]包含某个值

8、《其他》 :root 任何时候都表示选中网页的根元素就是html； :empty 表示选中内容为空的元素；     :not() 表示在指定范围内排除某一类元素；   ::selection 表示被选中的文本。

9、***个数选择器：同级别    ：nth-child（）;这个选择器注重的是所有同级当中的第几个；   ：nth-last-child（）；过滤同级别当中的倒数第几个；    ：first-child；同级别中的第一个；  ：last-child；同级别最后一个； ：only-child；同级别中唯一一个，独生子的意思。

10、同类型：    ：nth-of-type（）；同类型中的第几个；  ：nth-last-of-type（）；同类型中倒数第几个；：first-of-type；同类第一；    ：last-of-type；同类最后；   ：only-of-type；同类唯一；（可以有多个不同类，但是同类型的标签只能有唯一一个）

9&10对比：   相同之处：都是在同级别之间选择，后者要求即同级别又同类；    不同之处：***child注重个数，type注重类型。

11、***滑动门技术

12、***:after 增加后；需要配合content：’’;这个属性，表示增加的元素的内容。       ***:before 增加前； content：’’;       总结：这两个选择器如果不设置content属性都完全不生效，此外这两个选择器增加出的内容是不被抓取的。

13、【投影属性】属性名称：box-shadow 盒子投影； 属性值：水平偏移 垂直偏移 羽化程度 投影颜色 内外阴影。      其中如果加一个inset表示内阴影。投影颜色默认会跟随文本颜色。快速设置阴影只需要3个值就够了。     文本投影： text-shadow；属性值一样，但是没有inset；      例如：   box-shadow:0 0 20px;                  text-shadow:0 0 5px red;

-------------CSS3三大模块，分别是过渡模块，转换模块（维度模块），自定义动画模块。------------1、*属性名称：transition； 属性值：属性名称 过渡时间 动画类型缓动 延迟时间。      其中属性名称可以通过一个all来设置所有； 动画类型要特殊记住linear 表示匀速；其他的属性中有可能transition-delay会单独用到。

2、《过渡属性的使用方式》一共有三步，你就可以做一个过渡动画了。 1.按照以往的方式来书写元素的默认样式。2.给元素添加hover伪类来书写发生突变的样式。3.返回头去给元素的默认样式添加transition属性并设置时间。

3、《二维》属性名称：transform;    属性作用：可以设置任何一个元素直接进入二维领域。       属性值：有三个最核心的功能分别是；  旋转：rotate(30deg) - deg表示度数单位；缩放：scale(1,1) 它的小括号有两个值表示水平缩放，和垂直缩放，其中1表示缩放为100%就表示不变。      位移：translate(水平偏移，垂直偏移)；

4、《旋转功能》《旋转中心点》属性名称：transform-origin；作用：用来设置盒子的旋转中心点。又称为注册点。 默认值是左上角那个坐标点      属性值：它可以接受三种类型的值；默认是先水平 垂直。 1.像素类型的值； 2.百分比；3.特殊关键词；5、《倾斜功能》 功能值：transform:skew(水平度数，垂直度数)；注意事项：度数越大会被拉得越长。

6、案例：淘宝小箭头：div:hover:after{ transform:rotate(405deg);}  注意使用after

7、rotateZ、rotateX、rotateY

8、【自定义动画模块】《核心属性》 属性名称：animation；作用：可以设置自定义的动画；    属性值：动画名称 动画时间 动画缓动 动画延迟 动画次数 动画方向 播放状态；    其中有几个需要注意：动画缓动中 linear表示匀速；动画次数中 infinite无限次；动画方向中 alternate 往复播放；    播放状态中 paused暂停 running播放；    一个有价值的属性名称：animation-play-state表示播放状态单独控制。   *动画的定义方式： 在c3中新增了一个符号叫做定义符，但凡需要定义的都通过@符号定义；定义动画如下：   @keyframes 动画名称{         0%{} 100%{}    }   例如：div { animation:dongdong 2s linear infinite alternate paused; }   div:hover{ animation-play-state:running;}           @keyframes dongdong{0%{ left:0; top:0;}25%{ left:600px; top:0;}50%{ left:600px; top:400px;}75%{ left:0; top:400px;}100%{ left:0; top:0;}           }

9、云层动画：最主要是使用自定义动画来实现的。

10、无缝循环 主要运用动画来实现，还要多加几张照片，用于无缝

------------------------------------【其他的有价值的css属性】-------------------------------------------------

1、《多列属性》   columns：表示多列属性； 作用：可以将一个容器平分成多个固定宽度的容器； column-gap:表示列与列之间的距离；

2、《渐变背景色》 简介：css3中新增了一种对渐变颜色的设置方式，实际上它并没有出现新的属性，而是新增了一种颜色的设置模式，它和rgba()是差不多一个类型的。     设置方式： 关键词：linear-gradient(180deg,red,green,blue);其中如果色值的后面跟一个百分比表示染色的位置。如果不写表示均分颜色。

3、《盒子内减属性》 简介：*****这个属性被称之为css3中神器属性，非常好用，如果没有这个属性就不可能有响应式网站。     属性名称：box-sizing;    属性作用：可以实现盒子的padding和border内减效果。这是做响应式网站必用的属性。价值很高。     属性值：重点就是border-box;作用就是实体范围以边框为准； 例如：box-sizing:border-box

--------------------------------------------《下拉菜单案例》-------------------------------------------------

下拉菜单最关键的一个核心技巧在于弹出的内容一定要是定位流，它必须不在标准流中占位。否则的话就会影响其他分区的正常内容。但凡做下拉菜单效果一定记住这个事情。

---------------------------------------------动画的经验值-----------------------------------------------------

如果要做动画，那么现实和隐藏这个问题不能使用display：none；会导致动画不出现。所以还有一种做隐藏非常好用的万能方法：设置：width：0； height：0； overflow：hidden；当hover的时候再将尺寸释放为auto；就可以安全显示了。动画有的时候会做间隔出场的效果，这个效果就是通过delay来实现的。会给动画的整体效果和感觉提升一个级别。

--------------------------------------------【三维模块】------------------------------------------------------

1、《三维参照属性》属性名称：transform-style；属性值：preserve-3d；        属性作用：三维的坐标系需要给父级设置一个三维参照属性，才能让子级顺利进入三维空间，这个原理类似于子绝父相。        简介：transform-style：preserve-3d；这个属性和值是物体进入三维坐标系的一个标志性属性。只要添加了这个属性内部的子元素可以自动相当于这个父元素进行三维空间定位。        注意：想要移动这些，请使用绝对定位（子绝父相），运用那些transfrom的属性。

2、《三维长方体》*工作经验：在工作中得到一个长方体有一个很好用的方法，就是直接通过正方体拉伸或压缩得到想要的长方体。完全可以得到任何你想要的尺寸的长方体。        *缩放功能：在使用transform属性的时候要避免被后面的动画覆盖，如果涉及到用缩放功能尽量将缩放放在最后书写。       最理想的顺序：transform：位移 旋转 缩放；

3、《透视的形成》属性名称：perspective；属性值：接受一个距离像素； 比如：perspective：100px；       属性作用：模拟人眼和观察物体之间的透视距离。其中距离越近都是效果越明显。

4、案例：长方体；三维多面体