1、圆角
在CSS3 之前，如果需要用到圆角效果，需要图像文件才能达到。在CSS使用CSS可以方便使用各种手段把网页灵活的分成多个部分。但是简单分割出来的都是矩形方框。在CSS中可以使用border-radius属性实现圆角效果。border-top-right-radius:指定元素右上角圆角、border-bottom-right-radius:指定元素右下角圆角、border-bottom-left-radius、border-top-left-radius。
目前Webkit引擎支持-webkit-border-radius私有属性，Mozilla Gecko引擎支持-moz-border-radius 私有属性，Presto引擎和IE 9+支持border_radisu标准属性。
2、z-index
z-index属性用于调整定位时重叠块的上下位置，z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。此属性参数值越大，则被层叠在最上面。元素可拥有负的 z-index 属性值。Z-index 仅能在定位元素上奏效（例如 position:absolute;）！可以简单理解为用定位把一些元素摞起来，z-index数值大的在上面，数值小的在下面。依次排列。
3、盒子模型
盒子模型，英文即box model。无论是div、span、还是a都是盒子。一个盒子中主要的属性就5个：width、height、padding、border、margin。如下：padding：内边距。
border：边框。margin：外边距。
在 CSS的标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。IE盒子模型中，width 和 height 指的是内容区域+border+padding的宽度和高度。
padding就是内边距。padding的区域有背景颜色，css2.1前提下，并且背景颜色一定和内容区域的相同。也就是说，background-color将填充所有boder以内的区域。
border就是边框。边框有三个要素：像素（粗细）、线型、颜色。颜色如果不写，默认是黑色。另外两个属性不写，要命了，显示不出来边框。
CSS盒模型详解：https://www.cnblogs.com/smyhvae/p/7256371.html
4、appearance属性
大家都知道每个浏览器对HTML元素渲染都不一样，比如说“button”，在chrome和ff中，渲染出来的效果都是不尽相同的。这样一来就有了今天这个思路，利用浏览器的对元素的默认渲染风格，我们可以使用“appearance”属性对任何元素的渲染风格改变，最简单的来说，我要把“a”链接默认显示成“按钮”风格，那么我们可以使用“appearance”设置为“button”。“appearance”功能听起来蛮大的，不过可惜的是，目前各个浏览器厂商各自为政，还无法达到统一的标准，至今天也只有两个内核的浏览器可以使用，其一是“webkit”，其二是“ff”的，也就是说在使用“appearances”时，需要加上各浏览器厂前缀。
appearance使用方法：
.elmClass{ -webkit-appearance: value; -moz-appearance: value; appearance: value; }
接下来我们一起来看个简单的实例：
<p class="lookLikeAButton">我是一个段落P元素 </p> <p class="lookLikeAListbox">我是一个段落P元素 </p> <p class="lookLikeAListitem">我是一个段落P元素 </p> <p class="lookLikeASearchfield">我是一个段落P元素 </p> <p class="lookLikeATextarea">我是一个段落P元素 </p> <p class="lookLikeAMenulist">我是一个段落P元素</p>
接下来，使用“appearance”属性来改变上面“P”元素的风格：
.lookLikeAButton{ -webkit-appearance:button; -moz-appearance:button; } /*看起来像个清单盒子，以listbox风格渲染*/ .lookLikeAListbox{ -webkit-appearance:listbox; -moz-appearance:listbox; } /*看起来像个清单列表，以listitem风格渲染*/ .lookLikeAListitem{ -webkit-appearance:listitem; -moz-appearance:listitem; } /*看起来像个搜索框，以searchfield风格渲染*/ .lookLikeASearchfield{ -webkit-appearance:searchfield; -moz-appearance:searchfield; } /*看起来像个文本域，以textarea风格渲染*/ .lookLikeATextarea{ -webkit-appearance:textarea; -moz-appearance:textarea; } /*看起来像个下接菜单，以menulist风格渲染*/ .lookLikeAMenulist{ -webkit-appearance:menulist; -moz-appearance:menulist; }
经过“appearance”的属性值设置后，段落P的默认风格就被改变了，如图所示：
5、CSS渐变色
CSS 渐变 是在 CSS3 Image Module 中新增加的 类型. 使用 CSS 渐变可以在两种颜色间制造出平滑的渐变效果. 用它代替图片，可以加快页面的载入时间、减小带宽占用。同时，因为渐变是由浏览器直接生成的，它在页面缩放时的效果比图片更好，因此你可以更加灵活、便捷的调整页面布局。
浏览器支持两种类型的渐变：线性渐变 (linear)，通过 linear-gradient 函数定义，以及 径向渐变 (radial)，通过 radial-gradient 函数定义.
这里是一个线性渐变从中间（水平方向）和顶部（垂直方向）开始，起始于蓝色，过渡到白色.
/* 旧语法，带前缀并且已经废弃，以支持老版本的浏览器 */ background: -prefix-linear-zgradient(top, blue, white); /* 新语法，不带前缀，以支持标准兼容的浏览器（Opera 12.1， IE 10， Firefox 16， Chrome 26， Safari 6.1） */ background: linear-gradient(to bottom, blue, white);
改变相同的渐变从左到右运行:
/* 旧语法，带前缀并且已经废弃，以支持老版本的浏览器 */ background: -prefix-linear-gradient(left, blue, white); /* 新语法，不带前缀，以支持标准兼容的浏览器（Opera 12.1， IE 10， Firefox 16， Chrome 26， Safari 6.1） */ background: linear-gradient(to right, blue, white);
使用角度：如果你不指定一个角度，这个将自动基于给定的方向。如果你更喜欢控制渐变的方向，你可以设置特定的角度。
这个使用的是这样的CSS样式：
background: linear-gradient(70deg, black, white);
渐变是支持透明度的。 举个例子，当你叠加多个背景层，你可以使用这个在背景图片上来创建淡入淡出的效果 :
/* 旧语法，带前缀并且已经废弃，以支持老版本的浏览器 */ background: -prefix-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,1)), url(http://foo.com/image.jpg); /* 新语法，不带前缀，以支持标准兼容的浏览器（Opera 12.1， IE 10， Firefox 16， Chrome 26， Safari 6.1） */ background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1)), url(http://foo.com/image.jpg);
背景是由第一个指定的背景在最上面, 然后接下来的背景层叠起来. 通过这种方式的层叠，你像上面一样创造非常有创造力的效果。
使用CSS渐变：https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Using_CSS_gradients
6、CSS选择器
a,b 选择所有a元素和所有b元素。
a b 选择a元素内部的所有b元素。
a>b 选择父元素为a元素的所有b元素。
a+b 选择紧接在a元素之后的所有b元素。
[target] 选择带有 target 属性所有元素。
[target=_blank] 选择 target="_blank" 的所有元素。
[title~=flower] 选择 title 属性包含单词 “flower” 的所有元素。
[lang|=en] 选择 lang 属性值以 “en” 开头的所有元素。
a:link 选择所有未被访问的链接。
a:visited 选择所有已被访问的链接。
input:focus 选择获得焦点的 input 元素。
a:first-letter 选择每个a元素的首字母。
a:first-child 选择属于父元素的第一个子元素的每个a元素。
a[src^=“https”] 选择其 src 属性值以 “https” 开头的每个 a元素
p:only-child 选择属于其父元素的唯一子元素的每个p元素。
:root 选择文档的根元素。
input:checked 选择每个被选中的input元素。
::after 设置某一个对象后的内容
::before 设置某一个对象之前的内容
7、autofocus
使用autofocus属性可用于所有类型的input属性，当页面完成时，可自动获取焦点。每个页面只允许出现一个有autofocus属性的input元素。如果指定多个input为此属性，则相当于为制定该行为。
<input type="text" name="key" autofocus>
8、autocomplete属性
IE早期板门就已经支持autocomplate属性。autocomplete可用于form元素和输入型的input元素，用于表单的自动完成。autocomplete会把输入的历史记录下来，当再次输入的时候，会把输入的历史记录显示在一个下拉列表中，以实现自动完成驶入。
<input type="text" id="uname" name="uname" autocomplete="on">
9、require属性
一旦在某个表单form元素标签中添加了required属性，则该表单元素的值不能为空，否则无法提交。
10、 remove与empty
empty()是只移除了 指定元素中的所有子节点，拿$(“p”).empty()来说，他只是把
dsfsd
中的文本给移除了，而留下 了,仍保留其在dom中所占的位置。
remove([expr])则是把其从dom中删除，而不会保留其所占的位置。
例:
<p>Hello</p> World <p>welcome</p>
执行$(“p”).empty()其结果是
<p></p> World <p></p>
执行$(“p”).remove()其结果是
World
11、在页面中添加元素
append()、appendTo()：在结尾插入内容
prepend()、prependTo():在开头插入内容
after()：在被选元素后插入指定内容
before():在被选元素前插入指定元素
12、jquery中html、val、text的区别
.html()用为读取和修改元素的HTML标签 对应js中的innerHTML
.html()是用来读取元素的HTML内容（包括其Html标签）,.html()方法使用在多个元素上时，只读取第一个元素
.text()用来读取或修改元素的纯文本内容 对应js中的innerText
.text()用来读取元素的纯文本内容，包括其后代元素;.text()方法不能使用在表单元素上
.val()用来读取或修改表单元素的value值
.val()是用来读取表单元素的”value”值,.val()只能使用在表单元素上
13、值得分享的最全面Bootstrap快速人门案例
14、checkbox实现
<input type="checkbox" id="SX" value="SX" v-model="checkedNames" /> <label for="SX">SX</
如果不添加
后面的label，则会导致checkbox按钮后面没有文字说明。点击checkbox后取的值是value的属性。
15、select默认文字显示：
<option value="" disabled selected style='display: none;'>severity</option>
