20200824 王维

学习总结

1.link和import区别

link是xhtml标签,@import是css提供的

link写在html页面head部分,而@import写在css文件中,也可以写在style文件中

link引用css时,在页面加载时同时加载,而@import需要野蛮加载完成载入以后才加载

link是XHTML标签,没有兼容问题,@import是css2.1提出的,低版本(ie5及以下)的IE不支持

link支持使用JavaScript去控制DOM改变样式,但是@import不支持

link方式引入的样式的权值高于@import的权值

2.五大主流浏览器

Chrome、Safari、Opera、Firefox、IE

-webkit- Chrome/Safari Blink内核/webkit内核

-o- Opera Blink内核

-moz- Firefox Gecko内核

-ms- IE Trident内核

3.浮动产生高度坍塌解决方法

给父元素添加具体高度

给父元素添加溢出隐藏overflow:hidden

给父元素同样添加浮动

父元素末尾添加空div,为其设置clear:both

使用伪元素生成内容,在父元素下的末尾:after,为其设置clear:both

改变父元素的显示方式,display:table

4.前端页面三层构成

结构层:html 主要负责搭建网页整体架构;

样式层:css 主要负责为页面添加样式,进行美化;

行为层:JavaScript 主要负责与用户的交互

5.css代码优化

(1)合并样式

(2)能用群组选择器,就不单写。能简写,就不单独去定义

(3)减少样式文件的大小,能重用就重用

(4)减少样式重写

(5)避免出现空的href和src

(6)代码压缩

(7)选择更优的样式属性值

(8)不要再HTML中缩放图像

6.html语义化

html语义化其实就是用正确的标签做正确的事,html语义化让页面的内容结构化,结构更为清晰,便于让浏览器、搜索引擎解析。即使在没有css样式的情况下,也是以一种文档的格式显示,并且内容时容易阅读的。搜索引擎的爬虫也是依赖于html标记来确定上下文和各个关键词的权重,利于SEO。同时使阅读源代码的人对网站更容易分块,便于阅读维护理解。

7.sass

scss文件转换成css文件 node-sass -w scss文件夹 -o css文件夹 开启监听添加-w 一次转换一个文件夹添加-o

文件名称以_开头,就是局部scss文件。局部scss文件不会被转换成css文件。可以在一个全局scss文件中,导入多个局部scss文件,最后生一个css文件

混合器 把一段样式进行封装,需要使用的地方直接调用混合器名称

@mixin 混合器名称(\(形参,\)形参…..){}

@include混合器名称(实参,实参…..)

数学函数,round四舍五入、cell向上取整、floor向下取整、random随机数

8.行内元素与margin和padding

行内元素的padding-left、padding-right、margin-left和margin-right属性设置是有效的

padding-top、padding-bottom、margin-top和margin-bottom属性设置是无效的,虽然行内元素padding-top、padding-bottom从显示效果撒花姑娘是增加的,但他并不会对周围的元素产生任何影响,盒子实际上并没有被撑开,设置是无效的

注意img是一个特例,它虽然是行内元素,但也是置换元素,所以它的性质不同于行内元素。对于img设置padding和margin都是有效的。

心得体会

对于面试需要掌握的知识了解的太少,只知道一些老师讲过的,自己私下拓展的太少,稍微超出一点所讲的范围就不知道了,很多知识我们可能不要求掌握,但是一定要有所了解,拓展自己的知识面。

标签

评论