前端布局与响应式设计综合指南(二)

​🌈个人主页:前端青山
🔥系列专栏:Css篇   
🔖人终将被年少不可得之物困其一生

依旧青山,本期给大家带来Css篇专栏内容:前端布局与响应式设计综合指南(二)   

目录

23、行内元素和块级元素?img算什么?行内元素怎么转化为块元素?

24、将多个元素设置为同一行?清除浮动的几种方式?

25、怪异盒模型box-sizing?弹性盒模型|盒布局?

26、简述几个CSS hack?

27、 title和alt的区别?

28、什么是CSS3 transform? animation? 区别是什么?

29、nth-of-type和nth-child的区别是什么?

使用公式 (an + b)。描述:表示周期的长度,n 是计数器(从 0 开始),b 是偏移值。

odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词(第一个子元素的下标是 1)

30、:before 和 ::before区别是什么?

31、如何让一个div 上下左右居中?

32、 解释下 viewport

33、如何理解HTML结构语义化?

34 CSS3中引入的伪元素有什么?

35、HTML5有哪些新特性,移除了哪些元素?如何处理HTML5新标签兼容问题?如何区分HTML和HTML5?

36、常见浏览器兼容性问题?

37、简述前端优化方式

38、块级元素?行内元素?空元素?

39、media属性?

40、meta标签的name属性值?

23、行内元素和块级元素?img算什么?行内元素怎么转化为块元素?

1.行内元素 一个行内元素只占据它对应标签的边框所包含的空间

2.块级元素 块级元素占据其父元素(容器)的整个空间,因此创建了一个“块”

*img是什么元素?*

应是行内元素,判断一个元素是行内元素,还是块元素,无非就是看它是否是独占一行。img标签显然没有独占一行,固它是行内元素。这没有问题。

*既然img是行内元素,那为什么可以通过CSS设置框高呢?*

尽管img是行内元素,但同时它也是置换元素,置换元素一般内置框高属性,因此可以设置其框高。

那么什么又是“置换元素”呢?

置换元素就是会根据标签属性来显示的元素。反之就是非置换元素了。

比如img根据src属性来显示,input根据value属性来显示,因此可知道img和input是置换元素,当然同理textarea, select,也是置换元素;

行内如何转块级元素

以下汇总三种行内元素转为块级元素的方法:
​
(1)display
​
(2)float
​
(3)position(absolute和fixed)
 1 <!DOCTYPE html>2 <html lang="zh">3 <head>4     <meta charset="UTF-8" />5     <meta http-equiv="X-UA-Compatible" content="ie=edge" />6     <title>行内元素转为块级元素</title>7     <style type="text/css">8         *{9             margin: 0;
10             padding: 0;
11             font-size: 20px;
12             color: red;
13         }
14         div{
15             margin-top: 20px;
16         }
17         a{
18             display:block;
19         }
20         span{
21             float: left;            
22         }
23         i{
24             position:absolute;
25         }
26     </style>
27 </head>
28 <body>
29     <div>
30         方法一:使用display
31     </div>
32     <a href="#">a标签转为块级元素</a>
33     <div>
34         方法一:使用float
35     </div>
36     <span>span标签转为块级元素</span>
37     <div>
38         方法一:使用position(absolute和fixed)
39     </div>
40     <i>i标签转为块级元素</i>
41 </body>
42 </html>

24、将多个元素设置为同一行?清除浮动的几种方式?

1.将多个元素设置为同一行:float,inline-block
​
清除浮动的方式:
​
方法一:添加新的元素 、应用 clear:both;
​
方法二:父级div定义 overflow: hidden;
​
方法三:利用:after和:before来在元素内部插入两个元素块,从面达到清除浮动的效果。
​
.clear{zoom:1;}
​
.clear:after{content:””;clear:both;display:block;height:0;overflow:hidden;visibility:hidden;}

25、怪异盒模型box-sizing?弹性盒模型|盒布局?

在标准模式下的盒模型:盒子总宽度/高度=width/height+padding+border+margin
在怪异模式下的盒模型下,盒子的总宽度和高度是包含内边距padding和边框border宽度在内的,盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin;
box-sizing有两个值一个是content-box,另一个是border-box。
当设置为box-sizing:content-box时,将采用标准模式解析计算;
当设置为box-sizing:border-box时,将采用怪异模式解析计算。

26、简述几个CSS hack?

(1) 图片间隙

在div中插入图片,图片会将div下方撑大3px。

hack1:将<div>与<img>写在同一行。

hack2:给<img>添加display:block;

dt li 中的图片间隙。

hack:给<img>添加display:block;

(2) 默认高度,IE6以下版本中,部分块元素,拥有默认高度(低于18px)

hack1:给元素添加:font-size:0;

hack2:声明:overflow:hidden;

表单行高不一致

hack1:给表单添加声明:float:left;height: ;border: 0;

鼠标指针

hack:若统一某一元素鼠标指针为手型:cursor:pointer;

当li内的a转化块元素时,给a设置float,IE里面会出现阶梯状

hack1:给a加display:inline-block;

hack2:给li加float:left;

27、 title和alt的区别?

alt属性

  • Alt属性(注意是“属性”而不是“标签”)包括替换说明,对于图像和图像热点是必须的。它只能用在img、area和input元素中(包括applet元素)。对于input元素,alt属性意在用来替换提交按钮的图片。

  • 使用alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明。这包括那些使用本来就不支持图像显示或者图像显示被关闭的浏览器的用户,视觉障碍的用户和使用屏幕阅读器的用户。替换文字是用来替代图像而不是提供额外说明文字的。

  • 文字的图像图片设置替换文字是最简单的,图像中包含的文字一般来说就可以作为alt属性值。Alt属性值得长度必须少于100个英文字符或者用户必须保证替换文字尽可能的短。

