前端知识点总结1

HTML

1、如何让一个元素在窗口消失（5种）

1、最常用之——display: none;
给元素设置display: none;后，元素会从页面中彻底消失，它原本占据的空间会被其他元素占有，会造成浏览器的回流与重绘。

2、最常用之——visibility: hidden;
给元素设置visibility: hidden;后，元素会从页面中消失，它原本占据的空间会被保留，会造成浏览器的重绘，适用于希望元素隐藏又不影响页面布局的场景。

3、隐身大法——opacity: 0;
给元素设置opacity: 0;后，元素变成透明的我们肉眼就看不到了，所以原本占据的空间还在
opacity：设置 div 元素的不透明级别

4、设置盒模型属性为0
将height、width、padding、border、margin等盒模型属性的值全设为0，如果元素內还有子元素或内容，还应overflow: hidden;来隐藏子元素。

      .box1 {
   
                width: 0;
                height: 0;
                padding: 0;
                border: 0;
                margin: 0;
                overflow: hidden;
        }

5、设置元素绝对定位与top、right、bottom、left等将元素移出屏幕

.box1 {
   
        position: absolute;
        left: 100%;
}

或:
.box1 {
   
        position: absolute;
        top: 9999px;
}

v-if: ==display：none
v-show:==visibility:hidden

2、讲出flex常用场景，以及flex 1 做了什么

弹性布局，一个容器中需要有规则得排列对齐得都可以用.
flex布局是一种一维布局模型，一次只能处理一个维度（一行或者一列）上的元素布局，flex布局大部分的属性都是作用于主轴的，在交叉轴上很多时候只能被动地变化。

常用场景
1、在网页中当遇到需要将父元素按照奇数进行等分，比如携程中红色区域是将父元素3等分。如果用流式布局那么就需要设置33。33%。如果用弹性布局只需要给每一个子元素设置一个属性flex:1即可快速实现。

2、当我们需要页面中多个子元素快速实现在父元素中以左右距离适中显示的时候，这个时候我们不需要设置任何的px值，只需要给元素设置justify-content:space-around就可以实现。

flex总结

flex ：1===flex：1 1 auto

第一个参数表示: flex-grow 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
第二个参数表示: flex-shrink 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
第三个参数表示: flex-basis给上面两个属性分配多余空间之前, 计算项目是否有多余空间, 默认值为 auto, 即项目本身的大小

3、meta标签怎么使用

meta标签是用来描述一个HTML网页文档的属性，比如该网页的作者，日期，网页的关键字，刷新，网页等级设定等等，是文档中的最基本的元信息。

meta标签可以分为两大部分：

• http-equiv： http标题信息
• name：页面描述信息

http-equiv 类似于http的头部协议，作用是回应给浏览器一些有用的信息来帮助正确精确的显示网页内容。常用的http-equiv 类型有：Content-Type 和 Content-Language(显示字符集的设定)。

指定HTML页面使用的字符编码

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

刷新页面

meta http-equiv="Refresh" content="5; url=http://www.cnblogs.com" />

这段代码可以用于设定网页的到期时间，一旦过期必须到服务器上重新调用（GMT时间格式）。

<meta http-equiv="Expires" content="Mon,1,May 2015 00:00:00 GMT" />

这段代码可以强制页面在当前窗口中以独立页面显示，防止自己的网页被别人当成一个frame调用。Content选项：_blank、_top、_self、_parent

<meta http-equiv="windows-Target" content="_top" />

Page-Enter、Page-Exit是页面被载入和调出时的一些特效。相应的还有：Site-Exit和Site-Enter离开和进入网站。content表示的是网页过渡的效果设置，本例中的RevealTrans是动态滤镜的一种，可以用于进入和退出的效果，Duration表示滤镜特效的持续时间(单位：s), Transition:表示滤镜的类型，取值为0到23。

<Meta http-equiv="Page-Enter" Content="revealTrans(Duration=0.5,tansition=10" />
 <Meta http-equiv="Page-Exit" Content="revealTrans(Duration=0.5,transition=12" />

name，常见的有Keyword，Description，Robots等

description中的content=" ", 是对网页概况的介绍，这些信息可能会出现在搜索结果中，因此要尽量的避免和网页内容不相关的描述。

<meta name="description" content="这是我的一篇博客" />

Keywords和description类似，也是用来描述一个网页的属性的，只不过列出的是关键词，而不是网页的摘要。各个关键词之间用逗号(英文逗号)隔开。

<meta name="keywords" content="博客,meta标签" />

很多搜索引擎都是通过放出robot/spider搜索网站，robot/spider自动在www上搜索，当发现新的网站后，这些robot/spider会检索页面中的keywords和descript，然后加入到自己的数据库中。而Robots用来告诉机器人哪些页面需要索引，哪些页面不需要，content的参数有：all, none, index, noindex, follow, nofollow 。 默认情况下是all。

