HTML和CSS基础部分

1.请描述一下 cookies，sessionStorage 和 localStorage 的区别？

sessionStorag中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。

localStorage 用于持久化的本地存储，除非主动删除数据，否则 数据是永远不会过期的。

cookie 的大小是受限的，并且每次你请求一个新的页面的时候 Cookie 都会被发送过去，这样无形中浪费了带宽，另外 cookie 还需要指定作用域，不可以跨域调用。

2.行内元素和块级元素的具体区别是什么？行内元素的padding和margin可设置吗？

块级元素(block)特性： 总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;

内联元素(inline)特性： 和相邻的内联元素在同一行;例如：input，ing，button，texterea，label

3.如何垂直居中一个元素？

#container {

display:table-cell;

text-align:center;

vertical-align:middle;

}

4.sass和less是css预处理器他是一种特殊的语法，最终编译成 CSS。

5.行内元素有哪些?块级元素有哪些?CSS 的盒模型?

块级元素：div p h1 h2 h3 h4 form ul

行内元素: a b br i span input select Css

盒模型:内容，border ,margin，padding

6. display 属性有哪些？可以做什么？

display:block 行内元素转换为块级元素

display:inline 块级元素转换为行内元素

display:inline-block 转为内联元素

7.css 优先级算法如何计算？

!important > id > class > 标

8.元素水平垂直居中的方法有哪些？如果元素不定宽高呢？

居中是一个非常基础但又是非常重要的应用场景，实现居中的方法存在很多，可以将这些方法分成两个大类：

• 居中元素（子元素）的宽高已知

• 居中元素宽高未知

实现元素水平垂直居中的方式：

• 利用定位+margin:auto

• 利用定位+margin:负值

• 利用定位+transform

• table布局

• flex布局

• grid布局

table布局

设置父元素为display:table-cell，子元素设置 display: inline-block。利用vertical和text-align可以让所有的行内块级元素水平垂直居中。

flex布局

• display: flex时，表示该容器内部的元素将按照flex进行布局

• align-items: center表示这些元素将相对于本容器水平居中

• justify-content: center也是同样的道理垂直居中

总结

内联元素居中布局

水平居中

• 行内元素可设置：text-align: center

• flex布局设置父元素：display: flex; justify-content: center

垂直居中

• 单行文本父元素确认高度：height === line-height

• 多行文本父元素确认高度：display: table-cell; vertical-align: middle

块级元素居中布局

水平居中

• 定宽: margin: 0 auto

• 绝对定位+left:50%+margin:负自身一半

垂直居中

• position: absolute设置left、top、margin-left、margin-top(定高)

• display: table-cell

• transform: translate(x, y)

• flex(不定高，不定宽)

• grid(不定高，不定宽)，兼容性相对比较差

9.说说em/px/rem/vh/vw区别?

在css单位中，可以分为长度单位、绝对单位，如下表所指示

CSS单位
相对长度单位	em、ex、ch、rem、vw、vh、vmin、vmax、%
绝对长度单位	cm、mm、in、px、pt、pc

这里我们主要讲述px、em、rem、vh、vw

px

px，表示像素，所谓像素就是呈现在我们显示器上的一个个小点，每个像素点都是大小等同的，所以像素为计量单位被分在了绝对长度单位中

有些人会把px认为是相对长度，原因在于在移动端中存在设备像素比，px实际显示的大小是不确定的

这里之所以认为px为绝对单位，在于px的大小和元素的其他属性无关

em

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸（1em = 16px）

为了简化 font-size 的换算，我们需要在css中的 body 选择器中声明font-size= 62.5%，这就使 em 值变为 16px*62.5% = 10px

这样 12px = 1.2em, 10px = 1em, 也就是说只需要将你的原来的 px 数值除以 10，然后换上 em 作为单位就行了

特点：

• em 的值并不是固定的

• em 会继承父级元素的字体大小

• em 是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸

• 任意浏览器的默认字体高都是 16px

举个例子

    我是14px=1.4rem我是12px=1.2rem

样式为

这时候.big元素的font-size为14px，而.small元素的font-size为12px

rem

rem，相对单位，相对的只是HTML根元素font-size的值

同理，如果想要简化font-size的转化，我们可以在根元素html中加入font-size: 62.5%

html{font-size: 62.5%;}/*  公式16px*62.5%=10px  */

这样页面中1rem=10px、1.2rem=12px、1.4rem=14px、1.6rem=16px;使得视觉、使用、书写都得到了极大的帮助

特点：

• rem单位可谓集相对大小和绝对大小的优点于一身

• 和em不同的是rem总是相对于根元素，而不像em一样使用级联的方式来计算尺寸

vh、vw

vw ，就是根据窗口的宽度，分成100等份，100vw就表示满宽，50vw就表示一半宽。（vw 始终是针对窗口的宽），同理，vh则为窗口的高度

这里的窗口分成几种情况：

• 在桌面端，指的是浏览器的可视区域

• 移动端指的就是布局视口

像vw、vh，比较容易混淆的一个单位是%，不过百分比宽泛的讲是相对于父元素：

• 对于普通定位元素就是我们理解的父元素

• 对于position: absolute;的元素是相对于已定位的父元素

• 对于position: fixed;的元素是相对于 ViewPort（可视窗口）

总结

px：绝对单位，页面按精确像素展示

em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算，整个页面内1em不是一个固定的值

rem：相对单位，可理解为root em, 相对根节点html的字体大小来计算

vh、vw：主要用于页面视口大小布局，在页面布局上更加方便简单

10.什么是响应式设计？响应式设计的基本原理是什么？如何做？

