前端知识点梳理
HTML+CSS部分
1. 怎么将元素水平垂直居中
使用css方法父盒子设置
.father{ 父元素
background-color:#222;
width: 600px;
height: 600px;
display: table-cell; 此元素会作为一个表格单元格显示(类似
)text-align: center;
vertical-align:middle; 设置元素的垂直对齐方式，middle指将此元素放在父元素中部
}
.son{
background-color:#555;
width: 300px;
height: 300px;
display: inline-block; 准换为行内快元素
vertical-align: middle;
}
使用css3的transform
原理，向将子元素相对于夫元素进移动，然后将元素相对于自己进行移动。
那左上角来看，假如一个夫元素(10,8)，子元素(6,4)从左上角来看，先变为5,4然后变为(2,2)
.father{
background-color:#222;
width: 600px;
height: 600px;
position: relative; /*规定元素的定位类型，生成相对定位的元素(子绝父相),相对于其正常位置进行的定位*/
}
.son{
background-color:#555;
width: 300px;
height: 300px;
transform: translate(-50%,-50%); /*css3属性，向属性应用2d或3d转换，该属性允许我们对元素进行旋转，缩放，移动或倾斜。translate(x,y),将元素相对于自己的长和宽进行相应的移动*/
position: absolute; /*生成绝对定位，生成相对于static定位的第一个元素进行定位*/
top: 50%;
left: 50%;
}
2.实现元素水平居中
margin和width实现水平居中
给需要居中的元素设置宽度，然后设置margin:0 auto;
优点：简单，方便，浏览器兼容性强
缺点，需要知道当前元素的宽度。扩展性差
.son{
width:300px;
margin:0 auto;
}
inline-block 实现水平居中的方法
给子元素设display:inline-block; 将元素设置为行内快元素，然后给夫元素设置 text-align:center; 行内元素居中
优点：简单，拓展性强
缺点：需要处理inline-block的浏览器兼容性
.fater{
text-align:center;
}
.son{
display:inline-block;
}
绝对定位实现水平居中
缺点：需要知道元素的宽度。
.son{
position:absolute; /*绝对定位*/
width:300px;
left:50%;
margin-left:-150px;
}
css3的flex实现水平居中
为父元素设置 display:flex;justify-content:center;
优点：方便，快捷
缺点：兼容性差
.fater{
dispay:flex;
justify-content:center; //设置内容对齐方式为居中
}
.son{
}
css3的fit-content实现水平居中
优点：简单，方便
缺点：兼容性差
.fa5{
width: fit-content;
margin:0 auto;
}
1. position几个属性的作用？
position的常见的四个属性值：relative,absolute,fixed,static.一般都要配合left,top,right,bottom属性使用。
static:默认位置，设置static之后，他始终会处于页面流给予的位置(static会忽略top,right,left,bottom)
relative:位置设置为relation之后，相对定位，给它设置top,left,right,bottom.将会相对于它原来应该的位置发生相应的变化。
absolute:绝对定位，如果它的父元素有position属性，并且属性值为absolute或者relative时，它会依据父容器进行偏移。如果父元素没有设置position属性的话，那么偏移量将会以body为准。，
fixed:位置被设置为fixed的元素，可定为与相对于浏览器窗口的指定坐标。不论窗口是否滚动，都将固定。
设置position的元素将不会在标准流中不占位置。
3.px,em,rem的区别
px,像素，绝对单位。是相对于显示器分辨路来说的
em,是相对长度，是相对于当前对象内文本的字体尺寸，如果当前对象内字体的大小没有没设置，将会以浏览器的默认字体为准。它会继承夫级元素的字体大小，因此不是一个固定的值
rem,是css3新增的一个相对单位(root em ，跟 em)，使用rem为元素设置字体大小时，仍然是相对大小，但相对的是html跟元素。
区别：rem 和 em 单位是由浏览器基于你的设计中的字体大小计算得到的像素值。em 单位基于使用他们的元素的字体大小。rem 单位基于 html 元素的字体大小。em 单位可能受任何继承的父元素字体大小影响。rem 单位可以从浏览器字体设置中继承字体大小。
4.BFC
定义：快级上下执行文，他是一个独立的渲染区域，只有Block-level box 参与，它规定了内部的Block-level box如何布局，并且于这个区域外部毫不相干。
那些元素会生成BFC;
只要满足已上一点，将将会创建一个BFC
float 属性不为none
position为absolute或fixed
display 为inline-block, table-cell,table-caption,flex,inline-flex
overflow 不为 visible
BFC中盒子对齐
在一个BFC中，块盒与行盒(行盒由一行中所有的内联元素所组成)都会垂直的沿着其父元素的边框排列
在BFC中，每一个盒子的左外边缘(margin-left)会触碰到容器的左边缘(border-left)(对于从右到左的格式来说，则触碰到右边缘)
外边距折叠
常规流布局时，盒子都是垂直排列，两者之间的间距由各自的外边距所决定，但不是二者外边距之和
外边距折叠规则
两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值
两个外边距一正一负时，折叠结果是两者的相加的和。
利用BFC避免外边距折叠
BFC可能造成外边距折叠，也可以利用它来避免这种情况。BFC产生外边距折叠要满足一个条件：两个相邻元素要处于同一个BFC中。所以，若两个相邻元素在不同的BFC中，就能避免外边距折叠
Sibling 1
Sibling 2
Sibling 3
对应的CSS：
.container {
background-color: red;
overflow: hidden; /* creates a block formatting context */
}
p {
margin: 10px 0;
background-color: lightgreen;
}
.newBFC {
overflow: hidden; /* creates new block formatting context */
}
BFC包含浮动
如果一个没有高度或者height是auto的容器的子元素是浮动元素，则该容器的高度是不会被撑开的。我们通常会利用伪元素(:after或者:before)来解决这个问题。BFC能包含浮动，也能解决容器高度不会被撑开的问题。
.container {
overflow: hidden; /* 创建一个bfc */
background-color: green;
}
.container div {
float: left;
background-color: lightgreen;
margin: 10px;
}
5.box-sizing, transition, translate 分别是什么
box-sizing:用来指定盒模型的大小计算方式；boreder-box(从边框固定盒子大小)，content-box(从内容互动盒子大小) 两种计算方式
transition:当前元素只要“属性”发生变化的时候，可以平滑等等进行过度。
translate:通过移动改变元素的位置，有x,y,z三个属性
6.选择器的优先级？
!import>行内样式>id选择器>类选择器>标签选择器>通配符>继承
权重算法：
(0,0,0,0)==>第一个0对应的是important的个数，第二个0是对应id选择器的个数，第三个0对应类选择器的个数，第四个0对应的是标签选择器的个数，就是当前选择器的权重
比较
从第一个0开始比较，如果第一个0比较大，那么说明这个选择器的权重高，如果第一个一样，将看第二个，依次列推。
7.css3选择器有那些？
属性选择器
伪类选择器
伪元素选择器
8.iframe的作用？
用法：
ifram用于向页面中插入另外一个页面
优点：
便于修改，模块分离，
缺点：
创建速度慢
iframe 会阻塞页面的加载，
对SEO不好
9.导航栏在chrome中完好，在IE中有问题。
使用了display:flex;属性，在ie 10以下都是无效的
10.CSS3新特性有那些？
颜色：新增RGBA,HSLA模式
文字阴影(text-shadow)
边框：圆角(border-radius)边框阴影(box-shadow)
盒子模型：box-sizing
背景：bacground-size 设置图片的尺寸 background-origin 设置图片的原点
background-clip 设置背景图片的剪裁区域，以“，”分割可以设置多背景，用于自适应布局
渐变：linear-gradient,radial-gradient
过度：transition,可以实现动画
自定义动画
在css3中唯一引入的伪元素是 ::selection
媒体查询，多栏布局
border-image
2D转换：transform:translate(x,y)rotate(x,y)skew(x,y)scale(x,y)
3D转换
11.xhtml和html的区别
html是一种基本的web网页设计语言，XHTML是一个基于xml的置标语言
不同
XHTML元素必须被正确的嵌套
XHTML元素必须被关闭
标签名必须小写
XHTML文档必须要有根元素
12.css引入方式有哪些，link和@import的区别是?
内联 内嵌 外链 导入
区别 ：同事加载
link 支持使用javascript改变样式，后者不可以。
13.标签上的title于alt属性的区别是什么？
alt当图片无法加载的时候，用文字代表
title为该属性提供信息。
14.css reset的作用和用途？
reset重置浏览器的css默认样式，李兰奇的品种不同，样式不同，然后重置，然他们统一
15.css sprites，如何使用？
css精灵图，它一堆小的图片整合到一张大的图片上，减轻服务器对图拍呢的请求数量
16.清除浮动的几种方式
父级div定义height
原理：手动给父级元素定义height,就解决了父级元素无法自动获取到高度的问题，
优点：简单
缺点：只适合高度固定的布局。
结尾处加空的div标签 clear:both
原理：在浮动元素后边加一个空的div，然后利用css提供的clear:both;清除浮动。会让父级div自动获取到高度，
优点：不用确定父元素的高度
缺点，如果浮动元素过多的话，会出现太多的div
浮动元素
父级div定义伪类：after和zoom； 最适合的，兼容各种情况，可以复用
/* 伪类:after是指在.fa选择的元素后边加元素 */
.fa:after{
/* 加入元素的内容 */
content: "";
/* 将元素设置为块元素 */
display: block;
/* 将元素本身隐藏 */
visibility: hidden;
/* 设置元素的高度，如果没有内容可以不设置 */
height: 0px;
/* 清除浮动 */
clear: both;
/* 超出部分隐藏 */
overflow: hidden;
}
/* 不支持伪类的元素，使用zoom缩放属性让div远离浮动的破坏 */
.fa{
zoom: 1;
}
父元素设置overflow:hidden;可以清除浮动
缺点：超出盒子的部分会被隐藏
双伪元素法
最好用。
在要浮动的元素的前边和后边设置
.fa:before, .fa:after{
content: "";
display: block;
clear: both;
}
.fa{
zoom: 1;
}
17.z-index的工作原理及适用范围
z-index这个属性控制着元素在z轴上的表现形式。
适用范围:仅适用于定位元素，即拥有relative,absolute,fixed属性的position元素。
堆叠顺序是当前元素位于z轴上的值，数值越大说明元素的堆叠1顺序越高，越靠近屏幕。
未定义时，后来居上，未定义z-index的属性，元素的堆叠顺序基于它所在的文档树。默认情况下，后来的元素的z-index的值越大。
使用范围：
网页两侧的浮动窗口(播放器，指定按钮，广告等)
导航栏浮动值顶
隐藏div实现弹窗功能(通过设置div定位和z-index控制div的位置和出现隐藏)
18.设计一套方案，适应不同的分辨率，有那些方法可以实现？
流式布局：使用百分比像素来定义网页内容。通过设置盒子的宽度设置为百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两边填充。
响应式开发：使用css3的媒体查询(Media Query)，通过查询screen的宽度来指定某个宽度范围区间的网页布局。
超小屏幕(移动设备) 768px一下
下屏设备768px-992px;
中等屏幕 992px-1200px;
宽屏设备 1200px已上
移动web和响应式的区别
移动web:一般在已经有的pc端的网站，开发移动网站的时候，只需要单独开发移动端。只适配移动端。
响应式开发：需要一套页面，兼容各个页面，可以适配各种终端，代码复杂。
19.渐渐增强和优雅降级的区别
优雅降级认为，应该真对那些最高级，最完善的浏览器来设计网站。
渐渐增强认为，刚应该关注内容本身
20.改变元素的外边距用什么属性？改变元素的内填充用什么属性？
外边距用margin
内填充用paddding
21.在新窗口打开连接的方法是
target:_blank
22.页面布局中得而结构和表现分离，结构是什么？表现是什么？
结构是html
表现是css
23.简述对web语义化的理解
为了让浏览器更好的读懂你的代码
尽量使用语义化的标签，是程序代码简介明了，易于进行web操作和SEO，
方便团队协作开发。
24.html文件中的DOCTYPE是什么？有什么用？
DOCTYPE是一种标准调剂语言的文档类型声明，他的目的是告诉标准通用标记语言解析器，他们应该使用什么样的文档类型进行解析文档。
25.css选择器的种类有几种？css选择器的优先级是怎么定义的？
！important>行内样式>ID>类>标签>伪类>属性选择>伪对象>继承>通配符。
26.display:none;与visibility:hidden;的区别是什么？
display:node;使用该属性之后，HTML元素的宽度，高度等属性值都将“丢失”；
visibility:hidden;使用该属性之后，HTML元素仅仅是视觉上看不到(完全透明)，而它所占据的空间位置仍然存在，也就是说他仍具高度，宽度等属性值。
278
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
