css和HTML面试题 1、你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?
IE:trident内核
Firefox：gecko内核
Safari:webkit内核
Opera:以前是presto内核，Opera现已改用GoogleChrome的Blink内核
Chrome:Blink(基于webkit，Google与OperaSoftware共同开发)
2、行内元素、块元素和行内块元素都有什么？区别是什么行内元素：span，em，a，label，textarea，b，select
特点：
(1)设置宽高无效
(2)对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间
(3)不会自动进行换行
块元素：div，ul，li，p，nav、aside、header、footer、section、article
特点：
（1）可以自动换行；
（2）能够识别宽高；
（3）margin和padding的上下左右均对其有效
（4）多个块状元素标签写在一起，默认排列方式为从上至下
行内块元素：img input
特点：
（1）不自动换行
（2）能够识别宽高
（3）默认排列方式从左到右
3.< image>标签上的title属性和alt属性的区别？alt如果无法显示图像，浏览器将显示替代文本
title（鼠标放在图片上显示信息）属性为设置该属性的元素提供建议性的信息
4、请写出至少5个html5新增的标签，并说明其语义和应用场景？ section：定义文档中的一个章节 nav：定义只包含导航链接的章节 header：定义页面或章节的头部。它经常包含 logo、页面标题和导航性的目录。 footer：定义页面或章节的尾部。它经常包含版权信息、法律信息链接和反馈建议用的地址。 aside：定义和页面内容关联度较低的内容——如果被删除，剩下的内容仍然很合理。 标签定义其所处内容之外的内容 <i> 标签显示斜体文本效果。 兼容所有浏览器 <video> 标签定义视频 <article> 标签规定独立的自包含内容 <main> 标签规定文档的主要内容。 5、html5有哪些新特性、移除了那些元素？HTML5 主要是关于图像，位置，存储，多任务等功能的增加。
新增：拖拽释放(Drag and drop) API，语义化更好的内容标签（header,nav,footer,aside,article,section），音频、视频API(audio,video)，画布(Canvas) API，地理(Geolocation) API，本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失，sessionStorage 的数据在页面会话结束时会被清除，表单控件，calendar、date、time、email、url、search
移除的元素：纯表现的元素：basefont，big、u等；对可用性产生负面影响的元素：frame，frameset等
6. iframe的优缺点？优点：
a. 解决加载缓慢的第三方内容如图标和广告等的加载问题
b. iframe无刷新文件上传
c. iframe跨域通信
缺点：
a. iframe会阻塞主页面的Onload事件
b. 无法被一些搜索引擎索引到
c. 页面会增加服务器的http请求
d. 会产生很多页面，不容易管理。
7、设置文字水平居中的属性是？设置标签盒子水平居中的属性是？text-align:center;
margin:0 auto;
8.谈谈对css布局的理解？固定布局、流式布局、弹性布局、浮动布局、定位布局、margin和padding
9.清除浮动的方法1.空标签法（隔墙法）
在浮动元素末尾添加一个空的标签例如:
< div style="clear:both"></ div>或则其他标签br等即可。
优点：通俗易懂，书写方便；
缺点：添加许多无意义的标签，结构化较差
2.父元素添加overflow属性方法
给父级添加
overflow：hidden/auto/scroll优点：代码简洁
缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。
3.after伪元素清除浮动：
:after方式为空元素额外标签法的升级版，好处是不用单独加标签
.clearfix:after{ content:''; display:block; height:0; clear:both; visibility:hidden; } .clearfix{ *zoom:1;//IE6,7专有 }优点：符合闭合浮动思想 结构语义化正确
缺点：由于IE6,7不支持：after，使用zoom：1触发haslaout
4.使用双伪元素清除浮动
10.列举几种隐藏元素的方法 visibility：hidden; /*简单的隐藏某个元素，但是元素占用的空间仍然存在*/ opacity：0；/*一个css3属性，设置0可以使一个元素完全透明，制作出和visibility一样的效果*/ position:absolute;/*使元素脱离文档流，处于普通文档之上，给他设置一个很大的left负值定位，使元素定位在可见区域之外*/ display:none;/*元素会变得不可见，并且不会再占用文档的空间*/ 11.css什么属性可以继承？1.字体系列属性
font-family：字体 font-weight；字体粗细 font-size；字体大小 font-style：字体风格2.文本系列属性
text-indent：文本缩进 text-align：字体水平对齐方式 line-height：行高 word-spacing：！单词！之间的间距 letter-spacing：！中文或字母！之间的间距 text-transform：控制文本大小写capitalize每个单词以大写字母开头。uppercase定义仅有大写字母。lowercase 定义无大写字母，仅有小写字母 color：颜色总结就是和字体以及文本相关的属性可以继承
17.css中的link和@import的区别是什么？两者都是外部引用 CSS 的方式，但是存在一定的区别：
（1）link是XHTML标签，除了能够加载CSS，还可以定义RSS等其他事务；而@import属于CSS范畴，只可以加载CSS。
（2）link引用CSS时，在页面载入时同时加载；@import需要页面完全载入以后再加载。
（3）link是XHTML标签，无兼容问题；@import则是在CSS2.1提出的，低版本的浏览器不支持。
（4）link支持使用Javascript控制DOM改变样式；而@import不支持。
18.定位有几种？区别是什么 position：relative 相对定位 它是参照它在页面中原来的位置进行移动的 position：absolute绝对定位 相对于距离他最近的有定位的父元素进行移动的 position：fixed固定定位 它是相对于页面的位置进行移动的注意：只有添加了定位的元素才可以设置z-index属性，后面的值代表层级，没有px等单位。
19.如何让一个盒子水平垂直居中？ //已知宽高 <div class="div1"></div> <style> .div1{ width:400px; height:400px; position:absolute; left:50%; top:50% margin:-200px 0 0 -200px; } </style> //未知宽高 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .div1{ position: absolute; left: 0; top: 0; bottom: 0; right: 0; margin: auto; border: 1px solid #000; width: 400px; height: 400px; } </style> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .div1{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); border: 1px solid #000; width: 400px; height: 400px; } </style> </head> <body> <div class="div1"></div> </body> </html> //伸缩布局 .parent{ display:flex; justify-content:center; align-items:center; } 20、请描述一下cookies，sessionStorage和localStorage的区别？cookie是网站为了标示用户身份而储存在用户本地终端上的数据（通常经过加密），cookie数据始终在同源的http请求中携带（即使不需要），在浏览器和服务器间来回传递。
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存
存储大小：
cookie数据大小不能超过4k
sessionStorage和localStorage虽然也有存储大小的限制，但是比cookie大得多，可以达到5M或者更大
有效时间：
localStorage 存储持久数据，浏览器关闭后数据不会丢失除非主动删除数据
sessionStorage 数据在当前浏览器窗口关闭后自动删除
cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
21.一个页面上两个div左右铺满整个浏览器，要保证左边的div一直为100px，右边的div跟随浏览器大小变化，请写出大概的css代码？ //方法一 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .div1{ width: 100px; height: 200px; background-color: #ccc; float: left; } .div2{ background-color: #ff0; margin-left: 100px; height: 200px; } </style> </head> <body> <div class="div1"></div> <div class="div2"></div> </body> </html> //方法二 22.如何解决跨域问题JSONP、CORS、通过修改document.domain来跨子域、使用window.name来进行跨域、HTML5中新引进的window.postMessage方法、在服务器上设置代理页面
1、JSONP
原理是：动态插入script标签，通过script标签引入一个js文件，这个js文件载入成功后会执行我们在url参数中指定的函数，并且会把我们需要的json数据作为参数传入。
由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源，为了实现跨域请求，可以通过script标签实现跨域请求，然后在服务端输出JSON数据并执行回调函数，从而解决了跨域的数据请求。
优点是兼容性好，简单易用，支持浏览器与服务器双向通信。缺点是只支持GET请求。
2、CORS
服务器端对于CORS的支持，主要就是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置，就可以允许Ajax进行跨域的访问。
3、通过修改document.domain来跨子域
将子域和主域的document.domain设为同一个主域.前提条件：这两个域名必须属于同一个基础域名!而且所用的协议，端口都要一致，否则无法利用document.domain进行跨域
主域相同的使用document.domain
4、使用window.name来进行跨域
window对象有个name属性，该属性有个特征：即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的
23.前端如何优化网站性能？1.减少http请求数量：在浏览器与服务器进行通信时，主要是通过 HTTP 进行通信。浏览器与服务器需要经过三次握手，每次握手需要花费大量时间。而且不同浏览器对资源文件并发请求数量有限（不同浏览器允许并发数），一旦 HTTP 请求数量达到一定数量，资源请求就存在等待状态，这是很致命的，因此减少 HTTP 的 请求数量可以很大程度上对网站性能进行优化。
2.可以通过精灵图，合并css文件和js文件，懒加载等方式来减少http请求：
css sprites国内俗称CSS精灵，这是将多张图片合并成一张图片达到减少HTTP请求的一种解决方案，可以通过CSS的background属性来访问图片内容。这种方案同时还可以减少图片总字节数。
现在前端有很多工程化打包工具，如：grunt、gulp、webpack等。为了减少 HTTP 请求数量，可以通过这些工具再发布前将多个CSS或者多个JS合并成一个文件。
lazyload俗称懒加载，可以控制网页上的内容在一开始无需加载，不需要发请求，等到用户操作真正需要的时候立即加载出内容。这样就控制了网页资源一次性请求数量。
3.控制资源文件加载优先级：浏览器在加载HTML内容时，是将HTML内容从上至下依次解析，解析到link或者script标签就会加载href或者src对应链接内容，为了第一时间展示页面给用户，就需要将CSS提前加载，不要受 JS 加载影响。
4.利用浏览器缓存
浏览器缓存是将网络资源存储在本地，等待下次请求该资源时，如果资源已经存在就不需要到服务器重新请求该资源，直接在本地读取该资源。
5.减少dom操作
6.图标适用iconfont替代image标签
23.解释下css sprites原理以及优缺点CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，
再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，
background-position可以用数字精确的定位出背景图片的位置。
优点：
减少网页的http请求
缺点：
1.在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂
2.CSS Sprites在开发的时候，要通过photoshop或其他工具测量计算每一个背景单元的精确位置
3.在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片
24.css盒子的margin中的合并和塌陷问题如何解决？ 外边距塌陷: 当嵌套的两个块元素,给子盒子加向上的外边距时, 父盒子会跟着掉下来,此时就是外边距塌陷. 解决方案: 1.给父盒子加padding 2.给父盒子加上边框 3.给父元素加overflow:hidden 属性 嵌套盒子垂直外边距合并方案: 给父亲上边框 border: 1px solid transparent 给父亲内边距 padding-top: 1px; 给父元素 添加 overflow: hidden 子元素 添加 position:absolute/relative 或 float 25.如何用css绘制一个实心三角？ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .triangle { width: 0; height: 0; border: 100px solid transparent; border-top: 100px solid blue; /*这里可以设置border的top、bottom、left、 right四个方向的三角*/ } </style> </head> <body> <div class="triangle"></div> </body> </html> 26.css3新属性 border-radius 圆角 border-shadow 盒子阴影 background-size 背景尺寸 background-clip 背景裁剪 background-origin 背景显示原点 text-shadow 文字阴影 text-overflow 文字隐藏的方式 裁剪/省略号 box-sizing transform 变换 转换 animation 动画 transition 过渡动画 媒体查询 @media 27.px，em，rem的区别px像素（Pixel）。 相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册) 特点：IE无法调整那些使用px作为单位的字体大小； 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位； Firefox能够调整px和em，rem。 em是相对长度单位。 相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(引自CSS2.0手册) 任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。 那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%， 这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了
特点：em的值并不是固定的； em会继承父级元素的字体大小。 所以我们在写CSS的时候，需要注意两点： body选择器中声明Font-size=62.5%； 将你的原来的px数值除以10，然后换上em作为单位； 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。 也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em， 那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em， 它因继承#content的字体高而变为了1em=12px。 rem rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。 这个单位与em的区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。 这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。 目前，除了IE8及更早版本外，所有浏览器均已支持rem。 对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。 这些浏览器会忽略用rem设定的字体大小。
28.display：inline-block什么时候出现间隙？解决办法有什么？ <!DOCTYPE html> <html> <head> <title>display:inline-block元素之间空隙的产生原因和解决办法</title> <style type="text/css"> .parent .child { display: inline-block; background-color: #fdfd04; width: 100px; height: 100px; } </style> </head> <body> <div class="parent"> <div class="child">child1</div> <div class="child">child2</div> </div> </body> </html>效果如图：
空隙产生的原因：
元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据white-space的处理方式（默认是normal，合并多余空白），原来HTML代码中的回车换行被转成一个空白符，在字体不为0的情况下，空白符占据一定宽度，所以inline-block的元素之间就出现了空隙。这些元素之间的间距会随着字体的大小而变化，当行内元素font-size:16px时，间距为8px。
解决办法 方法一：
<!-- 将前一个标签结束符和后一个标签开始符写在同一行 --> <div class="parent"> <div class="child">child1 </div><div class="child">child2 </div> </div> <!-- 将所有子元素写在同一行 --> <div class="parent"> <div class="child">child1</div><div class="child">child2</div> </div>缺点：代码的可读性差
方法二： 给其父元素设置font-size:0;给其自身设置实际需要的字号大小
<div class="parent" style="font-size: 0px"> <div class="child" style="font-size: 16px">child1</div> <div class="child" style="font-size: 16px">child2</div> </div>缺点：inline-block元素必须设定字体，不然行内元素中的字体不会显示。 增加了代码量。
方法三：设置子元素margin值为负数
.parent .child + .child { margin-left: -2px }缺点：元素之间间距的大小与上下文字体大小相关；并且同一大小的字体，元素之间的间距在不同浏览器下是不一样的，如：font-size:16px时，Chrome下元素之间的间距为8px,而Firefox下元素之间的间距为4px。所以不同浏览器下margin-right的负值是不一样的，因此这个方法不通用。
注意：当marigin-right使用相对单位em来表示时，Chrome下可以正常去除间距,而Firefox下元素之间有重叠。
方法四：设置父元素，display:table和word-spacing （最优方法）
.parent{ display: table; word-spacing:-1em; /*兼容其他浏览器，题主还未验证*/ }
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
标签： #html面试题2021