响应式网站设计（Responsive Web design）是一种网络页面设计布局，页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整

实现方式

响应式设计的基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理，为了处理移动端，页面头部必须有meta声明viewport

属性对应如下：
 
   
 
    
width=device-width: 是自适应手机屏幕的尺寸宽度
 
   
 
   
 
    
maximum-scale:是缩放比例的最大值
 
   
 
   
 
    
inital-scale:是缩放的初始化
 
   
 
   
 
    
user-scalable:是用户的可以缩放的操作
 
   
 
   
实现响应式布局的方式有如下：
 
   
 
    
媒体查询
 
   
 
   
 
    
百分比
 
   
 
   
 
    
vw/vh
 
   
 
   
 
    
rem
 
   
 
   
媒体查询
 
   
CSS3 中的增加了更多的媒体查询，就像if条件表达式一样，我们可以设置不同类型的媒体条件，并根据对应的条件，给相应符合条件的媒体调用相对应的样式表
 
   
使用@Media查询，可以针对不同的媒体类型定义不同的样式，如：
 
   
@media screen and(max-width: 1920px){ ... }
 
   
当视口在375px - 600px之间，设置特定字体大小18px
 
   
@media screen (min-width: 375px)and(max-width: 600px){body{font-size: 18px;}}
 
   
通过媒体查询，可以通过给不同分辨率的设备编写不同的样式来实现响应式的布局，比如我们为不同分辨率的屏幕，设置不同的背景图片
 
   
比如给小屏幕手机设置@2x图，为大屏幕手机设置@3x图，通过媒体查询就能很方便的实现
 
   
百分比
 
   
通过百分比单位 " % " 来实现响应式的效果
 
   
比如当浏览器的宽度或者高度发生变化时，通过百分比单位，可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果
 
   
height、width属性的百分比依托于父标签的宽高，但是其他盒子属性则不完全依赖父元素：
 
   
 
    
子元素的top/left和bottom/right如果设置百分比，则相对于直接非static定位(默认定位)的父元素的高度/宽度
 
   
 
   
 
    
子元素的padding如果设置百分比，不论是垂直方向或者是水平方向，都相对于直接父亲元素的width，而与父元素的height无关。
 
   
 
   
 
    
子元素的margin如果设置成百分比，不论是垂直方向还是水平方向，都相对于直接父元素的width
 
   
 
   
 
    
border-radius不一样，如果设置border-radius为百分比，则是相对于自身的宽度
 
   
 
   
可以看到每个属性都使用百分比，会照成布局的复杂度，所以不建议使用百分比来实现响应式
 
   
vw/vh
 
   
vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度。 任意层级元素，在使用vw单位的情况下，1vw都等于视图宽度的百分之一
 
   
与百分比布局很相似，在以前文章提过与%的区别，这里就不再展开述说
 
   
rem
 
   
在以前也讲到，rem是相对于根元素html的font-size属性，默认情况下浏览器字体大小为16px，此时1rem = 16px
 
   
可以利用前面提到的媒体查询，针对不同设备分辨率改变font-size的值，如下：
 
   
@media screen and(max-width: 414px){html{font-size: 18px
  }}@media screen and(max-width: 375px){html{font-size: 16px
  }}@media screen and(max-width: 320px){html{font-size: 12px
  }}
 
   
为了更准确监听设备可视窗口变化，我们可以在css之前插入script标签，内容如下：
 
   
//动态为根元素设置字体大小functioninit(){// 获取屏幕宽度var width = document.documentElement.clientWidth
    // 设置根元素字体大小。此时为宽的10等分
    document.documentElement.style.fontSize = width /10+'px'}//首次加载应用，设置一次init()// 监听手机旋转的事件的时机，重新设置
window.addEventListener('orientationchange', init)// 监听手机窗口变化，重新设置
window.addEventListener('resize', init)
 
   
无论设备可视窗口如何变化，始终设置rem为width的1/10，实现了百分比布局
 
   
除此之外，我们还可以利用主流UI框架，如：element ui、antd提供的栅格布局实现响应式
 
   
小结
 
   
响应式设计实现通常会从以下几方面思考：
 
   
 
    
弹性盒子（包括图片、表格、视频）和媒体查询等技术
 
   
 
   
 
    
使用百分比布局创建流式布局的弹性UI，同时使用媒体查询限制元素的尺寸和内容变更范围
 
   
 
   
 
    
使用相对单位使得内容自适应调节
 
   
 
   
 
    
选择断点，针对不同断点实现不同布局和内容展示
 
   
 
   
总结
 
   
响应式布局优点可以看到：
 
   
 
    
面对不同分辨率设备灵活性强
 
   
 
   
 
    
能够快捷解决多设备显示适应问题
 
   
 
   
缺点：
 
   
 
    
仅适用布局、信息、框架并不复杂的部门类型网站
 
   
 
   
 
    
兼容各种设备工作量大，效率低下
 
   
 
   
 
    
代码累赘，会出现隐藏无用的元素，加载时间加长
 
   
 
   
 
    
其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果
 
   
 
   
 
    
一定程度上改变了网站原有的布局结构，会出现用户混淆的情况
 
   
 
   
11.css选择器有哪些？优先级？哪些属性可以继承？
 
   
选择器
 
   
CSS选择器是CSS规则的第一部分
 
   
它是元素和其他部分组合起来告诉浏览器哪个HTML元素应当是被选为应用规则中的CSS属性值的方式
 
   
选择器所选择的元素，叫做“选择器的对象”
 
   
我们从一个Html结构开始