title属性

  • title属性为设置该属性的元素提供建议性的信息。

  • title属性可以用在除了base,basefont,head,html,meta,param,script和title之外的所有标签。但是并不是必须的。可能这正是为什么很多人不明白何时使用它。

  • 使用title属性提供非本质的额外信息。大部分的可视化浏览器在鼠标悬浮在特定元素上时显示title文字为提示信息,然而这又由制造商来决定如何渲染title文字。一些浏览器会将title文字显示在状态栏里。

  • title属性有一个很好的用途,即为链接添加描述性文字,特别是当连接本身并不是十分清楚的表达了链接的目的。这样就使得访问者知道那些链接将会带他们到什么地方,他们就不会加载一个可能完全不感兴趣的页面。另外一个潜在的应用就是为图像提供额外的说明信息,比如日期或者其他非本质的信息。

28、什么是CSS3 transform? animation? 区别是什么?

CSS3属性中关于制作动画的三个属性:Transform,Transition,Animation。
1、transform:描述了元素的静态样式,本身不会呈现动画效果,可以对元素进行 旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。
div{transform:scale(2);
}
transition和animation两者都能实现动画效果
transform常常配合transition和animation使用
​
2、transition样式过渡,从一种效果逐渐改变为另一种效果
transition是一个合写属性
​
transition:transition-property transition-duration transition-timing-function transition-delay
从左到右分别是:css属性、过渡效果花费时间、速度曲线、过渡开始的延迟时间
div{width:100px;height:100px;transition:transform 2s;
}
div:hover{transform:rotate(180deg);
}
transition通常和hover等事件配合使用,需要由事件来触发过渡
​
我们知道 transition 虽然简单好用,但是我们会发现它受到各种限制。
​
1:transition需要一个事件来触发,比如hover,所以没法在网页加载时自动发生
2: transition是一次性的,不能重复发生,除非一再触发。
3: transition只能定义开始状态和结束状态,不能定义中间状态,也就是说只有两个状态。
4:一条transition规则,只能定义一个属性的变化,不能涉及多个属性。
3、animation动画 由@keyframes来描述每一帧的样式
div{animation:myAnimation 5s infinite
}
@keyframes myAnimation {0%{left:0;transform:rotate(0);}100%{left:200px;transform:rotate(180deg);}
}
区别:
-(1)transform仅描述元素的静态样式,常常配合transition和animation使用
-(2)transition通常和hover等事件配合使用,animation是自发的,立即播放
-(3)animation可设置循环次数
-(4)animation可设置每一帧的样式和时间,transition只能设置头尾
-(5)transition可与js配合使用,js设定要变化的样式,transition负责动画效果,如:
​
animation属性类似于transition,他们都是随着时间改变元素的属性值,
​
其主要区别在于:transition需要触发一个事件才会随着时间改变其CSS属性;
animation在不需要触发任何事件的情况下,也可以显式的随时间变化来改变元素CSS属性,达到一种动画的效果
1)动画不需要事件触发,过渡需要。
2)过渡只有一组(两个:开始-结束) 关键帧,动画可以设置多个。

29、nth-of-type和nth-child的区别是什么?

  • :nth-child(n)选择器,该选择器选取父元素的第n 个子元素,不论元素的类型

  • :nth-of-type(n)选择器,选择器选取父元素的第 n 个指定类型的子元素。

<h1>这是标题</h1>
​
<p>第一个段落。</p>
​
<p>第二个段落。</p>
​
<p>第三个段落。</p>
​
<p>第四个段落。</p>
​
<p>第五个段落。</p>

1, p:nth-child(3n+1) 包含<h1>这是标题</h1> 2, p:nth-of-type(3n+1) 不包含<h1>这是标题</h1>,只选择p元素

