HTML与CSS面试题汇总

1.h5、css3、es6 的新特性分别是哪些

h5：语义化标签、视频、音频，获取DOM节点的方式（querySelect）等。

css3：动画、过渡、阴影、border、平移、旋转等。

es6： const、let、解构赋值、promise、箭头函数、扩展运算符、对象简写等。

2.CSS的盒子模型？

① 所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。

②类型：怪异盒模型、标准盒子模型

③两种盒模型的区别：

标准盒模型中width指的是内容区域content的宽度；height指的是内容区域content的高度。

标准盒模型下盒子的大小=content+border+padding 。

怪异盒模型中的width指的是内容、边框、内边距总的宽度（content+border+padding）；height指的是内容、边框、内边距总的高度。
怪异盒模型下盒子的大小=width（content+border+padding） + margin

④设置盒模型的方式：

box-sizing:content-box 标准盒模型

box-sizing:border-box 怪异盒模型

3.Margin 负值的问题

对 margin 的top、left、right、bottom 设置负值，有何效果？

margin-top 和 margin-left 为负值，元素会向上、向左移动；

margin-right 为负值，右侧元素会左移，但自身不会受影响；

margin-bottom 为负值，下方元素上移，但自身不会受影响。

4.margin的传递问题以及它的解决方式

Margin传递问题:

页面上有一个父元素和子元素，当子元素不设置margin-top时，二者都会位于浏览器顶部显示；当子元素设置margin-top时，父元素会紧挨子元素，并且父元素会被子元素拽下来，这就是margin传递现象。

解决方法：

方式1：父容器加上边框

方式2：子元素设置浮动

方式3：父元素设置浮动

方式4：子元素设置绝对定位（子绝父相）

5.button 和 div 的区别：

div的默认box-sizing属性为content-box，而button默认为border-box，因此div会比button看上去大一些

6.元素的隐藏：

使用display：none；可以将元素隐藏，元素将彻底放弃位置，如同没有写它的标签一样；

使用visibility（可见度）：hidden；也可以将元素隐藏，但是元素不放弃自己的位置。

7.脱离标准文档流的方法：

浮动、绝对定位、固定定位

8.堆叠顺序z-index 属性：

z-index属性是一个没有单位的正整数，数值大的能够压住数值小的。

9.图片与下方盒子之间有缝隙解决方法

①将图片设置为block；

②设置图片的竖直对齐方式 v-align：bottom ；

③设置父级div的 font-size：0 ；

④设置外层的div 的 line-height：0 ；

10.利用CSS样式制作三角形

width:0;height:0;border:70px solid transparent;border-left-color:red;

11.浏览器渐变需要加私有前缀

用来对实验性质的CSS的属性加以标识

Chrome：-webkit- ；

Firefox：-moz- ；

IE、edge： -ms- ；

欧朋：-o- ；

12. 手写清除浮动

.clearfix:after {Content: ’’;Display: table ;Clear: both ;}.clearfix {Zoom:1; // 兼容IE 低版本}

HTML与CSS面试题汇总相关推荐

百度糯米android面试题,前端面试—CSS面试题汇总
前端面试-CSS面试题汇总博客说明文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 1.flex常见面试题 Flex 是 Flexible ...
【2022前端面试】CSS面试题汇总（加紧收藏）
[2022前端面试]CSS面试题汇总(加紧收藏) 更新时间:2022年3月2日. 本文致力于建设前端面试题库,欢迎兄弟们投稿哈! 大纲 CSS整体的在上次的篇幅上有了较大的变化,画一个思维导图及时更新 ...
CSS面试题汇总（二）
往期点这里→CSS面试题汇总(一) 11. css 中可以让文字在垂直和水平方向上重叠的两个属性是什么? 参考答案: 垂直方向:line-height 水平方向:letter-spacing 那么问题 ...
前端HTML+CSS面试题汇总一
目录你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? Quirks模式是什么?它和Standards模式有什么区别 Doctype作用? 严格模式与混杂模式-如何触发这两种模式,区分它们有 ...
CSS面试题汇总（一）
1. 实现不使用 border 画出 1px 高的线,在不同浏览器的标准模式与怪异模式下都能保持一致的效果. 参考答案: <div style="height:1px;overflow ...
【2022前端面试】CSS手写面试题汇总（加紧收藏）
[2022前端面试]CSS手写面试题汇总(加紧收藏) 更新时间:2022年3月3日把答案一起写上,但是希望大家在看之前思考一下,如果有好的建议,跪求改正! 本文致力于建设前端面试题库,欢迎兄弟们投稿 ...
前端面试题汇总（css基础篇）
前端面试题汇总(css基础篇) 1 css sprite是什么,有什么优缺点概念:将多个⼩图⽚拼接到⼀个图⽚中. 通过 background-position 和元素尺⼨调节需要显示的背景图案. ...
web前端兼容性面试题汇总！
web前端兼容性面试题汇总一.html部分 1.H5新标签在IE9以下的浏览器识别 html5shiv.js下载地址 2.ul标签内外边距问题ul标签在IE6\IE7中,有个默认的外边距,但是在IE ...
网易校园招聘历年经典面试题汇总：前端岗
这个系列计划收集几百份朋友和读者的面经,作者合集方便查看,各位有面经屯着可以联系我哦这个系列离结束差的还特别多,会更新涵盖所有一线大厂的所有岗位,也可以关注一下. 腾讯校园招聘历年经典面试题汇总:前 ...
array 前端面试题_web前端开发面试题汇总
前端面试题汇总第一部分HTML&CSS 1. 浏览器分类浏览器:IE,Chrome,FireFox,Safari,Opera. 内核:Trident,Gecko,Presto,Webkit ...

HTML与CSS面试题汇总

HTML与CSS面试题汇总相关推荐

最新文章

热门文章