前端CSS、HTML总结

1、HTML 语义化的理解

html语义化的含义：根据内容的结构化，选择合适的标签便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。(基本上都是围绕着几个主要的标签，像标签H1~H6，li、强调(strong、em)等等)。
语义化的原因：
①为了在没有CSS情况下，页面也能呈现出很好的内容结构、代码结构。(为了裸奔时候好看)。
②用户体验：例如title、alt用于解释名词或者解释图片信息、label标签dd的活用。
③有利于SEO（网络引擎搜索优化）：和搜索引擎建立良好的沟通，有助于爬虫抓取更多的有效信息(爬虫依赖于标签来确定上下文和各个关键字的权重)。
④方便其它设备解析(如屏幕阅读器，盲人阅读器，移动设备)以意义的方式来渲染网页。
⑤便于团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

2、HTML5新增了哪些语义化标签

头部：<header></header>
尾部：<footer></footer>
独立结构：<article></article>
主要内容：<main></main>
导航：<nav></nav>
侧边栏：<aside></aside>
节、段、分组：<section></section>

3.H5新特性：

1.语义化标签：header、footer、section、nav、aside、article

2.增强型表单：input的多个type

3.新增表单元素：datalist、keygen、output

4.新增表单属性：placehoder、required、min和max

5.音频视频：audio、video

6.Canvas 绘制图表

7.地理定位

8.拖拽

9.重力感应

10.本地存储：localstorage没有事件限制的本地存储sessionstorage针对一个session的数据存储。

11.websocket:单个TCP连接上进行全双工通讯的协议。即时通讯。

12.SVG绘图：一种使用XML描述2D图像的语言

4.input和textarea的区别

<input>是单行文本框，不会换行。通过size属性指定显示字符长度，注意：当使用css限定了宽高，那么size属性就不再起作用了。有自己的value值，Maxlength属性指定文本框可以输入的最长长度。可以通过width和height设置宽高，但是也不会增加行数。
<input type="text" value="你好" Maxlength="10">
<textarea>是多行文本输入框，文本区中可容纳无限数量的文本，无value属性，其中的文本默认字体是等宽字体(通常是Courier)，可通过cols和rows属性来规定textarea的尺寸，不过更好的办法是使用CSS的height和width属性。

<textarea cols="20" rows="30"></textarea>

5.用一个div模拟textarea的实现

<div id="textarea" contenteditable="true">
#textarea{
    width:300px;
    border:1px solid #ccc;
    min-height:150px;
    max-height:300px;
    overflow:auto;
    font-size:14px;
    outline:none;
}

contenteditable属性，值为Boolean值，true绑定元素可编辑，false(默认)元素不可编辑。

6.移动设备忽略将页面中的数字识别为电话号码的方法

标准的电话号码格式是这样子的：1-408-555-555，但是有时候不是电话号码的数字也会被浏览器自动解析为电话号码，并把数字的颜色和样式都改了，如果忽略页面中的数字识别为电话号码，只要把这个默认行为关闭即可，只要一行代码
<meta name="format-detection" content="telephone=no">
这个关闭不会影响真正电话号码的识别。

补充：
format-detection属性和含义
format-detection翻译成中文的意思是“格式检测”，顾名思义，它是用来检测html里的一些格式的，那关于meta的format-detection属性主要是有以下几个设置：

<meta name="format-detection" content="telephone=no">

//禁止了把数字转化为拨号链接

<meta name="format-detection" content="email=no">

//告诉设备不识别邮箱，点击之后不自动发送

<meta name="format-detection" content="adress=no">

//禁止跳转至地图！

<meta name="format-detection" content="telephone=no,email=no,adress=no">

//以上三者组合

7.盒模型

标准盒模型：总宽度：内容 ( content ) + border + padding + margin

IE盒模型(怪异盒模型)：宽度 = 内容宽度 ( content + border + padding ) + margin

8.弹性盒模型

