学习总结

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都是有效的。

心得体会

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