使用公式 (an + b)。描述:表示周期的长度,n 是计数器(从 0 开始),b 是偏移值。
oddeven 是可用于匹配下标是奇数偶数的子元素的关键词(第一个子元素的下标是 1

30、:before 和 ::before区别是什么?

解答要点

  • 相同点

    1. 都可以用来表示伪类对象,用来设置对象前的内容

    2. :befor和::before写法是等效的

  • 不同点

    1. :befor是Css2的写法,::before是Css3的写法

    2. :before的兼容性要比::before好 ,不过在H5开发中建议使用::before比较好

31、如何让一个div 上下左右居中?

【绝对定位50%-本身50%】

position:absolute; left:50%; top:50%;transform: translate(-50%,-50%);.div1{ width:400px; height:400px;border:#CCC 1px solid; background:#99f; position:absolute; left:50%; top:50%;/*绝对定位*/transform: translate(-50%,-50%); 
/*translate(x,y) 括号的百分比数据,会以本身的长宽做参考,比如,本身的长为100px,高为100px. 那填(50%,50%)就是向右,向下移动50px,添加负号就是向着相反的方向移动*/
} <div class="div1"></div>  

32、 解释下 viewport

大家知道手机的屏幕尺寸的尺寸较小,iphone5的话是320×568,然后iPhone6是375×667,这怎么小的宽度范围内,如果显示PC端的网页,如果没有做处理的话,那可能显示出来的网页会挤成一团,所以手机厂商为浏览器默认设置了一个虚拟的容器,叫布局视图(layout viewport),这个容器足够宽,且不依赖于手机屏幕的宽度,能够直接把PC上的网页放进来而不变形,iPhone上这个容器大于等于980px,你能在这个网页上双击放大任意区域来显示局部最合适的大小。

这个时候介绍另外的东西,叫做可视视图(visual viewport),这个是指你屏幕上浏览器显示区域的宽度,也就是它,决定一个屏幕能够显示的最大宽度(手指放大浏览器局部的时候,能够显示的宽度会变小),但是用户的放大缩小并不影响浏览器运行后的最大可视宽度,这个视图需要开发者进行设定,并且会受到网页内最长的可见元素的影响。

随着移动端的崛起,各个网站需要为移动端制作专门的网页,如果还是以手机虚拟容器的宽度为标准进行适配,那就是不合适的,我们需要让这个布局视图能够适应屏幕的大小,用户不用调整网页的大小就能看到一张尺寸合适的完整网页,而且能够保证显示效果的一致性,同样一个14px的文字或图片,在普通屏和高清屏上,我们看到的都是相对一致的大小。我们需要找到一个纽带,连接虚拟世界和真实世界的尺寸,进行适配。而设备自身的宽度是最合适的,确定的这个宽度的视图,被称为理想视图(ideal viewport)。

如果我们将能够显示的最大宽度设置为手机的宽度,并且将布局宽度也设定为手机的宽度,那不需要调整屏幕大小或者拖动页面,就能显示整张网页,而且屏幕的尺寸数值和屏幕的物理宽度组合在一起,就能够为CSS布局提供一把刻度相对一致的尺子,保证了显示效果。

可视视图的设定:

开发者可以用viewport的initial-scale来调整可视视图相对于屏幕真实宽度的大小比例,initial-scale=1时,可视视图的初始化最大宽度就等于屏幕宽度即理想视图的宽度,它会受到内部html节点的宽度影响,调整到最大的节点的长度(但是一般不超过1500px)。同时,如果设定user-scalable=no,那可视视图的宽度就会严格等于初始化时设定的宽度。

布局视图的设定:

布局视图的宽度等于viewport中设定的width以及可视视图的初始宽度中较大的一个,所以如果不写width属性,那布局视图的宽度也会等于屏幕的宽度,但是在可视视图初始化之后,布局视图的宽度只取决于viewport中设定的width,所以为了在旋转屏幕时能够改变布局视图的宽度,不能不写width或者将width设定为固定的数值,而是应该写上width=device-width

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">

33、如何理解HTML结构语义化?

什么是 HTML 语义化?

简单来说,我们可以理解为:用正确的标签做正确的事情。

例如:

段落用 p 标签,标题用 h 系列标签,边栏用 aside 标签,主要内容用 main 标签。

为什么要关注 HTML 语义化?

对人:

  • 便于团队的开发和维护。

  • 在没有加载 CSS 的情况下也能呈现较好的内容结构与代码结构,易于阅读。

对机器:

  • 有利于 SEO ,搜索引擎的爬虫依赖于标签来确定上下文和各个关键字的权重。

  • 方便其他设备的解析(如屏幕阅读器、盲人阅读器等),利于无障碍阅读,提高可访问性。

总结

语义化当然并不仅仅在 HTML 中有用处,写 CSS 的时候,写 JavaScript 代码的时候,都应该采用有语义的类名和变量,并且永远不要在这些地方使用拼音。

34 CSS3中引入的伪元素有什么?

CSS中的伪元素大家以前看过::first-line,:first-letter,:before,:after;

那么在CSS3中,他对伪元素进行了一定的调整,在以前的基础上增加了一个“:”也就是现在变成了::first-letter,::first-line,::before,::after另外他还增加了一个::selection

在css3中,已经明确规定了伪类用一个冒号来表示,而伪元素则用两个冒号来表示。

::first-line选择元素的第一行,比如说改变每个段落的第一行文本的样式,我们就可以使用这个

p::first-line {font-weight:bold;}

::before::after这两个主要用来给元素的前面或后面插入内容,这两个常用"content"配合使用,见过最多的就是清除浮动,

            .clearfix:before,.clearfix:after {content: ".";display: block;height: 0;visibility: hidden;}.clearfix:after {clear: both;}.clearfix {zoom: 1;}

对于 IE8 及更早版本中的 :before,必须声明 <!DOCTYPE>

:before 选择器在被选元素的内容前面插入内容。例如:

<div><h1>welcome</h1>
</div>
​
div:before{content:"hello world"
}

那么,被选元素是divdiv的内容是h1,插入的内容就是content属性值“hello world

::selection用来改变浏览网页选中文的默认效果

35、HTML5有哪些新特性,移除了哪些元素?如何处理HTML5新标签兼容问题?如何区分HTML和HTML5?

第一 HTML5有哪些新特性,移除了哪些元素

题目点评

题目涉及到范围非常的大,如果要面面俱到显然半天都答不完,可以先罗列出H5的一些新特性,不要回答那么具体,等面试官提具体的问题,所以在面试之前也要把这里的技术过一遍,至少每个技术也要做个小程序出来体验一下。

(一).H5新特性

增强了图形渲染、影音、数据存储、多任务处理等处理能力主要表现在

*1)* *绘画 canvas;*

类似windows自带的画图板,可绘制线、框、路径、图……,InternetExplorer 9、Firefox、Opera、Chrome 以及 Safari 支持 <canvas> 及其属性和方法。

画图需要的要素

a) 笔,用笔可以画线、圆、矩形、文本等

b) 颜色

c) 画板

*2)* *本地离线存储 localStorage*

长期存储数据,浏览器关闭后数据不丢失;

1.特点

数据永久存储,没有时间限制;大小限制5M(够用了);只存储字符串。

2.数据存取方式

localStorage.a = 3;//设置a为"3"
​
​
​
localStorage["a"] = "sfsf";//设置a为"sfsf",覆盖上面的值
​
​
​
localStorage.setItem("b","isaac");//设置b为"isaac"
​
​
​
var a1 = localStorage["a"];//获取a的值
​
​
​
var a2 = localStorage.a;//获取a的值
​
​
​
var b = localStorage.getItem("b");//获取b的值
​
​
​
var b2= localStorage.key(0);//获取第一个key的内容
​
​
​
localStorage.removeItem("c");//清除c的值
​
​
​
localStorage.clear();//清除所有的数据

推荐使用:

getItem()

setItem()

removeItem()

3.事件监听

if(window.addEventListener){
​
​
​
window.addEventListener("storage",handle_storage,false);//
​
​
​
}else if(window.attachEvent){ //兼容IE
​
​
​
window.attachEvent("onstorage",handle_storage);
​
​
​
}
​
​
​
function handle_storage(e){
​
​
​
}

对象e为localStorage对象,Chrome、Firefox支持差,IE支持较好。

3) sessionStorage的数据在浏览器关闭后自动删除;操作参考localStorage

4) 用于媒介回放的 *video**和* *audio* 元素;

5) 语意化更好的内容元素,比如article、footer、header、nav、section;

6) 表单控件,calendar、date、time、email、url、search;

7) 新的技术webworker(专用线程)

8) websocketsocket通信

9) Geolocation 地理定位

**(二)移除的元素****