flex-direction:row //(默认)主轴为水平方向,起点在左端。
flex-direction:row-reverse //主轴为水平方向,起点在右端
flex-direction:column //使用后会使主轴变为y轴
flex-firection:column-reverse //主轴为垂直方向,起点在下沿。复制代码flex-wrap:nowrap //(默认)不换行
flex-wrap:wrap //换行,第一行在上方
flex-wrap:wrap-reverse //换行,第一行在下方复制代码flex-flow:该属性是flex-direction属性和flex-wrap属性的简写形式。
flex-flow:值1(主轴方向) 值2(是否换行)
flex-flow:row nowrap //(默认)复制代码justify-content:flex-start //(默认)左对齐
justify-content:flex-end //右对齐
justify-content:center //居中(子元素紧凑居中)
justify-content:space-between; //两端对齐,项目之间的间隔都相等
justify-content:space-around; //每个项目两侧的间隔相等复制代码align-items:flex-start //与交叉轴的起点对其
align-items:flex-end //与交叉轴的终点即末尾对其
align-items:center //与交叉轴的中点对其
align-items:baseline //项⽬的第⼀⾏⽂字的基线对齐
align-items:stretch //如果项⽬未设置⾼度或设为auto，将占满整个容器的⾼度复制代码align-content属性,紧跟于flex-wrap属性后,该属性用于修饰flex-wrap属性
align-content:flex-start //与交叉轴的起点对齐
align-content:flex-end //与交叉轴的终点对其
align-content:center //与交叉轴的中点对齐
align-content:space-between //与交叉轴两端对齐，轴线之间的间隔平均分布
align-content:space-around //每根轴线两侧的间隔都相等复制代码align-self:center

9.CSS单位?

⑴px：绝对单位。页面按精确像素展示。
⑵em：相对单位，基准点为父节点字体的大小，如果自定义了font-size按自身的来算，整个页面内1em不是一个固定的值。
⑶rem：相对单位，相对于根节点html的font-size的大小来计算。⑷vw：视窗宽度，1vw等于视窗宽度的1%。
⑸vh：视窗高度：1vh等于视窗高度的1%。
⑹vmin：以宽和高之间最短的一端为基准，如果宽>高，那么1vmin相当于宽的1%；
⑺vmax：以宽和高之间最长的一端为基准，如果宽>高，那么1vmax相当于宽的1%；
⑻%：百分比。
⑼pt：point，大约1/72寸，一寸=3.3333···厘米。⑽pc：pica，大约6pt，1/6寸。
⑾ex：取当前作用效果的字体的x的高度，在无法确定x高度的情况下以0.5em计算，IE11以下不支持。
⑿ch：以节点所使用字体中的“0”字符为基准，找不到时为0.5em。IE10以上支持。

10.CSS3的新特性？

1.选择器
2.背景和边框
3.文本效果
4.2d/3d转换
5.动画、过度
6.多列布局
7.用户页面

新增一：rgba（简单不做解释）；
新增二：弹性布局flex（上面第二题）；
新增三：媒体查询；
新增四：渐变色；
新增五：动画animation

shapes文字环绕
CSS Shapes布局可以实现不规则的文字环绕效果，需要和浮动配合使用。
shape-outside 环绕图形
clip-path 切图形
shape-margin 环绕距离

scrollbar滚动条
scrollbar用于实现自定义滚动条样式。
::-webkit-scrollbar 滚动条宽度
::-webkit-scrollbar-thumb 滚动条–滚条样式
::-webkit-scrollbar-track 滚动条–凹槽样式

11.CSS选择器？

!important > 内联样式 > id选择器 > class选择器 > 属性选择器 > 伪类选择器（: hover） > 标签选择器 > 伪元素（: before） > 通配符

选择器可继承的属性font-size、font-family、color
不可继承的属性: border、padding、margin、width、height

权重值:
!important权重值：10000，
内联样式：1000，
id选择器：100
class、伪类、属性、伪元素选择器：10
标签选择器：1
后代选择器的权重为包含的选择符权重值之和。

