web前端知识点记录

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>