纯表现的元素

  • <basefont> 默认字体,不设置字体,以此渲染

  • <font> 字体标签

  • 水平居中

  • <u> 下划线

  • <big> 大字体

  • <strike> 中横线

  • <tt> 文本等宽

框架集

  • <frameset>

  • <noframes>

  • <frame>

第二 如何处理HTML5新标签兼容问题?

方法一 :

1、使用静态资源的html5shiv包

<!--[if lt IE9]>

<script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>

<![endif]-->

2、载入后,初始化新标签的css

header, section, footer, aside, nav, main, article, figure { display: block; }

方法二:

IE6/IE7/IE8支持通过document方法产生的标签,利用这一特性让这些浏览器支持HTML5新标签

第三 如何区分HTML和HTML5?

区分:

1、在文档bai声明上du,html有很长的一段代码,zhi并且很难记dao住这段代码,都是靠zhuan工具shu直接生成,而html5却是不同,只有简简单单的声明,也方便人们的记忆,更加精简。

2、在结构语义上;html4.0没有体现结构语义化的标签,这样表示网站的头部。html5在语义上却有很大的优势。提供了一些新的html5标签。

基本说明:

1、html5最先由WHATWG(Web 超文本应用技术工作组)命名的一种超文本标记语言,随后和W3C的xhtml2.0(标准)相结合,产生现在最新一代的超文本标记语言;

2、可以简单点理解成为HTML 5 ≈ HTML4.0+CSS3+JS+API。定义的这些标签,更加有利于优化,蜘蛛能识别。节省程序员写代码的时间。最主要还是在SEO的优化上。

36、常见浏览器兼容性问题?

所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况。在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。

在学习浏览器兼容性之前,我想把前端开发人员划分为两类: 第一类是精确按照设计图开发的前端开发人员,可以说是精确到1px的,他们很容易就会发现设计图的不足,并且在很少的情况下会碰到浏览器的兼容性问题,而这些问题往往都是浏览器的bug,并且他们制作的页面后期易维护,代码重用问题少,可以说是比较牢固放心的代码。 第二类是基本按照设计图来开发的前端开发人员,很多细枝末节差距很大,不如间距,行高,图片位置等等经常会差几px。某种效果的实现也是反复调试得到,具体为什么出现这种效果还模模糊糊,整体布局十分脆弱。稍有改动就乱七八糟。代码为什么这么写还不知所以然。这类开发人员往往经常为兼容性问题所困。修改好了这个浏览器又乱了另一个浏览器。改来改去也毫无头绪。其实他们碰到的兼容性问题大部分不应该归咎于浏览器,而是他们的技术本身了。 这篇文章主要针对的是第一类,严谨型的开发人员,因此这里主要从浏览器解析差异的角度来分析兼容性问题

浏览器兼容问题一:不同浏览器的标签默认的外补丁和内补丁不同 问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大。 碰到频率:100% 解决方案:css里 {margin:0;padding:0;} 备注:这个是最常见的也是最易解决的一个浏览器兼容性问题,几乎所有的css文件开头都会用通配符来设置各个标签的内外补丁是0。

浏览器兼容问题二:块属性标签float后,又有横行的margin情况下,在ie6显示margin比设置的大 问题症状:常见症状是ie6中后面的一块被顶到下一行 碰到频率:90%(稍微复杂点的页面都会碰到,float布局最常见的浏览器兼容问题) 解决方案:在float的标签样式控制中加入 display:inline;将其转化为行内属性 备注:我们最常用的就是div+css布局了,而div就是一个典型的块属性标签,横向布局的时候我们通常都是用div float实现的,横向的间距设置如果用margin实现,这就是一个必然会碰到的兼容性问题。

浏览器兼容问题三:设置较小高度标签(一般小于10px),在ie6,ie7,遨游中高度超出自己设置高度 问题症状:ie6、7和遨游里这个标签的高度不受控制,超出自己设置的高度 碰到频率:60% 解决方案:给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。 备注:这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是ie8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的,这个标签的高度还是会达到默认的行高。

浏览器兼容问题四:行内属性标签,设置display:block后采用float布局,又有横行的margin的情况,ie6间距bug(类似第二种) 问题症状:ie6里的间距比超过设置的间距 碰到几率:20% 解决方案:在display:block;后面加入display:inline;display:table; 备注:行内属性标签,为了设置宽高,我们需要设置display:block;(除了input标签比较特殊)。在用float布局并有横向的margin后,在ie6下,他就具有了块属性float后的横向margin的bug。不过因为它本身就是行内属性标签,所以我们再加上display:inline的话,它的高宽就不可设了。这时候我们还需要在display:inline后面加入display:talbe。

浏览器兼容问题五:图片默认有间距 问题症状:几个img标签放在一起的时候,有些浏览器会有默认的间距,加了问题一中提到的通配符也不起作用。 碰到几率:20% 解决方案:使用float属性为img布局 备注:因为img标签是行内属性标签,所以只要不超出容器宽度,img标签都会排在一行里,但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道。

浏览器兼容问题六:标签最低高度设置min-height不兼容 问题症状:因为min-height本身就是一个不兼容的css属性,所以设置min-height时不能很好的被各个浏览器兼容 碰到几率:5% 解决方案:如果我们要设置一个标签的最小高度200px,需要进行的设置为:{min-height:200px; height:auto !important; height:200px; overflow:visible;} 备注:在B/S系统前端开时,有很多情况下我们又这种需求。当内容小于一个值(如300px)时。容器的高度为300px;当内容高度大于这个值时,容器高度被撑高,而不是出现滚动条。这时候我们就会面临这个兼容性问题。

