1. 简述一下你对HTML语义化的理解?
1.html语义化让页面的内容结构化,结构更清晰,便于对浏览器、搜索引擎解析;即使在没有样式CSS情况下也以一种文档格式显示,并且是容易阅读的;
2.搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重,利于SEO;
3.使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解
2. 移动端和PC端有什么区别?
1. 界面布局: 移动端屏幕相对窄小,一般是单列显示,最多也只能是双列+响应式,但是PC端的屏幕大,布局可以更加灵活。
2. 使用习惯:移动端的操作尺度比较大,单击误差大,所以按钮、链接等元素比较设计的大一些。而PC端的操作尺度比较小,用鼠标单击是一件比较准确的事情,所以在设计按钮或者链接等样式时可以稍微小一些。
3. 网络速度:手机的网络一般是2G\3G\4G\WIFI等,网页的加载速度会影响用户的体验,需要消耗用户的流量,而PC的网络一般是连接宽带或者WIFI,PC端的用户一般不会考虑页面消耗的流量。
4. 技术层面:PC应用更关注的是后台、大数据、算法类的,而移动端更关注的是如何更好地交互和体验。
3. 移动端 1px 的常见解决方案
1、使用border-image实现
2、使用background-image实现
3、使用box-shadow模拟边框
4、伪元素+transform
5、用JS计算rem基准值和viewport缩放值
4. px、em、rem分别是什么?有什么区别?
px表示“绝对尺寸”,实际上就是css中定义的像素,利用px设置字体大小及元素的宽高等,比较稳定和精确。
em表示相对尺寸,其相对于当前对象内文本的字体大小,使用em可以较好的响应设备屏幕尺寸的变化。
rem也表示相对尺寸,其参考对象为根元素的字体大小,因此只需要确定一个字体大小就行。
5 .设置 p 的 font-size:10rem,当用户重置或拖曳浏览器窗口时,文本大小是否会也随着变化?
不会。rem 是以 html 根元素中 font-size 的大小为基准的相对度量单位,文本的大小不会随着窗口的大小改变而改变。
6. 谈谈你是如何做移动端适配的
1.视口标签设置<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0,maximum-sacle=1.0,user-scalable=no,width=device-width />
2.图片采用2倍图和三倍图加媒体查询
3.媒体查询
4.动态rem+vw方案
7. 说出移动端的几种布局方案,至少说出3种
流式布局(百分比布局)
flex弹性布局
rem适配布局
响应式布局
8. 什么是响应式设计?响应式设计的基本原理是什么?
响应式网站设计是一个网站能够兼容多个终端,而不是为每一个终端做一个特定的版本。
基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。 页面头部必须有meta声明的viewport:<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
9. 响应式布局有哪些实现方式?【考核知识点:响应式布局】
1.百分比布局
2.flex布局
3.rem+media(媒体查询)
4.vw+vh
5.使用一些框架(bootstrap)
10. 为什么使用bootstrap?它包含的哪些内容?
优势:
1.移动设备优先
2.容易上手
3.响应式设计
内容:
1.基本结构
2.CSS
3.组件
4.Js 插件
11. 请解释一下 CSS3 的 Flexbox(弹性盒布局模型)以及适用场景?
(1) 一个用于页面布局的全新 CSS3 功能,Flexbox 可以把列表放在同一个方向(从上到下排列,从左到右),并让列表能延伸到占用可用的空间。
(2) 较为复杂的布局还可以通过嵌套一个伸缩容器(flex container)来实现。
(3) 采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。
(4) 它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"。
(5) 常规布局是基于块和内联流方向,而 Flex 布局是基于 flex-flow 流可以很方便的用来做局中,能对不同屏幕大小自适应。
(6) 在布局上有了比以前更加灵活的空间。
12. 传统盒模型与弹性盒模型的优缺点?
区别:
1. 普通盒模型中的子元素分配其父元素的空间,而弹性盒模型中的子元素分配其父元素的可用空间。
2. 普通盒模型主要针对块级元素和行级元素的布局,而弹性盒是建立在弹性流上,也就是元素可以随着可视区域的变化而呈现流式布局。
弹性盒的优点:
能为盒模型提供最大的灵活性,即使是不定宽高的元素依然好用,可以简便、完整、响应式地实现各种页面布局。
13. 盒子模型的解析模式是什么?如何改变?
用来控制元素的盒子模型的解析模式,默认为content-box。
context-box:设置元素的 height/width 属性指的是content部分的高/宽;
border-box:设置元素的height/width属性指的是border + padding + content部分的高/宽;
14. CSS选择器有哪些?优先级从大到小排序
选择器:
id选择器( # myid): id选择器只能选择页面中的唯一一个ID
类选择器(.myclassname): 类选择器会选择页面中class名为指定名的所有标签,组成一个类数组
标签选择器(div, h1, p): 常见,最基本的选择器
相邻选择器(h1+p): 选择一个指定元素的兄弟元素
子选择器(ul>li): 使用大于号 “>”指定
后代选择器(li a): li为父元素,a为子元素
通配符选择器(*): 用来选择所有元素,或者某个元素的所有子元素
属性选择器(input[type = "text"]): 选择input type属性为text的元素
伪类选择器(a:hover, li:nth-child)
优先级:
!important > 内联 > ID选择器 > class选择器 > 标签选择器
15. 页面导入样式,使用link和@import有什么区别?
从属关系:link是html标签,@import是css提供的.
加载差异:页面加载时,link会同时加载;而@import引入的css会在页面加载完成后加载.
兼容性:link没有兼容问题,@import不兼容ie5以下的浏览器.
可操作性:link可以通过js操作dom插入link标签改变样式,而@import不能
16. 什么是外边距重叠?重叠的结果是什么
(1) 外边距重叠就是 margin-collapse。 在 CSS 当中,相邻的两个盒子(可能是兄弟关系也可能是祖先关系)的外边距可以结合成一 个单独的外边距。这种合并外边距的方式被称为折叠,并且因而所结合成的外边距称为折叠 外边距。
(2) 折叠结果遵循下列计算规则: 两个相邻的外边距都是正数时,折叠结果是它们两者之间较大的值。 两个相邻的外边距都是负数时,折叠结果是两者绝对值的较大值。 两个外边距一正一负时,折叠结果是两者的相加的和。
17. 浮动会带来哪些问题?清除浮动的方式有哪些?
浮动带来的问题:
1. 父元素的高度无法被撑开,影响与父元素同级的元素
2. 与浮动元素同级的非浮动元素(内联元素)会跟随其后
3. 若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示的结构.
清除浮动的方式:
1. 父级div定义height(记住)
2. 结尾处加空div标签clear:both(记住)
3. 父级div定义伪类:after、before(记住)
4. 父级div定义overflow:hidden(记住)
5. 父级div定义overflow:auto。
6. 父级div也浮动,需要定义宽度。
7. 父级div定义display:table。
8. 结尾处加br标签clear:both(记住)
18. 什么叫优雅降级和渐进增强
渐进增强:针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级:一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。
19. 什么是CSS预处理?
CSS预处理器用一种专门的编程语言,进行Web页面样式设计,然后再编译成正常的CSS文件,以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性,无需考虑浏览器的兼容性问题
20. SASS是什么?为什么要使用SASS?
sass都是 CSS 预处理器,最终编译成 CSS;
使用sass的好处:
结构清晰,便于扩展
可以方便地屏蔽浏览器私有语法差异
可以轻松实现多重继承
完全兼容 CSS 代码,可以方便地应用到老项目中