All:文件将被检索，而且页面的链接可以被查询。
none: 页面不被检索，页面的链接不可以被查询。
index: 文件将被检索，让robot/spider登录。
follow: 页面的链接可以被查询。
noindex:阻止页面被列入索引，页面的链接可以被查询（不让robot/spider登录）。
nofollow: 阻止对页面中任何链接进行索引 （注，这不同于超级链接上的nofollow属性，那个属性只是组织索引单独的链接。

<meta name="Robots" content="All" />

4、 说说你常用的语义化标签

< title></title>：简短、描述性、唯一（提升搜索引擎排名）。
<hn></hn>：h1~h6分级标题，用于创建页面信息的层级关系。

 <header></header>：页眉通常包括网站标志、主导航、全站链接以及搜索框。
 
<nav></nav>：标记导航，仅对文档中重要的链接群使用

<main></main>：页面主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能。

<article></article>：包含像报纸一样的内容= =||是这么理解的，表示文档、页面、应用或一个独立的容器。
<section></section>：具有相似主题的一组内容，比如网站的主页可以分成介绍、新闻条目、联系信息等条块。


<aside></aside>：指定附注栏，包括引述、侧栏、指向文章的一组链接、广告、友情链接、相关产品列表等。

<footer></footer>：页脚，只有当父级是body时，才是整个页面的页脚。

         

作用：
1 提升可访问性；

2 SEO；

3 结构清晰，利于维护；

5、input属性有哪些

先来了解一下input标签的几个基本控制属性。

name属性：元素的名称，也就是name的值代表当前input元素的名字；
value属性：元素的默认值
1）当input type=“text”、“password”、"hidden"时，定义输入字段的初始值；
2）当input type=“button”、“reset”、"submit"时，定义按钮上的显示的文本；
3）当input type=“checkbox”、“radio”、"image"时，定义与输入相关联的值；
注意：input type="checkbox"和input type="radio"中必须设置value属性；value属性无法与input type="file"一通使用。
style属性：为input元素设定CSS样式；
width属性：当input type="image"时，通过width属性控制元素的宽度；
height属性：当input type="image"时，通过height属性控制元素的高度；
maxlength属性：定义input元素中可输入的最长字符数。

input type属性与代码详解

type=“text”：创建单行文本输入框
type=“password”：密码输入框
type=“radio”：单选按钮
type=“checkbox”：复选框
type=“button”：普通按钮
type=“submit”：提交按钮
type=“reset”：重置按钮
type=“image”：图像按钮
type=“hidden”：隐藏域
隐藏域在页面上不显示，用来存储与传递表单的值，当用户提交表单时，隐藏域的内容会一起提交给处理程序。

type=“file”：文件域

HTML5新增input type属性

type=“url”：输入URL字段

type=“tel”：用来输入电话号码

type=“search”：搜索字符串

type=“email”：改控件用来输入"email"地址，若用户输入非email格式，那么再支持HTML5的浏览器中提交改表单时，会提示为不是合法格式。

type=“color”：颜色选择器，使用color属性能直接调用系统的颜色调节窗口，默认为黑色
type=“date”：日期控件
type=“month” 年月控件

两种盒子模型说一下，你平时用那个？为什么？

w3c的盒子模型： padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding ) 此属性表现为标准模式下的盒模型。

IE的盒子模型： padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width ) 。

ps：一般都使用标准的w3c盒子模型，如果需要使用IE的盒子模型，可以使用box-sizing属性进行修改。

w3c的盒子模型

.test1{
   
	box-sizing:content-box;
	width:200px;
	padding:10px;
	border:15px solid #eee;
}
IE的盒子模型
.test1{
   
	box-sizing:border-box;
	width:200px;
	padding:10px;
	border:15px solid #eee;
}

W3C盒模型是与IE盒模型的区别就是对宽高的定义不同。
W3C认为：宽高是内容区的宽度（只包含节点显示的具体内容）
IE认为：宽高是显示效果的实际效果（包含节点的全部内容）

6、BFC是什么？

BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。

BFC的布局规则

内部的Box会在垂直方向，一个接一个地放置。

Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。

每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

BFC的区域不会与float box重叠。

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

计算BFC的高度时，浮动元素也参与计算。

如何创建BFC

1、float的值不是none。
2、position的值不是static或者relative。
3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4、overflow的值不是visible

BFC的作用

1.利用BFC避免margin重叠。
2.自适应两栏布局
3.清除浮动。

7、css选择器的优先级

总结排序：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

同一级别
同一级别中后写的会覆盖先写的样式

8、清除浮动的方法

标准流：盒子会各占整行位置。子盒子若是标准流，父盒子虽然没有高度，但是会撑开父盒子高度。

