前端知识点梳理
HTML+CSS部分
1. 怎么将元素水平垂直居中
- 使用css方法父盒子设置
.father{ 父元素
background-color:#222;
width: 600px;
height: 600px;
display: table-cell; 此元素会作为一个表格单元格显示（类似 <td> </th>)
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中，就能避免外边距折叠
<div class="container">
<p>Sibling 1</p>
<p>Sibling 2</p>
<div class="newBFC">
<p>Sibling 3</p>
</div>
</div>
对应的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能包含浮动，也能解决容器高度不会被撑开的问题。
<div class="container">
<div>Sibling</div>
<div>Sibling</div>
</div>
.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 class="fa1" style="float: left; width: 300px;height: 300px;">
浮动元素
</div>
<!-- 2使用css3的属性 clear:both; -->
<div style="clear: both;">
</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元素仅仅是视觉上看不到（完全透明），而它所占据的空间位置仍然存在，也就是说他仍具高度，宽度等属性值。
