H5，CSS3 知识总结

1.H5新特性：
         1.语义化标签：header,nav,footer,aside,article,section
         2.音频，视频(audio,video):浏览器不支持自动播放时 在属性中添加 autoplay (谷歌不支持音频自动播放，视频支持静音自动播放)
        3. localStorage:本地离线储存  长久保持网站数据
        4.sessionStorage:临时存储数据   页面关闭时清除
        5.表单控件 date,time,email,url,search,file,number 
        6.拖拽释放
        7.自定义属性 data-id
        8.画布
        9.新的技术 webworker  websocket  Geolocation

2.CSS3新特性:
         1.颜色：RGBA
         2.边框阴影：box-shadow
         3.边框圆角：border-radius
         4.文字阴影：text-shadow
         5.渐变：linear-gradient,radial-gradient
         6.盒子模型：box-sizing
         7.过渡：transition
         8.自定义动画 animate @keyfrom
         9.媒体查询
        10.字体图标 iconfont/icomoon
        11.弹性布局 flex
        12.2D / 3D 转换
        13.border-image 图片边框

3.如何让一个盒子水平居中？：
         1.定位
         2.margin:auto
         3.display:flex  (justify-content:center;  align-items:center)
         4.display:table-cell  (vertical-align:middle;  text-align:center; 子元素需要转换为行内块模式  display:inline-block)
         5.计算父盒子与子盒子的空间距离
         6.利用 transform

4.如何实现圣杯布局？：
          1.利用flex布局实现两侧固定中间自适应
                1.1 父盒子设置 display:flex
                1.2 左右盒子设置固定宽高
                1.3 中间盒子设置 flex:1
          2.利用定位实现两侧固定中间自适应
                2.1 父盒子设置左右 padding 值
                2.2 给左右盒子的 width 设置父盒子的 padding 值，然后分别定位到 padding 处
                2.3 中间盒子自适应
          3.利用 bfc 块级格式化上下文，两侧固定中间自适应
                3.1 左右固定宽高，进行浮动
                3.2 中间 overflow : hidden;

5.CSS的盒模型？：
          1.W3C标准的盒子模型：内容区域(content) + border + padding + margin
          2.IE标准的盒子模型：width + margin (把 border 和 padding 划归到 width 范围内)

6.CSS中选择器的优先级：
         !Important>行内样式>ID选择器>类选择器>标签>通配符>继承>浏览器默认属性

7.H5 input 元素 type 属性值：
        1.button: 定义可点击的按钮
        2.checkbox: 定义复选框
        3.hidden: 定义隐藏输入字段
        4.search: 定义用于搜索的文本字段
        5.submit: 定义提交按钮 向服务器发送数据

8.CSS 中哪些属性可继承，哪些不可以
        能继承的属性：1.字体系列属性：font,font-family,font-weight,font-size,font-style
                                2.文本系列属性：
                                    2.1 内联元素：color,line-height,word-spacing,letter-spacing,text-transform
                                    2.2 块级元素：text-indent,text-align
                               3.元素可见性：visibility
                               4.表格布局属性：caption-side,border-collapse,border-spacing.empty-cells,table-layout
                               5.列表布局属性：list-style
       不能继承的属性：1.display：规定元素应该生成的框的类型
                                  2.文本属性：vertical-align.text-decoration
                                  3.盒子模型属性：width,height,margin,border,padding
                                  4.背景属性：background background-color background-image
                                  5.定位属性：float clear position top right bottom left min-width min-height max-width max-height overflow clip

9.CSS单位中px,em和rem的区别？：
        1.px: 绝对单位 是相对于显示器屏幕分辨率 是一个虚拟长度单位 是计算机系统的数字化图像长度单位
        2.em: 相对长度单位 相当于当前对象内文本的字体尺寸 如未被人设置则是浏览器默认字体尺寸  会继承父级元素的字体大小  不是一个固定值
        3.rem:相对单位  使用rem为元素设定字体大小时 仍然是相对大小 相对的只是html根元素
        区别：IE 无法调整那些使用 px 作为单位的字体大小，而 em 和 rem 可以缩放

10.dispaly:none与visibility:hidden区别：
        1.dispaly:none       隐藏元素 不占位
        2.visibility:hidden  隐藏元素   占位
        3.visibility 具有继承性
        4.transition 支持 visibility 属性 不支持 display

11.position的值有哪些，分别有什么作用？：
        1.static: 静态定位  不脱标
        2.absolute:  绝对定位  参照物：找最近的带有定位的父级元素进行位置移动 如没有 则相对于浏览器窗口进行定位  会脱标 不占据空间
        3.relative: 相对定位  参照物 ：元素偏移前位置  不脱标
        4.fixed:  固定定位  参照物：浏览器窗口 会脱标