浮动：盒子浮了起来，不会占据原来的位置，若父盒子没有定义高度，则不会撑开父盒子，父盒 子高度为0。（浮动可以让多个块级元素在一行显示，且块与块之间没有空隙，但要注意给父盒子清除浮动，否则父盒子不会被撑开）。

为什么要清除浮动呢？清除浮动的本质是什么？
　　清除浮动主要是为了解决父级元素因为子级浮动引起的内部高度为0的问题。

1. 额外标签法：给谁清除浮动，就在其后额外添加一个空白标签 。
   优点：通俗易懂，书写方便.
   缺点：添加许多无意义的标签，结构化比较差。
   
   
2. 父级添加overflow方法：可以通过触发BFC的方式，实现清楚浮动效果。
   优点：代码简洁（慎重使用，若该父盒子里还有position定位会引起麻烦）
   缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。
3. 使用after伪元素清除浮动：：after方式为空元素的升级版，好处是不用单独加标签了。（较常用）
   优点：符合闭合浮动思想，结构语义化正确
   缺点：由于IE6-7不支持：after，使用zoom：1，触发hasLayout。

4. 使用before和after双伪元素清除浮动：（较常用）

9、什么是文档流

文档流
将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。 只有三种情况会使得元素脱离文档流，分别是：浮动、绝对定位和固定定位。

10、position的属性有哪些，各有什么特点

position 是CSS用来为HTML文档的一些元素提供定位的属性,定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。 常规取值： 1.static(静态） 2.Relative(相对） 3.Absolute(绝对) 4.fixed(固定)

STATIC(静态）
HTML元素的默认值，不受top、bottom、left、right属性影响，元素出现在正常的文档流中

RELATIVE(相对） 相对定位,
特点：不脱离文档流的布局，受top、bottom、left、right属性影响,只改变自身的位置，在文档流原先的位置遗留空白区域。定位的起始位置为此元素原先在文档流的位置。

ABSOLUTE(绝对) 绝对定位
特点:脱离文档流的布局，遗留下来的空间由后面的元素填充。定位的起始位置为最近的父元素(position不为static)，否则为html文档本身。

FIXED(固定) 固定定位, 特点：类似于absolute，但不随着滚动条的移动而改变位置。元素的位置相对于浏览器窗口是固定位置。

STICKY(定位) sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位.position: sticky;
基于用户的滚动位置来定位。 粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed
定位之间切换。 它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像

position:fixed;，它会固定在目标位置。 元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。 这个特定阈值指的是
top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left
四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

absolute与fixed有哪些区别？

fixed与absolute最大的区别在于：absolute的”根元素“是可以被设置的，而fixed则其”根元素“固定为浏览器窗口。即当你滚动网页，其元素与浏览器窗口之间的距离是恒定不变的。

11、calc函数有什么注意事项

calc()能做什么？
calc()能让你给元素的做计算，你可以给一个div元素，使用百分比、em、px和rem单位值计算出其宽度或者高度，比如说“width:calc(50% + 2em)”，这样一来你就不用考虑元素DIV的宽度值到底是多少，而把这个烦人的任务交由浏览器去计算

calc()的运算规则

• 使用“+”、“-”、“*” 和 “/”四则运算；

• 可以使用百分比、px、em、rem等单位；

• 可以混合使用各种单位进行计算；

• 表达式中有“+”和“-”时，其前后必须要有空格，如"widht: calc(12%+5em)"这种没有空格的写法是错误的；

• 表达式中有“*”和“/”时，其前后可以没有空格，但建议留有空格。

浏览器的兼容性

浏览器对calc()的兼容性还算不错，在IE9+、FF4.0+、Chrome19+、Safari6+都得到较好支持，同样需要在其前面加上各浏览器厂商的识别符，不过可惜的是，移动端的浏览器还没仅有“firefox for android 14.0”支持，其他的全军覆没。

大家在实际使用时，同样需要添加浏览器的前缀

12、transtion和animate的区别

1.transform

它其实只是一个静态属性，需要配合transition和animation才能展现出动画效果。你可以把它看成是跟left、top等属性一样，只是一个静态样式而已。

2.transition
　它属性是一个简单的动画属性，非常简单非常容易用。可以说它是animation的简化版本，是给普通做简单网页特效用的。

3.Animation
动画属性

transition是过度属性，强调过度，他的实现需要触发一个事件（比如鼠标移动上去，焦点，点击等）才执行动画。它类似于flash的补间动画，设置一个开始关键帧，一个结束关键帧。

animation是动画属性，他的实现不需要触发事件，设定好时间之后可以自己执行，且可以循环一个动画。他也类似于flash的补间动画，但是他可以设置多个关键帧（用@keyframe定义）完成动画。

13,画一个三角形让其围绕一点转动

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>

<title></title>
<style>
.a{
   
    width: 0;
    height: 0;
    border-left:200px solid transparent ;
    border-bottom: 200px solid transparent;
    border-right