CSS3新增的伪类：
p：first-of-type：选择属于其父元素的首个元素；
p：last-of-type：选择属于其父元素的最后元素；
p：only-of-type：选择属于其父元素的唯一元素；
p：only-child：选择属于其父元素的唯一子元素；
p：nth-child（1）：选择属于其父元素的第一个子元素；
:enabled：disabled：表单控件d的禁用状态；
:checked：单选框h或复选框被选中；

12.BFC ?

BFC是块级格式化上下文。
BFC它是一个独立的渲染区域，只有Block-level box（块元素）参与，它规定了内部的Block-level box如何布局，并且与这个区域外部毫不相关。

可以理解成：
创建了 BFC的元素就是一个独立的盒子，里面的子元素不会在布局上影响外面的元素（里面怎么布局都不会影响外部），BFC仍属于文档中的普通流。

特性：
① 内部的块级元素会在垂直方向上一个接一个的放置；
② 位于同一BFC下的相邻块级子元素在垂直方向上会发生margin重叠；
③ 位于不同BFC下的相邻元素之间不会发生margin重叠；
④ BFC可以包含浮动元素；
⑤ BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素；
创建：
① 根元素；
② float的值不为none
③ overflow的值为auto、scroll或hidden
④ display的值为: table-cell：它会作为一个表格单元格显示（类似td和th）。 table-caption：此元素会作为一个表格标题显示。 inline-block：行内块元素。
⑤ position的值为fixed或absolute用途：
① 闭合浮动 ② 阻止margin重叠 ③ 自适应流体布局

13.清除浮动的方法 ？

①给设置了浮动的元素的父级加高。
②给设置了浮动的元素的父级设置overflow：hidden。如果需要兼容IE，在添加一个zoom：1
③给需要清除浮动的元素设置clear：both；
④在最后一个子元素的后面加一个空的div，给它样式属性 clear:both（不推荐）
⑤伪类清除：

.clearfix：after{content：""；clear：both；display：block；}                     .clearfix{zoom：1}<div class="container clearfix">
	<div class="box"></div>
</div>	
<div class="main "></div>

.box{
	width:100px;
	height:100px;
	background:yellow;
	float: left;
}
.main{
	width:150px;
	height: 150px;
	background:red;
}
.clearfix:after{
	content: "";
	clear: both;
	display: block;
}
.clearfix{
	zoom:1;
}

14.层叠上下文 ?

层叠上下文(stacking context)，是HTML中一个三维的概念。在CSS2.1规范中，每个盒模型的位置是三维的，分别是平面画布上的X轴，Y轴以及表示层叠的Z轴。

一般情况下，元素在页面上沿X轴Y轴平铺，我们察觉不到它们在Z轴上的层叠关系。而一旦元素发生堆叠，这时就能发现某个元素可能覆盖了另一个元素或者被另一个元素覆盖。通元素设置position属性为非static值并设置z-index属性为具体数值，产生层叠上下文。

15.常见页面布局?

⑴静态布局：最传统、原始的Web布局设计。网页最外层容器(outer)有固定的大小,所有的内容以该容器为标准,超出宽高的部分用滚动条(overflow:scroll)来实现滚动查阅。
优点：采用的是css2之前的写法,不存在浏览器兼容性。布局简单。 缺点：但是移动端不可以使用pc端的页面,两个页面的布局不一致,移动端需要自己另外设计一个布局并使用不同域名呈现。

⑵流式布局：流式布局也叫百分比布局。随着屏幕的改变，页面的布局没有发生大的变化，可以进行适配调整，这个正好与自适应布局相补。 优点：元素的宽高用百分比做单位，元素宽高按屏幕分辨率调整，布局不发生变化。
缺点：屏幕尺度跨度过大的情况下，页面不能正常显示。

⑶弹性布局：弹性布局是CSS3引入的强大的布局方式，
弹性盒模型：display：flex；
优点：简单、方便、快速
缺点：CSS3新特性,浏览器兼容性非常头疼。而且手机浏览器对flex的支持也不是很理想。

⑷响应式布局：采用自适应布局和流式布局的综合方式，为不同屏幕分辨率范围创建流式布局。利用媒体查询可以检测到屏幕的尺寸(主要检测宽度)，并设置不同的CSS样式，就可以实现响应式的布局。