浏览器兼容问题七:透明度的兼容css设置 方法是:每写一小段代码(布局中的一行或者一块)我们都要在不同的浏览器中看是否兼容,当然熟练到一定的程度就没这么麻烦了。建议经常会碰到兼容性问题的新手使用。很多兼容性问题都是因为浏览器对标签的默认属性解析不同造成的,只要我们稍加设置都能轻松地解决这些兼容问题。如果我们熟悉标签的默认属性的话,就能很好的理解为什么会出现兼容问题以及怎么去解决这些兼容问题。 /* css hack*/ 我很少使用hacker的,可能是个人习惯吧,我不喜欢写的代码ie不兼容,然后用hack来解决。不过hacker还是非常好用的。 使用hacker 我可以吧浏览器分为3类:ie6 ;ie7和遨游;其他(ie8 chrome ff safari opera等) ie6认识的hacker 是下划线_ 和星号 * ie7 遨游认识的hacker是星号 * (包括上面问题6中的 !important也算是hack的一种。不过实用性较小。) 比如这样一个css设置 height:300px;height:200px;_height:100px; ie6浏览器在读到 height:300px的时候会认为高时300px;继续往下读,他也认识heihgt, 所以当ie6读到height:200px的时候会覆盖掉前一条的相冲突设置,认为高度是200px。继续往下读,ie6还认识_height,所以他又会覆盖掉200px高的设置,把高度设置为100px; ie7和遨游也是一样的从高度300px的设置往下读。当它们读到height200px的时候就停下了,因为它们不认识_height。所以它们会把高度解析为200px; 剩下的浏览器只认识第一个height:300px;所以他们会把高度解析为300px。 因为优先级相同且想冲突的属性设置后一个会覆盖掉前一个,所以书写的次序是很重要的。 最后说一下,严谨型的开发人员会有一套合适自己的RESET.CSS。结合自己的经验尽量规避容易出现不兼容的问题。以减少hack的使用,尽量符合W3C的标准。

37、简述前端优化方式

前端性能优化是个巨大的课题,如果要面面俱到的说的话,估计三天三夜说不完。所以我们就从实际的工程应用角度出发,聊我们最常遇见的前端优化问题。

1. 减少HTTP请求次数

尽量合并图片、CSS、JS。比如加载一个页面,如果有5个css文件的话,那么会发出5次http请求,这样会让用户第一次访问你的页面的时候会长时间等待。而如果把这个5个文件合成一个的话,就只需要发出一次http请求,节省网络请求时间,加快页面的加载。

2. 使用CDN

网站上静态资源即css、js全都使用cdn分发,图片亦然。

3. 避免空的src和href

当link标签的href属性为空、script标签的src属性为空的时候,浏览器渲染的时候会把当前页面的URL作为它们的属性值,从而把页面的内容加载进来作为它们的值。所以要避免犯这样的疏忽。

4. 为文件头指定Expires

Exipres是用来设置文件的过期时间的,一般对css、js、图片资源有效。 他可以使内容具有缓存性,这样下回再访问同样的资源时就通过浏览器缓存区读取,不需要再发出http请求。如下例子:

新浪微博的这个css文件的Expires时间是2016-5-04 09:14:14.

img

5. 使用gzip压缩内容

gzip能够压缩任何一个文本类型的响应,包括html,xml,json。大大缩小请求返回的数据量。

6. 把CSS放到顶部

网页上的资源加载时从上网下顺序加载的,所以css放在页面的顶部能够优先渲染页面,让用户感觉页面加载很快。

7. 把JS放到底部

加载js时会对后续的资源造成阻塞,必须得等js加载完才去加载后续的文件 ,所以就把js放在页面底部最后加载。 欢迎加入前端直播学习群一起学习交流:512676244

8. 避免使用CSS表达式

举个css表达式的例子

HTML复制全屏

