目录
1.css盒子模型
外边距:margin(透明)
边框:border(有宽度的)
内边距:padding
文字/图像:文本
当指定一个css元素的宽度和高度属性时:你只是设置了内容分区域的宽度和高度。
div { width:300px; border:25px solid green; padding:25px; margin:25px; }
1.css 2D转换
2D转换就是对元素进行移动,缩放,转动,拉长,拉伸。
1.1 translate()
translate(移动X轴距离,移动Y轴距离) translate(50px,30px)
1.2 rotate(转动的度数)
-webkit-transform:rotate(30deg) rotate()方法,在一个给定度数顺时针旋转的元素。负值是允许的,这样是元素逆时针旋转。
1.3 scale()
改元素增加或者减少的大小。 transform:scale(2,3) //转变为宽度为原来的大小的2倍,高为原始高度的3倍
1.4skew()倾斜
transform:skew(30deg,40deg) 水平倾斜,垂直倾斜
2.css 3D转换
允许您使用 3D 转换来对元素进行格式化。围绕XY轴转动。
2.1 rotateX()
transform:rotateX(20deg) //围绕X轴转20度
2.2 rotateY()
transform:rotateY(30deg) //围绕Y轴
3.css过度transition
transition:width 2S; //指定添加效果的属性,效果持续的时间
4.css动画
@keyframes创建动画,需要绑定一个选择器
规定动画名称
规定动画时长
div{
animation:myfirst 5s;
}
@keyframe myfirst {
frome{baackground:red;}
to{backgroud:yellow;}
}
//请用百分比来规定变化发生的时间,
//或用关键词 "from" 和 "to",等同于 0% 和 100%。
//0% 是动画的开始,100% 是动画的完成。
5.css框大小
width属性不包含padding和margin。width只是元素的宽度。
width(宽) + padding(内边距) + border(边框) = 元素实际宽度
border框出来的大小,margin是透明的。
设置了padding盒子会变大。
box-sizing:包含了内边距和边框的大小。
设置了padding大小只是在width中分配出大小。盒子不会变大
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
box-sizing: border-box;
}
//两个盒子的大小相同
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
}
6.DOCtype 的作用?严格模式与复杂模式如何区分?有何意义
Doctype声明位于文档中的最前面,处于标签之前。目的是告知浏览器的解析器,用什么文档类型规范来解析这个文档。
标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中,页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作.
7,行内元素有哪些?块元素?空元素?
首先:CSS规范规定,每个元素都有display属性,确定该元素的类型,每个元素都有默认的display值,如div的display默认值为“block”,则为“块级”元素;span默认display属性值为“inline”,是“行内”元素。 (1)行内元素有:a b em strong span input img select(强调的语气) (2)块级元素有:h1~h6(标题元素) div(盒子) p ol ul li(列表元素) dl dt dd(表格元素) (3)常见的空元素: <br> <hr> <img> <input> <link> <meta> 鲜为人知的是: <area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>
8.页面导入样式时,使用link 和@import 的区别?
提供者不一样:link 是XHTML提供的,除了提供css的加载,还可以定义RSS、Rel连接属性;
import是css提供,仅仅是加载css。
加载方式不同:页面加载时,link同时被加载;而import引用的css会等页面加载完之后再加载,
兼容性:link 属于HTML标签无兼容性问题;import有,只有IE5以上才能被识别。
9.对浏览器内核的了解?
包括:渲染引擎和js引擎
渲染引擎:主要就是负责网页的内容,网页结构HTML等和css,以及计算显示方式在显示器上。不同的浏览器对网页语法理解不同,渲染的效果也不同。
js引擎:解析和执行js来是实现网页的动态效果。
10,HTML5有哪些新特性?移除了哪些元素?
html5新特性:
1) 增加了用于画图的canvas。
2)用于媒介回放的video和audio
3)对本地离线储存有了更好的支持,loadStorage长期本地储存数据,浏览器关闭数据不丢失。
sessionStorage浏览器关闭数据自动删除。
4)新增内容的控件:article、headle、footer、nav、section
5)新增表单控件:calender、time、date、search、URL、email
移除的元素有:
纯表现的元素:basefont 、big、center、 fonts、s 、strike、tt、u
框架元素:frame、frameset、noframes.
-
结构性元素 --> 负责上下文结构的定义
section:用于区域的章节描述
header:页面主体上的头部
footer:页面的底部(页脚),通常会标出网站的相关信息
nav:专门用于菜单导航、链接导航的元素,是 navigator 的缩写
article:用于表现一篇文章的主体内容,一般为文字集中显示的区域
级块性元素 --> 主要完成 web 页面区域的划分
aside:用于表达注记、贴士、侧栏、摘要、插入的引用等作为补充主体的内容
figure:是对多个元素进行组合并展示的元素,通常与 ficaption 联合使用
code:表示一段代码块
dialog:用于表达人与人之间的对话,该元素包含 dt 和 dd 这两个组合元素, dt 用于表示说话者,而 dd 用来表示说话内容
行内语义性元素 --> 主要完成 web 页面具体内容的引用和描述,是丰富内容展示的基础
meter:表示特定范围内的数值,可用于工资、数量、百分比等
time:表示时间值
progress:用来表示进度条,可通过对其 max 、 min 、 step 等属性进行控制,完成对进度的表示和监视
video:视频元素,用于支持和实现视频文件的直接播放,支持缓冲预载和多种视频媒体格式
audio:音频元素,用于支持和实现音频文件的直接播放,支持缓冲预载和多种\音频媒体格式
交互性元素 --> 主要用于功能性的内容表达,会有一定的内容和数据的关联,是各种事件的基础
details:用来表示一段具体的内容,但是内容默认可能不显示,通过某种手段(如单击)与 legend 交互才会显示出来
datagrid:用来控制客户端数据与显示,可以由动态脚本及时更新
menu:主要用于交互菜单(曾被废弃又被重新启用的元素)
command:用来处理命令按钮
https://blog.csdn.net/qq_41666142/article/details/116242968
11.简述vue的响应式原理。
1)当一个Vue实例创建时,vue会遍历data选项的属性(property),用Object.defineProperty将这些属性转为getter/setter,并记录在相关依赖中。getter和setter让vue能够追踪这些依赖。在属性被访问和修改时通知相应的依赖进行变更。
2)所有的组件实例都会有对应的watcher实例,而watcher实例会依赖相应的setter。
3)当数据变化时,setter会被调用,setter会通知相应的watcher ,watcher会更新相应的视图。
vue是无法检测对象的属性的添加和移除,所以在进行对象初始化的时候,会用object.defineproperty将这些属性转化为gettter和setter,使其成为响应式。
12.简述一下你对HTML语义化的理解
HTML语义化就是页面内容结构化,结构更清晰,便于浏览器引擎进行解析;即使没有css样式买也可以以一种页面的形式显示,便于阅读,是阅读源码的读者更容易将页面进行分块,便于阅读和维护。
13.请描述一下 cookies,sessionStorage 和 localStorage 的区别
cookies是网站为了标识用户的身份而储存在本地终端上的数据。cookies始终在同源的http请求中携带,会在浏览器和服务器之间来回传递。
sessionStorage和localStorage不会自动的把数据传送给服务器,仅仅是储存在本地。
储存大小不同:cookies数据大小不能超过4KB。sessionStorage和localStorage可以达到5M。
有期时间不同:
localStorage储存持久数据,浏览器关闭数据不会删除。除非主动删除
sessionStorage数据在当前浏览器窗口关闭数据自动删除。
cookies设置的cookies过期时间之前一直有效。
14.说一下浏览器从发起请求到呈现页面的整个过程?
> DNS解析ip地址 > TCP三次握手连接 > 发送HTTP请求 > 服务器处理,返回HTTP响应 > 浏览器解析响应 > 构建DOM树、CSSrule树,合并生成render树,计算布局并绘制