12.为什么会出现浮动？浮动元素会引起什么问题？如何清除浮动？
        元素设置浮动后 会脱标 不占据空间
  为什么需要清除浮动？
        1.子元素浮动后 不占位置 父元素的高度无法被撑开 影响与父元素同级的元素
        2.若第一个元素浮动 则该元素之前的元素也需要浮动
        3.在实际开发中,有的时候不方便给父元素高度,但是子元素又浮动了,浮动之后盒子脱标,父亲的高度为0,影响后面盒子布局
   清除浮动的方式？
        1.给父盒子设置高度(注意在实际开发中 比如新闻列表  产品推荐模块不推荐直接给父盒子高度)
        2.额外标签法(在父元素内容的最后面添加一个块级元素 在取个类名叫clear (给添加的块级元素设置 .clear: both;))
        3.给父元素设置overflow:hidden
        4.单伪元素清除法(clearfix给父元素添加)
        5.双伪元素清除法(clearfix给父元素添加)

13.flex布局
        1.flex-direction: 修改主轴排列方向 (默认主轴是x轴 如果设置了 column 则主轴为y轴)
        2.flex-wrap:换行方式
        3.justify-content:水平对齐方式(主轴上的)
        4.align-items:垂直对齐方式
        5.align-content:多行垂直对齐方式

14.如何解决margin塌陷?:
        1.可以给父盒子设置 border:1px solid transparent
        2.给父盒子添加 overflow:hidden
        3.给父盒子设置padding值
        4.给父盒子添加 position:fixed
        5.给父盒子添加 display:table
        6.利用伪元素给父元素的前面添加一个空元素

15. ：：和：的区别和作用？：
        1. ：用于CSS3的伪类
        2. ：：用于CSS3的伪元素
        作用：::before和::after是在元素内容前后加上指定内容 
                   伪类与伪元素的本质区别就是是否抽象创造就新元素
                   伪类不互斥可以叠加使用   伪元素在一个选择器只能出现一次且只能在开始和末尾

16.CSS3 新增伪类，以及伪元素
          CSS3 新增伪类：:first-of-type            :last-of-type
                                    :nth-child(n)             :nth-last-child(n)
                                    :nth-of-type(n)         :nth-last-of-type(n)
                                    :last-child                 :target 和描点链接一起使用
                                   :not(p)                       :enadled
                                   :disabled                   :checked
       伪元素：::first-letter  将样式添加到文本的首字母
                    ::first-line      将样式添加到文本的首行
                    ::before         在某元素之前插入某些内容
                    ::after            在某元素之后插入某些内容

17.BFC是什么？：
         定义：BFC(会计格式化上下文)  是一个独立的渲染区域  只有block-level box 参与 规定了内部的block-level box如何布局 并且与这个区域外部毫不相干
         布局规则：1.内部的box会在垂直方向 一个接一个地放置
                          2.box垂直方向的距离有margin决定  属于同一个BFC的两个相邻box的margin会发生重叠
                          3.每个元素的margin box的左边 与包含块 border box的左边相接触(对于从左往右的格式化 否则相反) 浮动中也是
                          4.BFC的区域不会与float box 重叠
                          5.BFC就是页面上的一个隔离的独立容器  容器里的子元素不会影响外面的元素 反之也如此
                          6.计算BFC的高度时，浮动也参与计算
         哪些元素会生成BFC：1.根元素
                                           2.float 属性不为 none
                                           3.position为absolute或fixed
                                           4.display为inline-block table-cell table-caption flex inline-flex
                                           5.overflow 不为 visible

18.什么是渐进增强和优雅降级?它们有什么不同？
        由于低级浏览器不支持CSS3，所以在高级浏览器中使用 CSS3 而低级浏览器只保证最基本的功能
        优雅降级  观点认为应该针对那些最高级，最完善的浏览器来设计网站
        渐进增强  观点则认为应关注于内容本身

19. iframe 有哪些优缺点
          优点：1.重载页面时不需要重载整个页面，只需要重载页面中的一个框架页(减少了数据的传输，加快了网页下载速度)
                    2.技术易于掌握，使用方便，使用者众多，可主要应用于不需搜索引擎来搜索的页面
         缺点：1.会阻塞主页面的 onload 事件
                   2.会产生很多页面，不容易管理
                   3.不容易打印
                   4.浏览器的后退按钮无效

20.使用 CSS 怎么让 Chrome 支持小于 12px 的文字比如 10px？
     针对谷歌浏览器内核，加 webkit 前缀，用 transform:scale()这个属性进行缩放！