20200824岳浩天

知识总结

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的权值

前端页面的构成和主要作用

①结构层：html，主要负责搭建网页的整体架构

②样式层：css，主要负责为页面添加样式，进行美化

③行为层：JavaScript，主要负责页面的交互效果

五大主要浏览器内核

Chrome/Opera内核Blink

Firefox 内核 Gecko

IE 内核 Trident

Safari 内核 webkit

块级元素和行内元素具体区别?行内元素的margin和padding能设置吗

①块级元素：总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示，宽度、高度、内边距(padding)和外边距(margin)都是可以控制的

②行内元素：和相邻的内联元素在同一行。宽度、高度都不可以控制。margin-top和margin-bottom、padding-top是不可控制的，margin-left、margin-right和padding-bottom、padding-left、padding-right是可以控制的，行内元素的区域大小是都内容撑开的。

css代码优化有哪些？

合并样式

能用群组，就不单写。能简写，就不单独去定义

缩小样式文件的大小，能重用就重用

减少样式重写

避免出现空的href和src；

代码压缩

选择更优的样式属性值

不要在HTML中缩放图像

简述html语义化

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

rem/em区别

rem：相对于根元素(html)的font-size，假如html的font-size：12px，在其中的div设置font-size：2rem;就是相当于是24px；

1rem=12px;

em：相对于父元素的font-size进行计算，假如某个p元素为font-size：12px；在p元素的内部有一个span标签，设置font-size：2em；那么这个时候span的字体大小为 24px；

1em=12px;

简单三角形

div{

width:0;

height:0;

border:100px solid black;

boder-top-color:transparent;

boder-left-color:transparent;

boder-right-color:rgba(0,0,0,0);

}

心得

从测试中表现出来的许多不足，以前没注意的，总结了一番。