1 font-color: expression( (new Date()).getHours()%3 ? “#FFFFFF" : “#AAAAAA" ); 2 ​这个表达式会持续的在页面上计算样式,影响页面的性能。并且css表达式只被IE支持。

9. 将CSS和JS放到外部文件中

目的是缓存文件,可以参考原则4。 但有时候为了减少请求,也会直接写到页面里,需根据PV和IP的比例权衡。

10. 权衡DNS查找次数

减少主机名可以节省响应时间。但同时,需要注意,减少主机会减少页面中并行下载的数量。

IE浏览器在同一时刻只能从同一域名下载两个文件。当在一个页面显示多张图片时,IE 用户的图片下载速度就会受到影响。所以新浪会搞N个二级域名来放图片。

下面是新浪微博的图片域名,我们可以看到他有多个域名,这样可以保证这些不同域名能够同时去下载图片,而不用排队。不过如果当使用的域名过多时,响应时间就会慢,因为不用响应域名时间不一致。

img

11. 精简CSS和JS

这里就涉及到css和js的压缩了。比如下面的新浪的一个css文件,把空格回车全部去掉,减少文件的大小。现在的压缩工具有很多,基本主流的前端构建工具都能进行css和js文件的压缩,如grunt,glup等。

12. 避免跳转

有种现象会比较坑爹,看起来没什么差别,其实多次了一次页面跳转。比如当URL本该有斜杠(/)却被忽略掉时。例如,当我们要访问 http://baidu.com 时,实际上返回的是一个包含301代码的跳转,它指向的是 http://baidu.com/(注意末尾的斜杠)。在nginx服务器可以使用rewrite;Apache服务器中可以使用Alias 或者 mod_rewrite或者the DirectorySlash来避免。

另一种是不用域名之间的跳转, 比如访问 http://baidu.com/bbs 跳转到http://bbs.baidu.com/。那么可以通过使用Alias或者mod_rewirte建立CNAME(保存一个域名和另外一个域名之间关系的DNS记录)来替代。

13. 删除重复的JS和CSS

重复调用脚本,除了增加额外的HTTP请求外,多次运算也会浪费时间。在IE和Firefox中不管脚本是否可缓存,它们都存在重复运算JavaScript的问题。

14. 配置ETags

它用来判断浏览器缓存里的元素是否和原来服务器上的一致。比last-modified date更具有弹性,例如某个文件在1秒内修改了10次,Etag可以综合Inode(文件的索引节点(inode)数),MTime(修改时间)和Size来精准的进行判断,避开UNIX记录MTime只能精确到秒的问题。 服务器集群使用,可取后两个参数。使用ETags减少Web应用带宽和负载 欢迎加入前端全栈开发交流圈一起学习交流:512676244

15. 可缓存的AJAX

异步请求同样的造成用户等待,所以使用ajax请求时,要主动告诉浏览器如果该请求有缓存就去请求缓存内容。如下代码片段, cache:true就是显式的要求如果当前请求有缓存的话,直接使用缓存

HTML复制全屏

1 $.ajax( 2 { 3 url : 'url', 4 dataType : "json", 5 cache: true, 6 success : function(son, status){ 7 } 8 ​

16. 使用GET来完成AJAX请求

当使用XMLHttpRequest时,浏览器中的POST方法是一个“两步走”的过程:首先发送文件头,然后才发送数据。因此使用GET获取数据时更加有意义。

17. 减少DOM元素数量

这是一门大学问,这里可以引申出一堆优化的细节。想要具体研究的可以看后面推荐书籍。总之大原则减少DOM数量,就会减少浏览器的解析负担。

18. 避免404

比如外链的css、js文件出现问题返回404时,会破坏浏览器的并行加载。

19. 减少Cookie的大小

Cookie里面别塞那么多东西,因为每个请求都得带着他跑。

20. 使用无cookie的域

比如CSS、js、图片等,客户端请求静态文件的时候,减少了 Cookie 的反复传输对主域名的影响。

21. 不要使用滤镜

IE独有属性AlphaImageLoader用于修正7.0以下版本中显示PNG图片的半透明效果。这个滤镜的问题在于浏览器加载图片时它会终止内容的呈现并且冻结浏览器。在每一个元素(不仅仅是图片)它都会运算一次,增加了内存开支,因此它的问题是多方面的。

完全避免使用AlphaImageLoader的最好方法就是使用PNG8格式来代替,这种格式能在IE中很好地工作。如果你确实需要使用AlphaImageLoader,请使用下划线_filter又使之对IE7以上版本的用户无效。

22. 不要在HTML中缩放图片

比如你需要的图片尺寸是50* 50

那就不用用一张500*500的大尺寸图片,影响加载

23. 缩小favicon.ico并缓存

以上是Yslow的23个优化原则,基本可以涵盖现在前端大部分的性能优化原则了,很多更加geek和精细优化方法都是从这些原则里面延伸出来的。 具体想了解更多优化细则的童鞋建议去看看下面的一本书,毕竟页数多讲的也细嘛:

38、块级元素?行内元素?空元素?

块元素(block element)一般是其他元素的容器元素,能容纳其他块元素或内联元素。块元素就好比一个四方块,可以放其他的四方块,并可以呈现在页面上任何地方。

  • 默认情况下块元素,是独占一行的

  • 常见的块元素:div、p、h1-h6、form(只能用来容纳其他块元素)、hr、table、ul、ol

  • 高度,行高以及外边距和内边距都可控制

  • 宽度缺省是它的容器的100%,除非设定一个宽度

  • 它可以容纳内联元素和其他块元素

行内元素(inline element)也叫内嵌元素或内联元素,一般都是基于语义级(semantic)的基本元素。行内元素只能容纳文本或者其他行内元素,常见行内元素有a、span、img。CSS权威指南》中文字显示:任何不是块级元素的可见元素都是行内元素。其表现的特性是“行布局”形式,这里的“行布局”的意思就是说其表现形式始终以行进行显示。比如,我们设定一个内联元素border-bottom:1px solid #000;时其表现是以每行进行重复,每一行下方都会有一条黑色的细线。如果是块级元素那么所显示的的黑线只会在块的下方出现。

  • 和其他元素都在一行上

  • 高,行高及外边距和内边距不可改变

  • 宽度就是它的文字或图片的宽度,不可改变

  • 行内元素只能容纳文本或者其他行内元素

块元素和行内元素的区别

  • 块元素,总是在新行上开始;行内元素,和其他元素都在一行上

  • 块元素,能容纳其他块元素或行内元素;而内联元素,只能容纳文本或者其他行内元素

  • 块元素中高度,行高以及顶和底边距都可控制;内联元素中高,行高及顶和底边距不可改变

  • 说白了,行内元素就好像一个单词;块级元素就好像一个段落,如果不另加定义的话,它将独立一行出现

文档流

  • 将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流

  • 每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端。 若当前行容不下, 则另起新行再浮动

  • 内联元素也不会独占一行。 几乎所有元素(包括块级,内联和列表元素)均可生成子行, 用于摆放子元素

  • 三种情况将使得元素脱离文档流而存在,分别是浮动,绝对定位, 固定定位。 但是在IE中浮动元素也存在于文档流中

  • 浮动元素不占任何正常文档流空间,而浮动元素的定位还是基于正常的文档流,然后从文档流中抽出并尽可能远的移动至左侧或者右侧。文字内容会围绕在浮动元素周围。当一个元素从正常文档流中抽出后,仍然在文档流中的其他元素将忽略该元素并填补他原先的空间。

  • 基于文档流, 我们可以很容易理解以下的定位模式:相对定位(relative), 即相对于元素在文档流中位置进行偏移,但保留原占位。绝对定位(absolute), 即完全脱离文档流, 相对于position属性非static值的最近父级元素进行偏移。固定定位(fixed), 即完全脱离文档流, 相对于视区进行偏移。

空元素

空元素的意思bai是:在HTML元素中,没有内容的 HTML 元素被称为空元素。 基本概述: 1,在用来描述网页的计算机语言中,有一种超文本标记语言,被称为HTML(Hyper Text Markup Language) 。而构成HTML内容的标记语言是由一套标记标签组成。这套标记标签通常被称为 HTML 标签 (HTML tag)。, 2,HTML 标签是由尖括号包围的关键词,比如 <html> ,通常是成对出现的,比如  和 。 3,这些成对出现的HTML 标签,第一个标签是开始标签,第二个标签是结束标签。大多数HTML 标签在开始标签和结束标签之间都具有内容,而某些标签则没有内容。, 4,HTML中,从开始标签(start tag)到结束标签(end tag)的所有代码,被称为HTML元素。 5,由于HTML元素的内容是开始标签与结束标签之间的内容。而某些 HTML 元素具有空内容。(empty content),那些含有空内容的HTML元素,就是空元素。空元素是在开始标签中关闭的。 举例说明: 1, 就是没有关闭标签的空元素( 标签定义换行)。, 2,在 XHTML、XML 以及未来版本的 HTML 中,所有元素都必须被关闭。 3,在开始标签中添加斜杠,比如 ,是关闭空元素的正确方法,HTML、XHTML 和 XML 都接受这种方式。

39、media属性?

媒体类型

all -- 所有设备。如没有only和not限定可以省略,省略不写时默认为all print -- 打印机 screen -- 计算机屏幕 等等

and & not & only & 逗号 操作符

and -- 所有媒体属性表达式为真时,媒体查询结果才为真。

not -- 对媒体结果求值取反。如果有逗号操作符,其作用范围至逗号处为止

@media not all and (min-width:800px){...}
等价于
@media not (all and (min-width:800px)){...}
而不是
@media (not all) and (min-width:800px){...}
@media not screen and (color), print and (color)
等价于
@media (not (screen and (color))), print and (color)
​

不支持媒体查询的浏览器会解析成media=screen,媒体属性不会求值。从而错误地应用样式。

, -- 逗号相当于or(或者)

常用媒体属性

width : 可视宽度 height : 可视高度 device-width: 设备宽度 device-height: 设备高度 orientation: 方向 aspect-ratio: 宽高比 color: 颜色 device-aspect-ratio: 设备宽高比

详细信息参考MDN文档:css媒体查询

40、meta标签的name属性值?

就是头文件里的meta标签及其属性等等。(之前只知道utf-8还有Author)

于是去网上查找了相关资料,在这里简单描述一下:

name是描述网页的,对应于Content(网页内容)。ame的value值(name="")指定所提供信息的类型。有些值是已经定义好的。例如description(说明)、keyword(关键字)、refresh(刷新)等。还可以指定其他任意值,如:creationdate(创建日期) 、document ID(文档编号)和level(等级)等。

name的content指定实际内容。如:如果指定level(等级)为value,则Content可能是beginner(初)、intermediate(中)、advanced(高)。

1.Keywords(关键字)*

说明:为搜索引擎提供关键字列表(content里的关键字记得要用逗号隔开)

eg:<meta name="Keywords" content="关键词1,关键词2,关键词3,关键词4,……">

2.Copyright (版权)

说明:标注声明相关版权

eg:<meta name="xxx" content="版权归xxx.xxx所有">

3.Robots (机器人向导)

说明:Robots用来告诉搜索机器人页面需要或者不需要索引。Content的參数有all、none、index、noindex、follow、nofollow,默认是all。

all:文件将被检索,且页面上的链接能够被查询。

none:文件将不被检索。且页面上的链接不能够被查询。(和 "noindex, no follow" 起同样作用)

index:文件将被检索;(让robot/spider登录)

follow:页面上的链接能够被查询;

noindex:文件将不被检索,但页面上的链接能够被查询;(不让robot/spider登录)

nofollow:文件将不被检索,页面上的链接能够被查询。(不让robot/spider顺着此页的连接往下探找)

eg:<meta name="robots" content="All|None|Index|Noindex|Follow|Nofollow">

4.Renderer(指定默认渲染内核)

说明:指定双核浏览器默认以哪种方式渲染页面

eg:<meta name="renderer" content="webkit"> //强制指定webkit内核

5.Viewport(视窗/移动端)

说明:是用户网页的可视区域,即“视区”。

eg:<meta name="viewport" content="width=device-width, initial-scale=1.0">

width:控制 viewport 的大小,可以指定的一个值,如 600,或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。

height:和 width 相对应,指定高度。

initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例。

maximum-scale:允许用户缩放到的最大比例。

minimum-scale:允许用户缩放到的最小比例。

user-scalable:用户是否可以手动缩放。

eg:

a. 设置屏幕宽度为设备宽度,禁止用户手动调整缩放

         <meta name="viewport" content="width=device-width,user-scalable=no" />

b. 设置屏幕密度为高频,中频,低频自己主动缩放,禁止用户手动调整缩放)<meta name="viewport" content="width=device-width, target-densitydpi=high-dpi, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/448264.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

影刀RPA实战:操作Mysql数据库

1.摘要 影刀RPA&#xff08;Robotic Process Automation&#xff09;是一种软件自动化工具&#xff0c;它可以模拟人类用户执行各种重复性任务&#xff0c;其中包括对数据库的操作。 我们可以使用软件自动化指令&#xff0c;通过获取数据库窗口对象来操作数据库&#xff0c;也…

《探秘数据合规官CCRC-DCO人员能力验证》

在当今竞争激烈的商业世界中&#xff0c;“数据合规官CCRC-DCO人员能力验证”这个词逐渐走入人们的视野。但究竟什么是数据合规官CCRC-DCO人员能力验证呢&#xff1f; 首先&#xff0c;咱们来明确一下概念。数据合规官CCRC-DCO人员能力验证&#xff0c;简单来说&#xff0c;就…

数仓范式建模和维度建模有什么不同?

在数据库设计的复杂世界中&#xff0c;还有一类建模方法&#xff0c;为范式建模&#xff0c;是一种旨在优化数据库结构、提高数据一致性和完整性的设计方法。本文将深入探讨范式建模的概念、原理、步骤以及与维度建模的区别。 一、什么是范式建模&#xff1f; 范式建模是一种…

Chromium 中window.DOMParser接口说明c++

一、DOMParser DOMParser 可以将存储在字符串中的 XML 或 HTML 源代码解析为一个 DOM Document。 备注&#xff1a; XMLHttpRequest 支持从 URL 可寻址资源解析 XML 和 HTML&#xff0c;在其response 属性中返回Document。 你可以使用XMLSerializer 接口执行相反的操作 - 将…

接口测试自动化后起之秀-YApi接口管理平台

前言 众多接口管理工具如雨后春笋&#xff0c;让人欣慰的是&#xff0c;有许多优秀作品来自国内&#xff0c;包含Yapi和rap&#xff0c;看着中文的官网&#xff0c;华丽的汉语&#xff0c;不禁让人大快朵颐&#xff0c;暗自称爽。当然这也就带来另一个弊端&#xff0c;使用基数…

nodejs的卸载和nvm安装

由于项目需求&#xff0c;需要多版本控制的nodejs&#xff0c;所以要把原来的nodejs卸载干净&#xff0c;然后再装nvm 常见问题 1.在安装nvm的时候没有卸载node&#xff0c;导致使用nvm安装完之后&#xff0c;node和npm都不可用。 2.在第一次使用nvm安装node后&#xff0c;要…

从零开始使用最新版Paddle【PaddleOCR系列】——第二部分:自建数据集 + 模型微调训练

目录 一、自建数据集 1.官方数据集格式参考 2.自建数据集txt文件编写代码 3.数据集检验 二、模型训练 1.模型配置yaml文件 2.命令行指令训练 在上一篇文章中&#xff0c;构建好了paddleOCR 运行必需的环境&#xff0c;并通过在线下载的方式&#xff0c;使用官方训练好的模型进…

深入理解 JDK 的 Optional 类

深入理解 JDK 的 Optional 类 深入理解 JDK 的 Optional 类1. 什么是 Optional&#xff1f;1.1 主要构造方法示例 2. Optional 的常用方法2.1 判断值是否存在示例2.2 获取值示例2.3 进行操作示例 3. 使用场景3.1 避免 null 值示例3.2 提高代码可读性3.3 与流结合示例 4. 注意事…

中航资本:股市融资50万一天的利息是多少?融资一般多久归还?

融资官方利率是8.35%&#xff0c;实际上大部分券商融资利息在6%~8%左右&#xff0c;详细利率因券商及投资者状况而异。少部分券商可提供低至5%&#xff0c;乃至更低的优惠利率。 该利息按天然日核算&#xff0c;融资利息融资金额融资年利率实际使用资金的天然日天数/360。 假…

基于深度学习的细粒度图像分析综述【翻译】

&#x1f947; 版权: 本文由【墨理学AI】原创首发、各位读者大大、敬请查阅、感谢三连 &#x1f389; 声明: 作为全网 AI 领域 干货最多的博主之一&#xff0c;❤️ 不负光阴不负卿 ❤️ 文章目录 基础信息0 摘要1 INTRODUCTION2 识别与检索 RECOGNITION VS. RETRIEVAL3 问题和…

React01 开发环境搭建

React 开发环境搭建 一、创建 React 项目二、项目精简 一、创建 React 项目 执行下述命令创建 react 项目 blu-react-basis npx create-react-app blu-react-basis项目目录结构如下&#xff1a; 执行下述命令启动项目 npm run start启动效果如下&#xff1a; 二、项目精简 …

Vue.js 错误异常: Component template should contain exactly one root element.

一、错误异常&#xff1a; Errors compiling template: Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead. 二、原因 组件模板应该只包含一个根元素 查看vue代码&#xff0c;发…

OpenCV-人脸检测

文章目录 一、人脸检测流程二、关键方法三、代码示例四、注意事项 OpenCV是一个开源的计算机视觉和机器学习软件库&#xff0c;它提供了多种人脸检测方法&#xff0c;以下是对OpenCV人脸检测的详细介绍&#xff1a; 一、人脸检测流程 人脸检测是识别图像中人脸位置的过程&…

【C语言】数据输出格式控制

数据的输出格式修饰 常用两种&#xff1a; 整型中&#xff0c;输出数据左对齐、右对齐、占m位、不足m位前补0。浮点型中&#xff0c;默认通过四舍五入保留小数点后6位&#xff0c;通过参数设置保留小数点后n位。 #include <stdio.h> #define PI 3.14159 /* 功能&#x…

2024怎么选择网站建设公司?2024靠谱建站公司推荐TOP3

说起怎么挑个靠谱的网站建设公司啊&#xff0c;我觉得有这么几点挺关键的&#xff0c;咱们可以聊聊&#xff1a; 首先啊&#xff0c;你得瞅瞅这公司啥背景&#xff0c;成立了多久了&#xff0c;团队大不大&#xff0c;都服务过哪些客户&#xff0c;有啥拿得出手的成功案例没。…

如何判断通风天窗的优劣

通风天窗是否优质直接决定天窗的通风采光效果&#xff0c;影响厂房的空气质量。判断通风天窗的优劣主要从天窗使用材料、防水密封性能、通风性能、安装与售后服务等多方面出发。‌ ‌通风天窗使用材料是判断通风天窗优劣的重要因素之一。优质的通风天窗应采用耐候性强、坚固耐用…

ESP32-S3无法下载且报错的原因

该文将作为ESP32-S3下载报错记录&#xff0c;将持续更新 ARDUINO-IDE: Sketch uses 289393 bytes (22%) of program storage space. Maximum is 1310720 bytes. Global variables use 18408 bytes (5%) of dynamic memory, leaving 309272 bytes for local variables. Maximu…

多态常见面试问题

1、什么是多态&#xff1f; 多态&#xff08;Polymorphism&#xff09;是面向对象编程中的一个重要概念&#xff0c;它允许同一个接口表现出不同的行为。在C中&#xff0c;多态性主要通过虚函数来实现&#xff0c;分为编译时多态&#xff08;静态多态&#xff09;和运行时多态…

Java项目:160 基于springboot物流管理系统(PPT+论文+说明文档)

作者主页&#xff1a;舒克日记 简介&#xff1a;Java领域优质创作者、Java项目、学习资料、技术互助 文中获取源码 项目介绍 物流管理系统有管理员和用户两个角色。 ​ 管理员功能有个人中心&#xff0c;用户管理&#xff0c;车辆信息管理&#xff0c;公告信息管理&#xff…

windows以zip方式安装mysql8

1.下载安装包 mysql官网&#xff0c;下载后放到D:\Program Files\mysql-8.0.40-winx64 2.安装 cmd进入D:\Program Files\mysql-8.0.40-winx64\bin &#xff08;1&#xff09;在路径下新建my.ini配置文件 [mysql] # 设置mysql客户端默认字符集 default-character-setutf8 …