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);

}

心得

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

标签

评论

© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1