前端⾯试题整理—HTMLCSS篇
1、简述⼀下你对HTML语义化的理解
1）⽤正确的标签做正确的事情
2）html语义化让页⾯的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析
3）即使在没有样式CSS情况下也以⼀种⽂档格式显⽰，并且是容易阅读的
4）搜索引擎的爬⾍也依赖于HTML标记来确定上下⽂和各个关键字的权重，利于SEO
5）使阅读源代码的⼈对⽹站更容易将⽹站分块，便于阅读维护理解
2、Doctype作⽤？标准模式与兼容模式之间区别？
<!DOCTYPE>声明位于位于HTML⽂档中的第⼀⾏，处于 <html>标签之前，告知浏览器的解析器⽤什么⽂档标准解析这个⽂档
DOCTYPE不存在或格式不正确会导致⽂档以兼容模式呈现
标准模式的排版和JS运作模式都是以该浏览器⽀持的最⾼标准运⾏
在兼容模式中，页⾯以宽松的向后兼容的⽅式显⽰，模拟⽼式浏览器以防⽌站点⽆法⼯作
3、什么是盒模型？你是怎么理解的
简单的说页⾯是由若⼲个盒模型（BOX）堆砌起来的，可以说每个HTML元素就是⼀个盒模型
盒模型由外到内包括边距(margin)、边框（border）、填充(padding)、内容(content)
盒⼦模型有两种分别是W3C标准模型和IE模型
不同之处：
标准模型宽⾼是指content，不包括padding和border
IE模型的宽⾼是指content+padding+border的总宽⾼
4、谈谈对BFC的理解
BFC：块格式化上下⽂(Block Formatting Context)
BFC 是⼀个独⽴的布局环境，可以理解为⼀个容器，在这个容器中按照⼀定规则进⾏物品摆放，并且不会影响其它环境中的物品
BFC的特性：
1）bfc 是⼀个独⽴的容器，容器内⼦元素不会影响容器外的元素
2）bfc的区域不会与float的元素区域重叠
3）计算bfc的⾼度时，浮动元素也参与计算
4）垂直⽅向上的距离由margin决定
5）内部的Box会在垂直⽅向上⼀个接⼀个的放置
以下条件会形成BFC：
1）浮动元素 float:left | right | inherit（none除外）
2）position:absolute 或 fixed 定位
3）display:inline-block | inline-flex | table-cell
4）overflow:hidden | auto | scroll (visible除外)
5、CSS选择符有哪些？哪些属性可以继承？
id选择器（ # myid）
类选择器（.myclassname）
标签选择器（div, h1, p）
相邻选择器（h1 + p）
⼦选择器（ul > li）
后代选择器（li a）
通配符选择器（ * ）
属性选择器（a[rel = "external"]）
伪类选择器（a:hover, li:nth-child）
可继承的样式： font-size font-family color, ul li dl dt dd
不可继承的样式：border padding margin width height
6、CSS优先级算法如何计算？
优先级就近原则，同权重情况下样式定义最近者为准
载⼊样式以最后载⼊的定位为准
优先级为: !important > id > class > tag important ⽐内联优先级⾼
7、你理解的伪类与伪元素
伪类：⽤于向某些选择器添加特殊的效果。⽐如span:first-child{}
伪元素：⽤于将特殊的效果添加到某些选择器。⽐如span:before{}
伪类只要不是互斥可以叠加使⽤
伪元素在⼀个选择器中只能出现⼀次，并且只能出现在末尾
伪类与伪元素优先级分别与类、标签优先级相同
它们的本质区别：是否抽象创造了新元素
8、display有哪些值？box-sizing 常⽤的属性有哪些？说明他们的作⽤
block 像块类型元素⼀样显⽰。
none 缺省值。像⾏内元素类型⼀样显⽰。
inline-block 像⾏内元素⼀样显⽰，但其内容像块类型元素⼀样显⽰。
list-item 像块类型元素⼀样显⽰，并添加样式列表标记。
table 此元素会作为块级表格来显⽰
inherit 规定应该从⽗元素继承 display 属性的值
box-sizing: content-box; // 默认的标准(W3C)盒模型元素效果
box-sizing: border-box; // 触发怪异(IE)盒模型元素的效果
box-sizing: inherit; // 继承⽗元素 box-sizing 属性的值
9、什么是外边距重叠？重叠的结果是什么？
外边距重叠就是 margin-collapse
相邻的两个盒⼦（可能是兄弟关系也可能是祖先关系）的外边距可以结合成⼀个单独的外边距。这种合并外边距的⽅式被称为折叠 折叠结果遵循下列计算规则：
1）两个相邻的外边距都是正数时，折叠结果是它们两者之间较⼤的值
2）两个相邻的外边距都是负数时，折叠结果是两者绝对值的较⼤值
3）两个外边距⼀正⼀负时，折叠结果是两者的相加的和
10、请列举⼏种隐藏元素的⽅法
1）display: none; 元素会变得不可见，并且不会再占⽤⽂档的空间
2）visibility: hidden; 只是简单的隐藏某个元素，但是元素占⽤的空间还存在
3）opacity: 0; 设置0可以使⼀个元素完全透明
4）position: absolute; 设置⼀个很⼤的 left 负值定位，使元素定位在可见区域之外
5）transform: scale(0); 将⼀个元素设置为缩放⽆限⼩，元素不可见原来位置将被保留
11、你对line-height是如何理解的？
line-height 指⼀⾏字的⾼度，包含了字间距，实际上是下⼀⾏基线到上⼀⾏基线距离
⼀个容器没有设置⾼度，那么撑开容器⾼度的是 line-height ⽽不是容器内的⽂字内容
把 line-height 值设置为 height ⼀样⼤⼩的值可以实现单⾏⽂字的垂直居中
line-height和height都能撑开⼀个⾼度，height会触发 haslayout，⽽line-height不会
12、⾏内元素有哪些？块级元素有哪些？空(void)元素有那些？
⾏内元素有：a b span img input select strong
块级元素有：div ul ol li dl dt dd h1-h6 p
常见的空元素: <br> <hr> <img> <input> <link> <meta>玫瑰花的特点
13、position有哪些值，他们各⾃的区别
absolute：⽣成绝对定位的元素，相对于值不为 static的第⼀个⽗元素进⾏定位
relative：⽣成相对定位的元素，相对于其正常位置进⾏定位
fixed：⽣成绝对定位的元素，相对于浏览器窗⼝进⾏定位（固定定位）
static：默认值,⽆定位，元素出现在正常的流中（忽略top,bottom,left,right z-index）
14、HTML5有哪些新特性，新技术，如何区分HTML和HTML5？
语意化更好的内容元素。⽐如header、footer、nav、section、article
⽤于媒介回放的 video 和 audio 元素
绘画 canvas
拖放Drag
天净沙秋思译文 表单控件，calendar、date、time、email、url、search
存储功能localStorage和sessionStorage
localStorage 长期存储数据，浏览器关闭后数据不丢失
sessionStorage的数据在浏览器关闭后⾃动删除
新的技术webworker, websocket（通讯协议）, Geolocation（地理定位）
区分HTML和HTML5:
DOCTYPE声明上不同
结构语义上不同
添加了新的功能媒体标记标签，如audio、video
15、SVG 与 Canvas两者间的区别
SVG 是⼀种使⽤ XML 描述 2D 图形的语⾔
Canvas 通过 JavaScript 来绘制 2D 图形
豇豆种植技术 SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可⽤的，在SVG 中，每个被绘制的图形均被视为对象
如果 SVG 对象的属性发⽣变化，那么浏览器能够⾃动重现图形
Canvas 是逐像素进⾏渲染的
在 canvas 中，⼀旦图形被绘制完成，它就不会继续得到浏览器的关注
如果其位置发⽣变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象
16、为什么要初始化CSS样式
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的
盘核桃 如果没对CSS初始化往往会出现浏览器之间的页⾯显⽰差异
可以使⽤ reset.css 或 Normalize.css 做 CSS 初始化
17、rgba() 和 opacity 的透明效果有什么不同？
opacity 作⽤于元素以及元素内的所有内容（包括⽂字）的透明度
rgba() 只作⽤于元素⾃⾝的颜⾊或其背景⾊，⼦元素不会继承透明效果
18、请描述⼀下 cookies，sessionStorage 和 localStorage 的区别
cookie是⽹站为了标⽰⽤户⾝份⽽储存在⽤户本地终端上的数据（⼀般加密）
sessionStorage和localStorage不会⾃动把数据发给服务器，仅在本地保存
存储⼤⼩：
cookie数据⼤⼩不能超过4k
sessionStorage和localStorage虽然也有存储⼤⼩的限制，但⽐cookie⼤得多，可以达到5M或更⼤
有效时间：
localStorage 存储持久数据，浏览器关闭后数据不丢失除⾮主动删除数据
sessionStorage 数据在当前浏览器窗⼝关闭后⾃动删除
cookie 设置的cookie过期时间之前⼀直有效，即使窗⼝或浏览器关闭
19、浏览器是怎么对HTML5的离线储存资源进⾏管理和加载的？
1）在线的情况下，浏览器发现 html 标签有 manifest 属性，它会请求 manifest ⽂件
2）如果是第⼀次访问app，那么浏览器就会根据 manifest ⽂件的内容下载相应的资源并且进⾏离线存储
3）如果已经访问过app且资源已经离线存储了，浏览器会对⽐新的 manifest ⽂件与旧的 manifest ⽂件，如果⽂件没有发⽣改变，就不做任何操作。如果⽂件改变了，那么就会重新下载⽂件中的资源并进⾏离线存储
4）离线的情况下，浏览器就直接使⽤离线存储的资源
20、页⾯导⼊样式时，使⽤ link 和 @import 有什么区别？
link 属于HTML标签，除了加载CSS外，还能⽤于定 RSS等；@import 只能⽤于加载CSS
页⾯加载的时，link 会同时被加载，⽽ @import 引⽤的 CSS 会等到页⾯被加载完再加载
@import 只在 IE5 以上才能被识别，⽽ link 是HTML标签，⽆兼容问题
21、列举⼏种清除浮动的⽅法
1)给⽗级使⽤:after 伪元素
2）末尾处添加空div标签clear:both
3）⽗元素设置 overflow：hidden; （必须定义width或zoom:1）
4）⽗元素也设置浮动
5）结尾处加br标签clear:both
22、什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？
响应式设计就是⽹站能够兼容多个终端（包括PC端，⼿机平板终端），⽽不是为每个终端做⼀个特定的版本
基本原理是利⽤CSS3媒体查询，为不同尺⼨的设备适配不同样式
对于低版本的IE，可采⽤JS获取屏幕宽度，然后通过resize⽅法来实现兼容
23、⽔平居中、垂直居中的⽅法有哪些？
⽔平居中：
1）inline-block实现⽔平居中（text-align:center;）
2）margin和width实现⽔平居中
3）绝对定位实现⽔平居中
4）使⽤flex实现⽔平居中
5）使⽤栅格布局grid实现⽔平居中
垂直居中：
1）新增 inline-block 兄弟元素，设置 vertical-align
2）绝对定位配合 transform 位移
3）使⽤flex弹性盒⼦display:flex
4）未知⾼度的块级⼦元素，采⽤table-cell配合vertical-align
5）已知⾼度的块级⼦元素，采⽤绝对定位和负边距
6）通过css3的translate变形实现
24、你理解的flex弹性盒⼦布局
Flexbox⽤于不同尺⼨屏幕中创建可⾃动扩展和收缩布局
任何⼀个容器都可以指定为Flex布局
使⽤弹性布局可以有效的分配⼀个容器的空间
即使我们的容器元素尺⼨改变，它内部的元素也可以调整它的尺⼨来适应空间
设置了flex布局后，⼦元素的float、clear和vertical-align属性就会失效
25、阐述px与em、rem的区别，以及你知道的其他css单位
px就是pixel像素的缩写，相对长度单位。常⽤于PC端的字体单位
em相对于当前⽗元素的font-size（并不是固定的）
rem相对于HTML根元素的font
其他css单位：
%百分⽐，⼀般来说就是相对于⽗元素
vw是相对视⼝（viewport）的宽度⽽定的，长度等于视⼝宽度的1/100
vh是相对视⼝（viewport）的⾼度⽽定的，长度等于视⼝⾼度的1/100
vm css3新单位，相对于视⼝的宽度或⾼度中较⼩的那个
26、实现左边固定宽度，右边⾃适应（不限于⼀种⽅法）
1）浮动布局（左侧固定宽度并且左浮动，右侧使⽤margin-left）
2）使⽤定位（左侧固定宽度并且绝对定位，右侧使⽤margin-left）
3）overflow（左侧固定宽并且左浮动，右侧加overflow：hidden）
4）flex布局（⽗级元素设置display:flex，左侧设置固定宽，右侧flex:1）
27、使⽤css实现⼀个持续的动画
.
animat{
width:20px;
height:20px;
background:red;
position:relative;
animation:mymove 3s infinite;
}
@keyframes mymove{
from{left:0px;}
to{left:200px;}
}
28、css实现三⾓形
.triangle{
width:0;
height:0;
border-width:20px;
border-style:solid;
border-color:transparent transparent red transparent;
}
29、移动端开发中有哪些常⽤的布局？
百分⽐流式布局
flex布局
媒体查询+rem布局
固定宽度做法
30、什么是圣杯布局和双飞翼布局，并说下实现原理
圣杯布局：
三列布局；中间主体内容前置，且宽度⾃适应；两边内容定宽
好处：重要的内容放在⽂档流前⾯可以优先渲染
原理：利⽤相对定位、浮动、负边距布局，⽽不添加额外标签
双飞翼布局：
双飞翼布局：对圣杯布局（使⽤相对定位对以后布局有局限性）的改进，消除相对定位
原理：主体元素上设置左右边距，预留两翼位置。左右两栏使⽤浮动和负边距归位，消除相对定位31、align-content与align-items的区别？
align-content:center对单⾏是没有效果的
⽽align-items:center不管是对单⾏还是多⾏都有效果
我们⽇常开发中⽤的⽐较多的就是align-items
32、列举去除inline-block出现间距的⼏种⽅法
1）给⽗级font-size：0
2）使⽤margin负值
3）使⽤letter-spacing
4）使⽤word-spacing
个人自传 入党 5）移除空格
33、title与h1的区别、b与strong的区别、i与em的区别？
title属性没有明确意义只表⽰是个标题，H1则表⽰层次明确的标题，对页⾯信息的抓取有很⼤的影响
b是⼀个实体标签，展⽰强调内容。strong是标明重点内容，有语⽓加强的含义
i内容展⽰为斜体，em表⽰强调的⽂本
34、<script>、<script defer>、<script async>三者之间区别
没有defer或async属性，浏览器会⽴即加载并执⾏相应的脚本
有了async属性，表⽰后续⽂档的加载和渲染与js脚本的加载和执⾏是并⾏进⾏的，即异步执⾏
有了defer属性，加载后续⽂档的过程和js脚本的加载是并⾏进⾏的
（此时仅加载不执⾏）
defer和async在⽹络加载过程是⼀致的，都是异步执⾏
两者的区别在于脚本加载完成之后何时执⾏
如果存在多个有defer属性的脚本，那么它们是按照加载顺序执⾏脚本的
对于async，它的加载和执⾏是紧挨的，⽆论声明顺序如何，只要加载完成⽴刻执⾏
35、data-的⽤法，以及他的优势
data-代表⾃定义属性，可以在所有的 HTML 元素中嵌⼊数据
⾃定义的数据可以让页⾯拥有更好的交互体验
属性名不要包含⼤写字母，在 data- 后必须⾄少有⼀个字符
该属性可以是任何字符串
⾃定义属性前缀 "data-" 会被客户端忽略
36、如何实现浏览器内多个标签页之间的通信?
WebSocket、SharedWorker
也可以调⽤localstorge、cookies等本地存储⽅式
37、实现不使⽤border画出1px⾼的线
注：在不同浏览器的标准模式与怪异模式下都能保持⼀致的效果
<div ></div>
38、怎么让Chrome⽀持⼩于12px 的⽂字
.shrink{
-webkit-transform:scale(0.8);
-o-transform:scale(1);
display:inline-block;
}
39、⼀个满屏品字布局如何设计?
上⾯的div宽100%有人欠钱不还怎么办
下⾯的两个div分别宽50%
然后⽤float或者inline使其不换⾏即可
40、经常遇到的浏览器的兼容性有哪些？解决⽅法是什么？
1）PNG24位的图⽚在ie6浏览器上出现背景，解决⽅案是做成PNG8
2）浏览器默认的margin和padding不同。解决⽅案：*{margin:0;padding:0;}
3）Chrome中⽂界⾯下默认会将⼩于12px的⽂本强制按照12px显⽰，可通过加⼊CSS属性-webkit-text-size-adjust:none解决 4）IE下，可以使⽤获取常规属性的⽅法来获取⾃定义属性，也可以使⽤getAttribute()获取⾃定义的属性
在FireFox下，只能使⽤getAttribute()获取⾃定义属性；解决⽅法：统⼀通过getAttribute()获取⾃定义属性
5）IE下，even对象有x,y属性，但是没有pageX,pageY属性
在Firefox下，even对象有pageX,pageY属性，但是没有x,y属性
解决⽅法：(条件注释)缺点是在IE浏览器下可能会增加额外的HTTP请求数
41、less如何定义⼀个函数，⽐如圆⾓
//定义圆⾓
@radius
.round(@radius:5px){
border-radius:@radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}
.round7{
.round(7px);
}
42、如何平移放⼤⼀个元素
transform:translateX(100px)
transform:scale(2)
43、CSS中动画实现的⽅式有⼏种
transition、keyframes(animation)
44、你知道的CSS预处理器，以及预处理器作⽤
less、sass、Stylus
作⽤：
帮助更好地组织CSS代码
提⾼代码复⽤率
提升可维护性
45、如何解决CSS模块化
less sass 等CSS预处理器
webpack处理CSS(css-loader+style-loader)
PostCSS插件(postCSS-import/precss等)
46、li与li之间有看不见的空⽩间隔是什么原因引起的？有什么解决办法？
浏览器的默认⾏为会把inline元素间的空⽩字符渲染成⼀个空格，空格会占⽤⼀个字符的宽度
解决⽅案：给⽗级font-sieze设置为0。或者采⽤letter-spacing⽅式
47、描述⼀下你对渐进增强和优雅降级的理解
渐进增强：针对低版本浏览器进⾏构建页⾯，保证最基本的功能，然后再针对⾼级浏览器进⾏效果、交互等改进和追加功能达到更好的⽤户体验.transition{
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
优雅降级：⼀开始就构建完整的功能，然后再针对低版本浏览器进⾏兼容
.transition{
transition: all .5s;
-o-transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
}
48、解释css sprites，如何使⽤
css精灵⼜称雪碧图
将多个⼩图⽚整个到⼀张⼤的背景图上，再利⽤repeat、position进⾏精准操作
雪碧图减轻了服务器的请求次数，提⾼了页⾯性能
49、针对移动浏览器端开发页⾯，不期望⽤户放⼤屏幕，且要求“视⼝（viewport）”宽度等于屏幕宽度，视⼝⾼度等于设备⾼度，如何设置？
<meta name = "viewport" content = "width=device-width,initial-scale = 1.0,maximum-scale = 1.0">
50、简述⼏个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；
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论