16.CSS预处理 后处理?

CSS预处理器：
用一种编程语言，为CSS增加了一些编程的特性，最终编译出css文件。比如sass、less、stylus。
CSS预处理器优点：
语言级逻辑处理，动态特性，改善项目结构。
CSS预处理器缺点：
采用特殊语法，框架耦合度高，复杂度高

CSS预处理实现原理：
①取到 DSL 源代码 的 分析树
②将含有 动态生成 相关节点的 分析树 转换为 静态分析树
③将 静态分析树 转换为 CSS 的 静态分析树
④将 CSS 的 静态分析树 转换为 CSS 代码CSS后处理器：堆css进行处理，并最终生成css的预处理器，属于广义上的css预处理器，最典型的就是css压缩工具(clean-css)，流行的Autoprefixer，以Clean I Use上的浏览器支持数据为基础，自动处理兼容性问题

CSS后处理器优点：
使用 CSS 语法，容易进行模块化，贴近 CSS 的未来标准

CSS后处理器缺点：
逻辑处理能力有限

CSS后处理器实现原理:
①将 源代码 做为 CSS 解析，获得 分析树
②对 CSS 的 分析树 进行 后处理
③将 CSS 的 分析树 转换为 CSS 代码

17.display有哪些值？

display：none 此元素不被显示。
display：block 此元素显示为块级元素，支持宽高，独占一行。display：inline 此元素为内联元素，不支持宽高，不独占一行。display：table 此元素作为块级表格来显示。
display：flex 此元素为弹性盒模型
display：list-item此元素会作为列表显示

18.相邻的两个inline-block节点为什么会出现间隔，该如何解决？

元素被当成行内元素排版的时候，原来HTML代码中的回车换行被转成一个空白符，在字体不为0的情况下，空白符占据一定宽度，所以inline-block的元素之间就出现了空隙。
这些元素之间的间距会随着字体的大小而变化，当行内元素font-size:16px时，间距为8px。(不懂没关系，看下面解决方法就明白了)。

方法一：父级font-size：0；子级设置字体大小；

方法二：改变书写方式//原来
<span>1</span>
<span>2</span>
<span>3</span>
//改变
<span>1</span><span>2</span><span>3</span>

方法三：margin负值

方法四：设置父元素display：table；word-spacing：0(两个记得都要加上)；

19.meta viewport移动端适配?

<metaname="viewport" content="width=device-width,initial-scale=1.0">

20.CSS实现宽度自适应100%，宽高16：9的比例的矩形?

*{    
   margin:0;    
   padding:0;
}
.wrap{    
    width:20%;
}
.box{    
    kground:pink;
}
.box p{    
    width:100%;    
    height:100%;    
    position: absolute;    
    color:#666;
}
<div class="wrap">    <div class="box">        <p>13</p>    </div></div>

21.画三角形

div{
    width:0;
    height:0;
    border-top:50px solid transparent;
    border-left:50px solid transparent;
    border-right:50px solid transparent;
    border-bottom:50px solid red;
}

22.1像素边框问题物理像素?

移动设备出厂时，不同设备自带的不同像素，也称硬件像素。

逻辑像素：
即css中记录的像素。
为什么会有1像素边框问题：
在开发中，在移动端css里面写了1px，实际看起来比1px粗。这就关系到物理像素和逻辑像素的问题了，开发中UI设计师要求的1px是指设备的物理像素1px，而css里记录的像素是逻辑像素，它们之间存在一个比例关系，可以用window.devicePixelRadio来获取，也可以用媒体查询的-webkit-min-device-pixel-ratio来获取，比例的多少与设备相关。iphone的devicePixelRatio == 2，而我们设置的border：1px 描述的是设备的独立像素，所以被放大到物理像素2px显示，在iphone上就显的比较粗。

解决方案：
⑴媒体查询利用设备像素比缩放，设置小数像素。
优点：简单，好理解。
缺点：兼容性差目前IOS8+才支持，
IOS7以下、安卓系统都显示0px。

