css的优先级算法如何计算?
*或继承 0.0.0.0 *
元素(标签) 0.0.0.1 p
类,伪类 0.0.1.0 .
Id 0.1.0.0 #
行内样式 1.0.0.0 元素后直接使用
!Important +∞
权重相同,就近原则
权重会叠加,没有进制
从小到大排列:
*或继承<标签<类,伪类<id<行内<!Important
display:none与visibility:hidden的区别?
(1)Display:none 隐藏
隐藏后不保留位置
(2)Visibility:hidden 隐藏
隐藏后保留位置
position跟display、overflow、float这些特性相互叠加后会怎么样?
display属性规定元素应该生成的框的类型;position属性规定元素的定位类型;float属性是一种布局方式,定义元素在哪个方向浮动。
类似于优先级机制:position:absolute/fixed优先级最高,有他们在时,float不起作用,display值需要调整。float 或者absolute定位的元素,只能是块元素或表格。
https://www.cnblogs.com/wulinzi/p/8426383.html
CSS优化、提高性能的方法有哪些?
1、尽量将样式写在单独的css文件里面,在head元素中引用
有时候为了图方便或者快速搞定功能,我们可能会直接将样式写在页面的style标签或者直接内联在元素上,这样虽然简单方便,但是非常不利于日后的维护。将代码写成单独的css文件有几点好处:
(1)内容和样式分离,易于管理和维护
(2)减少页面体积
(3)css文件可以被缓存、重用,维护成本降低
2、不使用@import
@import影响css文件的加载速度
3、避免使用复杂的选择器,层级越少越好
有时候项目的模块越来越多,功能越来越复杂,我们写的CSS选择器会内套多层,越来越复杂。
建议选择器的嵌套最好不要超过三层
简洁的选择器不仅可以减少css文件大小,提高页面的加载性能,浏览器解析时也会更加高效,也会提高开发人员的开发效率,降低了维护成本。
4、精简页面的样式文件,去掉不用的样式
很多时候,我们会把所有的样式文件合并成一个文件,但是这样有一个问题:很多其他页面的CSS同时引用到当前页面中,而当前页面并没有用到它们,这种情况会造成两个问题:
(1)样式文件偏大,影响加载速度
(2)浏览器会进行多余的样式匹配,影响渲染时间。
正确的处理方法是根据当前页面需要的css去合并那些当前页面用到的CSS文件。
PS:合并成一个文件有一个优点:样式文件会被浏览器缓存,进入到其他页面样式文件不用再去下载。这条规则应根据场景来区别对待,如果是大项目,应该合并成不同的样式文件,如果是简单的项目,建议合并成一个文件即可。如果无法确认项目规模,建议分开成不同的样式文件,日后要合并也比较方便。
5、利用CSS继承减少代码量
我们知道有一部分CSS代码是可以继承的,如果父元素已经设置了该样式,子元素就不需要去设置该样式,这个也是提高性能的行之有效的方法。
常见的可以继承的属性比如:
color,font-size,font-family等等
不可继承的比如:
position,display,float等
6、慎重使用高性能属性:浮动、定位;
li与li之间有看不见的空白间隔是什么原因引起的?有什么解决办法?
行框的排列会受到中间空白(回车空格)等的影响,因为空格也属于字符,这些空白也会被应用样式,占据空间,所以会有间隔,把字符大小设为0,就没有空格了。
解决方法:
可以将
- 代码全部写在一排
-
浮动li中float:left
在ul中用font-size:0(谷歌不支持);可以使用letter-space:-3px
什么叫img3px问题,怎么解决?
将一个img放在div里面,你会发现在img下面无端端的就多出3px的空白出来1、设置div{ font-size: 0}
2、设置img{ display: block}
3、设置img{ vertical-align:top;}
当然推荐第二种方法,让img对象成为块级元素。
png、jpg、gif 这些图片格式解释一下,分别什么时候用?
png是便携式网络图片(Portable Network Graphics)是一种无损数据压缩位图文件格式.优点是:压缩比高,色彩好。 大多数地方都可以用。jpg是一种针对相片使用的一种失真压缩方法,是一种破坏性的压缩,在色调及颜色平滑变化做的不错。在www上,被用来储存和传输照片的格式。
gif是一种位图文件格式,以8位色重现真色彩的图像。可以实现动画效果.
webp格式是谷歌在2010年推出的图片格式,压缩率只有jpg的2/3,大小比png小了45%。缺点是压缩的时间更久了,兼容性不好,目前谷歌和opera支持。
文本超出显示省略号如何实现?
white-space:nowrap; 强制在同一行内显示所有文本,知道文本结束或遇到broverflow:hidden;
text-overflow:clip/ellipsis;直接裁切/溢出部分…标记
对WEB标准以及W3C的理解与认识?
web标准简单来说可以分为结构、表现和行为。其中结构主要是有HTML标签组成。或许通俗点说,在页面body里面我们写入的标签都是为了页面的结构。表现即指css样式表,通过css可以是页面的结构标签更具美感。行为是指页面和用户具有一定的交互,同时页面结构或者表现发生变化,主要是有js组成。web标准一般是将该三部分独立分开,使其更具有模块化。但一般产生行为时,就会有结构或者表现的变化,也使这三者的界限并不那么清晰。
W3C对web标准提出了规范化的要求,也就是在实际编程中的一些代码规范:包含如下几点
1.对于结构要求:(标签规范可以提高搜索引擎对页面的抓取效率,对SEO很有帮助)
1)。标签字母要小写
2)。标签要闭合
3)。标签不允许随意嵌套
2.对于css和js来说
1)。尽量使用外链css样式表和js脚本。是结构、表现和行为分为三块,符合规范。同时提高页面渲染速度,提高用户的体验。
2)。样式尽量少用行间样式表,使结构与表现分离,标签的id和class等属性命名要做到见文知义,标签越少,加载越快,用户体验提高,代码维护简单,便于改版
3)。不需要变动页面内容,便可提供打印版本而不需要复制内容,提高网站易用性。
xhtml和html有什么区别?
一、其基础语言不同1、XHTML是基于可扩展标记语言(XML)。
2、HTML是基于标准通用标记语言(SGML)。
二、语法严格程度不同
1、XHTML语法比较严格,存在DTD定义规则。
2、HTML语法要求比较松散,这样对网页编写者来说,比较方便。
三、可混合应用不同
1、XHTML可以混合各种XML应用,比如MathML、SVG。
2、HTML不能混合其它XML应用。
四、大小写敏感度不同
1、XHTML对大小写敏感,标准的XHTML标签应该使用小写。
2、HTML对大小写不敏感。
五、公布时间不同
1、XHTML是2000年W3C公布发行的。
2、HTML4.01是1999年W3C推荐标准。
前端页面有哪三层构成,分别是什么,作用是什么?
最准确的网页设计思路是把网页分成三个层次,即:结构层、样式层、行为层。HTML:结构层
网页的结构或内容层是该页面的基础HTML代码。正如房屋的框架为房屋的其他部分构建了一个坚实的基础,HTML的坚实基础创建了一个可以在其上创建网站的平台。
结构层用于存储客户想要阅读或查看的所有内容。HTML结构可以包含文本和图像,它包括访问者用于浏览网站的超链接。这是在符合标准的HTML5中编码的,可以包括文本,图像和多媒体(视频,音频等)。
网站内容的每个方面都应该在结构层中表示。这允许关闭JavaScript的客户或无法查看整个网站的CSS访问权限的客户(如果不是所有功能)。
CSS:样式层
该层指示结构化HTML文档如何看待网站的访问者,并由CSS(层叠样式表)定义。这些文件包含有关如何在Web浏览器中显示文档的样式说明。样式层通常包括基于屏幕大小和设备更改站点显示的媒体查询。
网站的所有视觉样式都应位于外部样式表中。您可以使用多个样式表,但请记住,每个CSS文件都需要HTTP请求才能获取它,从而影响站点性能。
JavaScript:行为层
行为层使网站具有交互性,允许页面响应用户操作或基于一组条件进行更改。JavaScript是行为层最常用的语言,但CGI和PHP也经常被使用。
当开发人员引用行为层时,大多数都是指在Web浏览器中直接激活的层。您可以使用此图层直接与DOM(文档对象模型)进行交互。在内容层中编写有效的HTML对于行为层中的DOM交互非常重要。在构建行为层时,应该像使用CSS一样使用外部脚本文件来优化速度和性能。