15
2020
05
form标签上定义请求类型的是哪个属性？定义请求地址的是哪个属性？
答：form表单定义请求类型的是 method 属性 ， 定义请求地址的是 action属性
作者:ghjk | 分类:css面试题 | 浏览:56 | 评论:0
15
2020
05
15
2020
05
很多网站不常用table iframe这两个元素，知道原因吗？
因为浏览器页面渲染的时候是从上至下的，而table 和 iframe 这两种元素会改变这样渲染规则，他们是要等待自己元素内的内容加载完才整体渲染。用户体验会很不友好。
作者:ghjk | 分类:css面试题 | 浏览:49 | 评论:0
15
2020
05
15
2020
05
请写出至少5个HTML行内元素标签
答：span a i label img input button textarea select 等
作者:ghjk | 分类:css面试题 | 浏览:54 | 评论:0
15
2020
05
写出5条Firefox和IE的脚本兼容问题？
绑定监听：IE是attatchEvent() 、 firefox是addEventListener();计算样式：IE是computedStyle、 firefox是getComputedSyle();滚动事件：IE是MouseWheel、 firefox是onmousewheel表单元素：IE是 document.forms(”formname”) ， firefox是document.forms["formname"]事件对象： IE是window.event
作者:ghjk | 分类:css面试题 | 浏览:45 | 评论:0
15
2020
05
在网页设计与制作时，为了使制作出来的网页下载速度快、布局合理、浏览方便、和谐悦目，应注意哪些问题？
1.网页文件大小2.页面布局3.页面导航4.图像大小5.颜色搭配6.背景图像
作者:ghjk | 分类:css面试题 | 浏览:52 | 评论:0
15
2020
05
一个网页制作完成后，在发布之前，我们会对页面进行测试，测试内容主要包括哪几个方面？
兼容性、js特效的bug、流畅度、加载速度的测试。
作者:ghjk | 分类:css面试题 | 浏览:52 | 评论:0
15
2020
05
请列举IE6的一些Bug的解决办法。
双倍margin：浮动的方向设置的和marign方便不相同即可。有链接的图片的边框：img{border:none}即可。3px bug ：给容器设置display:inline-block即可。overflow:hidden失效，用zoom:1;来解决。
作者:ghjk | 分类:css面试题 | 浏览:69 | 评论:0
15
2020
05
以下链接到电子邮件的正确格式是：
（B） A.<a href=”mailto://123@abcd.com”>邮箱</a>B.<a href=”mailto:123@abcd.com”>邮箱</a>C.<a href=”#mailto:123@abcd.com”>邮箱</a>D.<a href=”mail to://123@abcd.com”>邮箱</a><a href="mailto:123@email.c
作者:ghjk | 分类:css面试题 | 浏览:80 | 评论:0
15
2020
05
CSS的伪类有哪些？有什么作用？在各个浏览器下都兼容吗？
:hover、:visited、:link、:active。link没有点击的visited：点击过的hover悬停的active是按下那一瞬间。都兼容，但是要按照“爱恨准则”link、visited、hover、active放置。
作者:ghjk | 分类:css面试题 | 浏览:46 | 评论:0
15
2020
05
谈谈对CSS Sprites技术优缺点的理解。
CSS精灵技术，优点就是减少HTTP的请求数量，加快网页渲染速度。便于一整套更换，比如圣诞节了，此时可以改变CSS中的各种按钮、logo变成圣诞风格，一下子全变了。缺点就是不能随意改变之前已经在精灵上面的图片的位置，做repeat-x、repeat-y精灵难以实现。
作者:ghjk | 分类:css面试题 | 浏览:50 | 评论:0
15
2020
05
15
2020
05
写一段CSS代码，让Chrome支持小于12px的文字。
font-size:12px; -webkit-transform:scale(0.8);
作者:ghjk | 分类:css面试题 | 浏览:42 | 评论:0
15
2020
05
15
2020
05
定位的值有哪几种？区别是什么？
absolute：绝对定位。使用left，right，top，bottom等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据body对象。而其层叠通过z-index属性定义。当对象定位在浏览器窗口以外，浏览器因此显示滚动条。 relative：相对定位。将依据left，right，top，bottom等属性在正常文档流中偏移位置。当对象定位在浏览器窗口以外，浏览器因此显示滚动条。 static：元素框正常生成。块级元素生成一个矩形框，作
作者:ghjk | 分类:css面试题 | 浏览:46 | 评论:0
15
2020
05
如何解决IE6下select优先级高于div而导致的无法遮盖问题？
再写一个div，用此div盖住select。当select应该出现的时候，此时让div盖住它。
作者:ghjk | 分类:css面试题 | 浏览:44 | 评论:0
15
2020
05
请解释一下CSS的优先级，并说明优先级如何计算？
当多个选择器定义了同一个属性为不同值，根据优先级来确定以谁为准。id最大，类第二，标签名第三。数个数即可。比如：#box ul li.spec 权重就是（1,1,2）#box ul li权重就是（1,0,2）如果是继承，权重是0。如果都是继承，有“就近原则”。
作者:ghjk | 分类:css面试题 | 浏览:42 | 评论:0
15
2020
05
请用div+css简单写出一段“返回顶部”的悬浮效果。
<a name="top"></a>........<div class="top"> <a href="#top"></a></div> 样式:.top{position:fixed;right:20px;bottom:20px;width:100px;height:100px;}
作者:ghjk | 分类:css面试题 | 浏览:44 | 评论:0
15
2020
05
介绍你所知道的CSS hack技巧。
hack就是浏览器留的后门，方便对这一个版本的浏览器单独定义样式，_ 和 - 针对IE6，*width、+width用于IE7及以下。color:red\0; 是IE8、9、10的hack。color:red\9\0：是IE9、10的hask还有HTML中：<!--[if lte IE 7]> 代码 <![endif]-->
作者:ghjk | 分类:css面试题 | 浏览:40 | 评论:0
15
2020
05
标签的定义与用法，你常用的DOCTYPE是什么？
用在html标签之前，定义是HTML什么版本和XHTML什么版本。我常用<!DOCTYPE html>是html5的声明头。Strict版本不能使用b、u、itransitional版本可以使用b、u、i，所以HTML4中我经常使用这个。
作者:ghjk | 分类:css面试题 | 浏览:41 | 评论:0
15
2020
05
介绍盒子模型，说说标准盒子模型和IE盒子模型有什么区别，以及触发不同模型的条件？
标准盒子模型padding、margin外扩IE盒子模型是padding、marign内减。如同写上了box-sizing:border-box; width=content+padding+border要加上标准DTD，可以让IE使用标准盒子模型。去掉DTD此时浏览器叫做Quirk(怪异模式)。
作者:ghjk | 分类:css面试题 | 浏览:43 | 评论:0
15
2020
05
当p的元素设置为bold时，以下哪条CSS语句的说法是正确的
（D） A.<p style=”text-size:bold;”> B.<p style=”font-size:bold;”>C.p{text-size:bold;}D.p{font-weight:bold
作者:ghjk | 分类:css面试题 | 浏览:43 | 评论:0
15
2020
05
定义一个div，在IE8下高度为100px，在IE7下为120px，在IE6下为140px。
height:120px;-height:140px;height:100px\0;还有HTML的hack：<!--[if lt IE 7]><!--您的代码--><![endif]-->
作者:ghjk | 分类:css面试题 | 浏览:42 | 评论:0
15
2020
05
列举CSS中position的参数和作用？
四种定位：absolute、relative、fixed、static。展开说三种定位的参考点是什么。absolute：绝对定位。使用left，right，top，bottom等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据body对象。而其层叠通过z-index属性定义。当对象定位在浏览器窗口以外，浏览器因此显示滚动条。 relative：相对定位。将依据left，right，top，bottom等属性在正常文档流中偏移位置。当对象定位在浏览
作者:ghjk | 分类:css面试题 | 浏览:45 | 评论:0
15
2020
05
Form中的input可以设置readonly和disable，请问这两项属性有什么区别？
readonly表示只读， 不能更改元素内容。仅仅能作用在text/password/textarea上面。disabled表示不可用，能作用在所有控件上面，比如select、radio、checkbox。
作者:ghjk | 分类:css面试题 | 浏览:43 | 评论:0
15
2020
05
img src=”name” align=”left”的意思是?
（A）A.图像对于周围的文本左对齐B.图像对于周围的文本右对齐C.图像对于周围的文本底部对齐D.图像对于周围的文本顶部对齐
作者:ghjk | 分类:css面试题 | 浏览:47 | 评论:0
15
2020
05
前端工程师html 以上代码中不合理的部分有哪些？
首先如果要空格，应该使用css中的text-indent:2em; 并且如果要换行，应该使用语义标签ｐ。非要用ｂｒ，也要写<br />，而不是标签对儿。
作者:ghjk | 分类:css面试题 | 浏览:41 | 评论:0
15
2020
05
font-size：62.5%，解释一下如此设计字体大小的原因？
因为默认情况下html标签的默认字号是16px，此时如果取默认，那么1em就是16px，此时fotn-size:62.5%; 此时就能将HTML这个根元素的字号变为10px。此时页面上所有元素的尺寸就方便计算了。但是62.5%逐步退出了历史舞台，因为Chrome30版本不支持12px以下的字号了。
作者:ghjk | 分类:css面试题 | 浏览:41 | 评论:0
15
2020
05
15
2020
05
15
2020
05
rem为什么可以缩放，以什么为基准？
rem以html的字号为基准，比如2rem，而html的字号是16px，此时2rem就是32px。写一段JS让html根元素的字号随着浏览器宽度的变化而等比例变化，此时造成页面等比例缩放的现象。
作者:ghjk | 分类:css面试题 | 浏览:42 | 评论:0
15
2020
05
15
2020
05
标签上的alt与title属性区别是什么？
alt是alternate的简写，当图片不可以显示的时候的替代文本title是a、img、label等等标签的悬浮提示文本。
作者:ghjk | 分类:css面试题 | 浏览:39 | 评论:0
15
2020
05
15
2020
05
如何区别CSS中的display:none和visibility:hidden？
display:none; 释放了自己的位置，后面的元素会上来占据现有位置，并且如果内部有img元素，此时img元素不会加载；visibility:hidden如同opacity：0；只是不可见了，位置还是保留的。
作者:ghjk | 分类:css面试题 | 浏览:45 | 评论:0
15
2020
05
你如何理解HTML的语义化？能否接触或了解重构？
根据语义来选择合适的标签，而不是表现形式。HTML只负责语义，不是说要加粗了，就放一个h，只是可以让开发者能写出优雅的代码，并且利于SEO。网页重构指的是将Table布局的网页变为标准DIV+CSS代码，让结构和表现分离，方便维护
作者:ghjk | 分类:css面试题 | 浏览:44 | 评论:0
15
2020
05
一个页面（HTML）由哪几部分构成？分别是什么？作用是什么？
由head和body构成。head里面放置一些配置信息，比如配置title、keyword、description、charset等等信息，不会显示在浏览器中。body是内容，会显示在浏览器的屏幕中。
作者:ghjk | 分类:css面试题 | 浏览:44 | 评论:0
15
2020
05
在HTML代码中如何做SEO？
1.h标签合理使用，strong标签语义比较强，合理使用。2.title、<meta name="description" />、<meta name="keywords" />要合理设置3.a标签要写title，img要写alt4.div要有合理类名，比如.content、.header、.address，便于搜索引擎爬虫检索5.HTML层次清晰，id不要重复，便于搜索引擎爬虫检索
作者:ghjk | 分类:css面试题 | 浏览:41 | 评论:0
15
2020
05
以下有若干个CSS选择器，请给出他们的优先级顺序。 div h1、 #div h1、 div h1 #_h、 div h1.c_h
div h1权重(0,0,2)#div h1权重（1,0,1）div h1 #_h权重（1,0,2） 这个最大div h1.c_h 权重（0,1,2)
作者:ghjk | 分类:css面试题 | 浏览:39 | 评论:0
15
2020
05
请解释浏览器是如何根据CSS选择器选择对应元素的？
#表示id，浏览器会寻找拥有id的元素。.表示类名class属性，空格表示后代，> 表示子元素, + 表示下一个兄弟 ， ~ 后面所有兄弟。
作者:ghjk | 分类:css面试题 | 浏览:39 | 评论:0
15
2020
05
CSS层叠是什么？
CSS全名叫做层叠式样式表，cascading style sheet，cascading就是层叠的意思。层叠具体有两层含义：1） 比如一个标签它可以通过多种手段给他添加属性。<h1 id="logo" class="spec"></h1>#logo{}.spec{}h1{}body{}此时这个标签就被多个选择器添加属性，如果属性有冲突，CSS有精确的权重计算方法来确定“听谁的”。2） 一个选择器可以同时作用在多个标签身上，比如同一
作者:ghjk | 分类:css面试题 | 浏览:42 | 评论:0
15
2020
05
简述一下什么是内容与表现分离。
HTML就是负责语义，其他什么都不需要管。HTML不要用b、u、i来设置加粗、下划线、倾斜，而是写font-weight:bold; text-decoration:underline; font-style:italic; 用CSS来表示。再比如，logo可以用h1，用背景替换文字来呈递图片。text-indent:-999em;CSS负责样式，不要写行内样式。
作者:ghjk | 分类:css面试题 | 浏览:45 | 评论:0
15
2020
05
在书写高效CSS时，需要考虑哪些问题？
基本原则是：去掉不必要的样式、合并相同的样式、尽可能缩小样式的大小、多用公共类、让css变得不臃肿。我在工作中，经常使用gulp中有一个插件叫做gulp-csso，可以智能合并相同的样式，比如div p{font-size:10px;color:green;} p{color:green;} 它会智能变为：div p{font-size:10px;} p{color:green;}。
作者:ghjk | 分类:css面试题 | 浏览:43 | 评论:0
15
2020
05
CSS引入的方法有哪些？都有什么区别？
外链式（也叫作外联式）<link href="1.css" type="text/css" rel="stylesheet" />内嵌式（也叫作内联式）<style type="text/css"></style>导入式<style>@import url(1.css)</style>行内式<div style="width:200px;ba
作者:ghjk | 分类:css面试题 | 浏览:43 | 评论:0
15
2020
05
行内元素和块级元素的区别，行内元素有哪些，块级元素有哪些？
行内元素不能设置宽度、高度，但是能并排显示，浏览器视行内元素是“文本流元素”。span、a、em、b、u、i。块级元素能设置宽度、高度，但是不能并排显示。div、h1、ul、p、li、section、header。
作者:ghjk | 分类:css面试题 | 浏览:45 | 评论:0
15
2020
05
简单说明绝对定位和浮动的区别和应用。
绝对定位脱离标准文档流，它的参考点是文档的左上角或者右上角。如果有任何父元素有定位属性，此时就依据“子绝父相”规则来设置自己的定位参考元素。在做网页时候非常的灵活方便。制作覆盖效果的时候，会大量使用绝对定位。浮动脱离标准文档流，通常用于制作并排显示的元素，通常用于大的布局，或者无序列表比如图片的并排。可以使用clear:both属性让标准流中的其他元素在此之后依次排列。
作者:ghjk | 分类:css面试题 | 浏览:46 | 评论:0
15
2020
05
描述一下浮动会造成什么影响，如何居中一个浮动元素？
【脱标】浮动的元素脱离标准文档流，【贴边】左浮动就会贴左边，又浮动贴右边，贴上一个兄弟元素的边，【字围】字会环绕这个浮动元素，【收缩】不区分行内元素和块级元素了，原来的行内元素现在可以设置宽度、高度，原来的块级元素如果不写width现在会自动缩减为内容宽度。浮动的元素要想居中，必须相对定位。相对定位利用margin-left:50%; left:-宽度一半。原理就是margin-left:50%;此时元素的左边线就会到屏幕中线，拉回自己的width一半即可。所以要用相对定位拉动。或者transf
作者:ghjk | 分类:css面试题 | 浏览:43 | 评论:0
15
2020
05
如何清除一个标签的子标签的浮动？
清除浮动的几种方法：1.父元素有高度，此时就没有浮动的影响了2.父元素如果不愿意设置固定死的高度，而是自动适配，就写overflow:hidden;_zoom:1;3.后面的元素父盒子加上clear:both;盒子还是没有高度，margin失效；4.两个盒子之前加上一个<div class="cl"></div> .cl{clear:both}，隔墙法，盒子还是没有高度。5.盒子加上::after{content:""
作者:ghjk | 分类:css面试题 | 浏览:48 | 评论:0
09
2020
04
阐述一下CSS Sprites
将一个页面涉及到的所有图片都包含到一张大图中去，然后利用CSS的 background-image，background- repeat，background-position 的组合进行背景定位。利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能；CSS Sprites能减少图片的字节。
作者:ghjk | 分类:css面试题 | 浏览:79 | 评论:0
09
2020
04
CSS属性overflow属性定义溢出元素内容区的内容会如何处理?
参数是scroll时候，必会出现滚动条。参数是auto时候，子元素内容大于父元素时出现滚动条。参数是visible时候，溢出的内容出现在父元素之外。参数是hidden时候，溢出隐藏。
作者:ghjk | 分类:css面试题 | 浏览:85 | 评论:0
09
2020
04
style标签写在body后与body前有什么区别？
页面加载自上而下 当然是先加载样式。写在body标签后由于浏览器以逐行方式对HTML文档进行解析，当解析到写在尾部的样式表（外联或写在style标签）会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染，在windows的IE下可能会出现FOUC现象（即样式失效导致的页面闪烁问题）
作者:ghjk | 分类:css面试题 | 浏览:79 | 评论:0
09
2020
04
png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？
png是便携式网络图片（Portable Network Graphics）是一种无损数据压缩位图文件格式.优点是：压缩比高，色彩好。 大多数地方都可以用。jpg是一种针对相片使用的一种失真压缩方法，是一种破坏性的压缩，在色调及颜色平滑变化做的不错。在www上，被用来储存和传输照片的格式。gif是一种位图文件格式，以8位色重现真色彩的图像。可以实现动画效果.webp格式是谷歌在2010年推出的图片格式，压缩率只有jpg的2/3，大小比png小了45%。缺点是压缩的时间更久了，兼容性不好，目前谷歌
作者:ghjk | 分类:css面试题 | 浏览:70 | 评论:0
09
2020
04
有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度
外层div使用position：relative；高度要求自适应的div使用position: absolute; top: 100px; bottom: 0; left: 0
作者:ghjk | 分类:css面试题 | 浏览:71 | 评论:0
09
2020
04
为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式？
浮动元素碰到包含它的边框或者浮动元素的边框停留。由于浮动元素不在文档流中，所以文档流的块框表现得就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。浮动带来的问题：父元素的高度无法被撑开，影响与父元素同级的元素与浮动元素同级的非浮动元素（内联元素）会跟随其后若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。清除浮动的方式：父级div定义height最后一个浮动元素后加空div标签 并添加样式clear:both。包含浮动元素的父标签添加样式overflow为hidde
作者:ghjk | 分类:css面试题 | 浏览:70 | 评论:0
09
2020
04
对BFC规范(块级格式化上下文：block formatting context)的理解？
BFC规定了内部的Block Box如何布局。定位方案：内部的Box会在垂直方向上一个接一个放置。Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠。每个元素的margin box 的左边，与包含块border box的左边相接触。BFC的区域不会与float box重叠。BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。计算BFC的高度时，浮动元素也会参与计算。满足下列条件之一就可触发BFC根元素，即htmlfloat的值不
作者:ghjk | 分类:css面试题 | 浏览:68 | 评论:0
09
2020
04
position跟display、overflow、float这些特性相互叠加后会怎么样？
display属性规定元素应该生成的框的类型；position属性规定元素的定位类型；float属性是一种布局方式，定义元素在哪个方向浮动。类似于优先级机制：position：absolute/fixed优先级最高，有他们在时，float不起作用，display值需要调整。float 或者absolute定位的元素，只能是块元素或表格。
作者:ghjk | 分类:css面试题 | 浏览:83 | 评论:0
09
2020
04
display:none与visibility：hidden的区别？
display：none 不显示对应的元素，在文档布局中不再分配空间（回流+重绘）visibility：hidden 隐藏对应元素，在文档布局中仍保留原来的空间（重绘）重绘：当render-tree中的一些元素需要更新属性，而这些属性只影响元素的外观、风格，而不影响布局，比如是background-color,则就称为重绘。回流：当页面中的布局和几何属性改变时就需要回流，比如是：<1>、添加或删除可见的DOM元素<2>、元素位置的改变<3>、元素尺寸的改变（边
作者:ghjk | 分类:css面试题 | 浏览:69 | 评论:0
09
2020
04
CSS里的visibility属性有个collapse属性值？在不同浏览器下以后什么区别？
当一个元素的visibility属性被设置成collapse值后，对于一般的元素，它的表现跟hidden是一样的。chrome中，使用collapse值和使用hidden没有区别。firefox，opera和IE，使用collapse值和使用display：none没有什么区别。
作者:ghjk | 分类:css面试题 | 浏览:66 | 评论:0
09
2020
04
absolute的containing block计算方式跟正常流有什么不同？
无论属于哪种，都要先找到其祖先元素中最近的 position 值不为 static 的元素，然后再判断：若此元素为 inline 元素，则 containing block 为能够包含这个元素生成的第一个和最后一个 inline box 的 padding box (除 margin, border 外的区域) 的最小矩形；否则,则由这个祖先元素的 padding box 构成。如果都找不到，则为 initial containing block。补充：static(默认的)/relative：
作者:ghjk | 分类:css面试题 | 浏览:67 | 评论:0
09
2020
04
为什么要初始化CSS样式
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差
作者:ghjk | 分类:css面试题 | 浏览:69 | 评论:0
09
2020
04
常见的兼容性问题？
不同浏览器的标签默认的margin和padding不一样。*{ margin:0; padding:0;} IE6双边距bug：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大。hack：display:inline;将其转化为行内属性。渐进识别的方式，从总体中逐渐排除局部。首先，巧妙的使用“9”这一标记，将IE浏览器从所有情况中分离出来。接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。{back
作者:ghjk | 分类:css面试题 | 浏览:61 | 评论:0
09
2020
04
一个满屏品字布局如何设计?
方法一：上面那块用margin: 0 auto;居中； 下面两块用float或者inline-block不换行； 用margin调整位置使他们居中。方法二：上面的div设置成100%，下面的div分别宽50%，然后使用float或者inline使其不换行。
作者:ghjk | 分类:css面试题 | 浏览:70 | 评论:0
08
2020
04
用纯css创建一个三角形的原理是什么？
首先，需要把元素的宽高设置为0，然后设置边框样式。width: 0;height: 0;border-top: 40px solid transparent;border-left: 40px solid transparent;border-right: 40px solid transparent;border-bottom: 40px solid #00ff00;
作者:ghjk | 分类:css面试题 | 浏览:81 | 评论:0