.box{border:1px solid #333}
@media screen and (-webkit-min-device-pixel-ratio:2){
    .box{border:1px solid #333}
}
@media screen and (-webkit-min-device-pixel-radio:3){
    .border{border:0.333333px solid #333}
}

⑵设置border-image方案

缺点：需要制作图片，圆角可能会出现模糊。

.border-image-1px{
    border-width:1px 0px;
    -webkit-border-image:url("border.png")2 0 strech;
    border-image:url("border.png")2 0 stretch;
}  

border-width：指定边框的宽度，可以设定四个值，分别为上右下左top right bottom left。
border-image：距离图片上方2px裁剪图片作为上边框，下方2px裁剪作为下边框。距离左右0像素裁剪图片即没有边框，以拉伸方式展示。

总结：在边框图片中，裁剪图片上下方的2个像素宽度作为上下边框，并展示在宽度为1个像素的边框空间里。左右没有边框。

⑶box-shadow方案
优点是没有圆角问题。
缺点是颜色不好控制。

.box{
    -webkit-box-shadow:0 1px 1px -1px rgba(0,0,0,.5);
}

参数：水平阴影位置，垂直阴影位置，模糊距离，阴影尺寸，阴影颜色，将外部阴影改为内部阴影。

⑷transform：scale(0.5)方案（推荐）：
以上的方案，思想其实都是将1px缩小为0.5px来展示，然而0.5px并不是所有的设备或浏览器都支持。其实1像素问题的产生基本发生在设置边框或分割线的时候，场景并不覆盖全局样式，因此，直接缩放需要设置的元素，才是我们真正需求的。transform就可以实现。

①设置height：1px，根据媒体查询结合transform缩放为相应的尺寸

.box{
    height:1px;
    background:#333;
    -webkit-transform:scaleY(0.5);
    -webkit-transform-origin:0 0;
    overflow:hidden;
}

②用: :after和: :before
设置border-bottom：1px solid #000；
然后缩放-webkit-transform：scaleY(0.5)；
可以实现两根边线的需求；

.box::after{
    content:"";
    width:100%;
    border-bottom:1px solid #000;
    transform:scaleY(0.5);
}

③用: :after设置border：1px solid #000；width：200%；height：200%；然后缩放scaleY(0.5)；
优点:可以实现圆角京东就是这么实现的
缺点:是按钮添加active比较麻烦。

.div::after {
    content: '';
    width: 200%;
    height: 200%;
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid #bfbfbf;
    border-radius: 4px;
    -webkit-transform: scale(0.5,0.5);
    transform: scale(0.5,0.5);
    -webkit-transform-origin: top left;
}

23. 书写一个line为小于1px的线

    .hot-search {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      height: 166px;
      background: pink;
      padding-bottom: 6px;
      font-size: 14px;

      li {
        margin: 0 12px 12px 0;
        padding: 6px 12px;
        background: orange;
      }
      .line {
        position: absolute;
        bottom: 0;
        left: 0;
        margin: 0;
        padding: 0;
        width: 100%;
        height: 1px;
        background: #ccc;
        transform: scaleY(0.2);
      }
    }

24. 关于多行文本省略

        p {
          height: 20px; //设置高度 一行显示多少高，那么多行就是一行的倍数
          display: -webkit-box; //一种自适应布局方式
          overflow: hidden; // 超出隐藏
          text-overflow: ellipsis; // 超出的一省略号显示
          -webkit-box-orient: vertical; // 在父元素设置,子元素的排列方式
          -webkit-line-clamp: 1; // 需要设置的行数
          word-break: break-all; // 在恰当的断字点进行换行
          word-wrap: break-word; //允许长单词换行到下一行：
          line-height: 20px;
          font-size: 14px;
          color: #999;
        }

25. css的兼容性问题

(1).最小高度的兼容-ie6
IE6过滤器(下划线过滤器)----只有IE6能识别的带有下划线的属性
_属性：属性值;
。最小高度：就是给元素设置最小高度，然后再用里面的子元素去撑开模块的高度，但是会造成高度塌陷！
。解决方法思路：浮动元素 - 浮动元素的父元素添加清除浮动 - 然后父元素的外围模块（整个盒子的高度）添加最小高度，也就是浮动元素撑开父元素（高度不能固定），父元素再撑开外围模块！

    div {
      /* _height: 100px; IE6 能够识别这个，高版本不能识别，况且IE6能够识别这个为最小高度  */
      _height: 100px;
      /* 这个在IE6不能识别，但是高版本识别为最小高度 */
      min-height: 100px;
      background: yellow;
    }

。解决高度塌陷方法：

         .clear-fix::after {
              content: ".";
              height: 0;
              display: block;//化为块状，占有宽度
              clear: both;//清除两本的浮动
              overflow: hidden;//把content中.隐藏
              visibility: hidden;//不可见的元素也会占据页面上的空间，隐藏留出空间，撑开父元素
            }
            .clear-fix{
              zoom:1;//这是针对ie浏览器，解决高度塌陷
            }

26. 字体设置为小于12px

在body之中设置：
body{-webkit-text-size-adjust:none} 
或 在设置小于12px的选择器对象里设置一个  -webkit-text-size-adjust:none样式：
p{
	font-size:7px;
	-webkit-text-size-adjust:none
} 
或  transform:scale()

27. :after 和 ::after区别

。:after->伪类 ::after->伪元素
。相同点：都是给元素添加伪类；
:before和::before写法是等效的; :after和::after写法是等效的；
。不同：:after是css2的写法，::after是css3的写法，相比而言，
:after兼容性比::after好；

28. 隐藏页面元素的方法有几种 说明其优缺点

。display:none
简单粗暴设置显示为none，不占据之前的空间，会造成重排和重绘；
。opacity:0
就是设置透明度为0，占据空间，但是还是会造成重绘，但是不会造成重排；
。visibility:hidden
设置不可见，但是占据原有的位置，因此只会造成浏览器的重绘，不会造 成重排；
。就性能而言
display会造成重绘与重排，性能最低，至于其他两种就差不多都会造成重绘
。就绑定事件而言：
display:none上的事件会消失不见
opacity:0 上的事件还是依然存在，一点击的时候，还是能触发
visibility:hidden 不会触发元素所绑定的事件

29. transition 和 animate

transition：过度
指定的属性在发生变化的时候，浏览器自动按照指定的时间进行自然的过渡，ransition所有的运行都需要条件进行触发事件 如点击 鼠标滑过；

animate：动画
CSS3的animation属性可以像Flash制作动画一样，通过控制关键帧来控制动画的每一步，实现更为复杂的动画效果。要实现animation动画，就需要定义动画类型，并且在样式中调用；
不需要触发任何事件的情况下，做出动画的效果；

区别：
animate属性类似于transition，他们都是随着时间改变元素的属性值；
其主要区别在于：transition需要触发一个事件才会随着时间改变其CSS属性；
animate在不需要触发任何事件的情况下，也可以显式的随时间变化来改变元素CSS属性，达到一种动画的效果。

animation动画

1. animation-name:设置动画的名字（自定义）

2. animation-duration:动画持续时间

3. animation-delay:动画的延迟时间

4. animation-iteration-count:动画的重复次数，默认1次，（infinite无限）

5. animation-timing-function：动画的运动形式（各种运动曲线）

6. animation-fill-mode:规定动画播放之前或之后，其动画效果是否可见。
   none默认值：在运动结束之前回到初始位置，在延迟情况下，让0%在延迟后生效。
   backwards：在延迟的情况下，让0%在延迟前生效
   forwards：在运动结束之后，停在结束位置
   both：backwards和forwards同时生效

7. animation-direction：属性定义是否应该轮流反向播放动画
   alternate：一次正向（0-100%），一次反向（100-0%）
   reverse：永远都是反向，从100-0%
   normal（默认值）：永远都是正向，从0%-100%

30. html5标签

常用语义标签
< header > 规定文档或节的页眉。
< footer > 定义文档或节的页脚。
< main > 规定文档的主内容。
< section > 定义文档的节。
< article >定义文档的文章。
< aside >定义页面内容以外的内容。
< nav >定义导航链接。
< mark >定义重要的或强调的文本。
< figure > 规定自包含内容，比如图示、图表、照片、代码清单等。
< figcaption >定义 < figure > 元素的标题。
< details >定义用户能够查看或隐藏的额外细节。
< summary >定义 元素的可见标题。
< time >定义日期/时间。

常用表单标签
< form > 定义供用户输入的表单。
< input > 定义输入域。
< label > 定义了 < input > 元素的标签，一般为输入标题。
< textarea > 定义文本域 (一个多行的输入控件)。
< fieldset > 定义了一组相关的表单元素，并使用外框包含起来。
< legend > 定义了 < fieldset > 元素的标题。
< select > 定义了下拉选项列表。
< optgroup > 定义选项组。
< option > 定义下拉列表中的选项。
< button > 定义一个点击按钮。
< datalist > 指定一个预先定义的输入控件选项列表。
< keygen > 定义了表单的密钥对生成器字段。
< output > 定义一个计算结果。

   <fieldset>
        <legend>标题一</legend>
   </fieldset>

样式如下：

其他标签
< hr > 水平线
< br > 换行
< b >< /b > 粗体文本
< code >< /code > 计算机代码
< em >< /em > 强调文本
< i >< /i > 斜体文本
< kbd >< /kbd > 键盘输入
< pre >< /pre > 预格式化文本
< small >< /small > 更小的文本
< strong >< /strong > 重要的文本
< abbr >< /abbr > 缩写词或者首字母缩略词
< address >< /address > 联系信息
< bdo >< /bdo > 文字方向
< blockquote >< /blockquote > 从另一个源引用的部分
< cite >< /cite > 工作的名称
< del >< /del > 删除的文本
< ins >< /ins > 插入的文本
< sub >< /sub > 下标文本
< sup >< /sup > 上标文本

31. CSS3线性渐变

添加到background-image上

注：渐变的0度在页面下边，正值会按照顺时针旋转，负值按逆时针旋转

background-image:linear-gradent(to top/45deg,red,blue)

linear-gradent：线性渐变
point || angle
color
percentage
radial-gradient: 径向渐变
point
color
percentage

32. shadow阴影

文字阴影

text-shadow(x,y,颜色)  //默认颜色与文字颜色一样，通过逗号实现多个阴影

盒子阴影
设置多个值

box-shadow:水平位移 垂直偏移 模糊值 扩大范围 阴影颜色  默认向外，添加此属性方向向内inset
box-shadow:3px 0px 5px 0px black inset;

33. mask遮罩

mask: url repeat x y w h 多遮罩

-webkit-mas:url('./hello.png') no-repeat 100px 100px / 200px 200px,url('./hello.png') no-repeat 100px 100px / 200px 200px; 

未标准化，需设置浏览器专属css

34. 倒影

box-reflect： above上 below下 left左 right右 距离 遮罩|渐变
渐变：只针对透明度的渐变，不支持颜色

box-reflect: below 20px url('./.png');
box-reflect: below 20px linear-gradient(rgba(255,255,255,0) 50%,rgba(255,255,255,1);

35. 伪类与伪元素

区分
在CSS2.1中对伪类和伪元素的区别比较模糊。CSS3中对这两个概念做了相对较清晰地解释，并且在语法上也做了很明显的区分。CSS3中规定伪类由一个冒号开始，然后为伪类的名称；伪元素由两个冒泡开始，然后为伪元素的名称。

伪类概念
伪类本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息。通常表示获取不存在与DOM树中的信息，或获取不能被常规CSS选择器获取的信息。​ : hover : focus : empty

伪元素概念
元素本质上是创建了一个有内容的虚拟容器。这个容器不包含任何DOM元素，但是可以包含内容。另外，开发者还可以为伪元素定制样式。
:: selection ​ :: first-line / first-letter :: before / after