文章目录

Web前端面试题大全（一）HTML CSS篇
- - 1：如何实现盒子水平垂直居中
  - 2：图片下方间空白隙如何解决
  - 3：简述圣杯布局、双飞翼布局实现的原理
  - 4：简述精灵图原理以及其优缺点
  - 5：简述BFC规则以及解决的问题
  - 6：文本溢出显示省略号如何实现
  - 7：简述网页中常见图片格式及特点
  - 8：常见浏览器兼容性问题
  - 9：h5有哪些新增特性
  - 10：如何处理H5新标签的浏览器兼容问题
  - 11：css3有哪些新的特性
  - 12：css3新增选择器有哪些
  - 13：c3中过渡和动画的区别和各自的适用场所
  - 14：说出你知道的2D3D变形函数
  - 15：解释弹性布局模型以及适用场所
  - 16：常见的移动端布局解决方案
  - 17：简述css盒模型
  - 18：浮动产生的问题，清除浮动的方案
  - 19：那些css属性是可以继承的
  - 20：margin外边距常见问题
  - 21：简述三类标签的特点以及标签分类
  - 22：简述id与类选择器的区别
  - 23：可以使内联元素支持设置宽高的方法有哪些？
  - 24：用纯css实现小箭头的思路
  - 25：项目完成后需要做哪些测试检查
  - 26：让元素在页面中消失的方法
  - 27：为什么要初始化css样式?哪些样式需要初始化
  - 28：单行文本和多行文本溢出省略号如何实现
  - 29：简述的作用
  - 30：谈谈对语义化标签的理解
  - 31：css基础选择器有哪些
  - 32：如何合并表格单元格
  - 33：thead tbody tfoot有什么作用
  - 34：常见表单元素
  - 35：css复合选择器有哪些
  - 36：块级标签和行内标签的区别
  - 37：解释一下css3的flexbox以及适用场所
  - 38：什么是less，less有什么好处
  - 39：如何处理小于12px的字体
  - 40：什么是响应式
  - 41：响应式项目中通常用到哪些核心技术
  - 42：简述rem布局原理
- 写给看到最后的你

Web前端面试题大全（一）HTML CSS篇

如果此文章对你的面试有帮助欢迎扫描下方二维码，给个支持哦！感谢！

1：如何实现盒子水平垂直居中

一、定位+margin负值，盒子有宽高

.father{
position:relative;
}
.son{position:absolute;
left:50%;
margin-left:-小盒子宽度的一半;
top：50%；
margin-top：-小盒子高度的一半
}

二、定位+margin：auto，盒子有宽高

.father{
position:relative;
}
.son{position:absolute;
left：0；
top：0；
right：0；
bottom：0；
margin：auto}

三、定位+平移，盒子没有设置宽高时实现居中

.father{ position:relative;}
.son{position:absolute;
left:50%;
top：50%；
transform：translate（-50%，-50%）

2：图片下方间空白隙如何解决

两个图片之间和图片下方多出的空白间隙可以使用以下方式解决。
方法 1：将图片显示为块：解决下方间隙
img{display:block;}
方法 2：改变图片的 vertical-align :解决下方间隙
img{vertical-align:middle; }
除了 middle值，还可以设置为 top| bottom 等
方法 3：设置图片父级标签的 font-size:0;line-height:0; 水平间隙，图片下方间隙都能解决
.imgwrap{font-size:0;line-height:0;}

3：简述圣杯布局、双飞翼布局实现的原理

1、双飞翼布局：利用最内容盒子的外边距将内容居中
2、圣杯布局：利用最外侧大盒子的内边距将内容居中

4：简述精灵图原理以及其优缺点

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，
再利用CSS的，“background-image”,“background-repeat”,"background-position"的组合进行背景定位，background-position可以用数字精确地定位出背景图片的位置。
优点：
①减少网页的http请求，从而加快了网页加载速度，提高用户体验。
②减少图片的体积，因为每个图片都有一个头部信息，把多个图片放到一个图片里，就会共用同一个头信息，从而减少了字节数。
③解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名。
④更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。
缺点：
局限在只能拼合类型相关的小图片，
①在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂。
②CSS Sprites在开发的时候，要通过photoshop或其他工具测量计算每一个背景单元的精确位置。
③在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片。
④精灵图不能随意改变大小和颜色。改变大小会失真模糊，降低用户体验，Css3新属性可以改变精灵图颜色，但是比较麻烦，并且新属性有兼容问题，现在一般用字体图标代替精灵图。

5：简述BFC规则以及解决的问题

1、BFC：Block Formatting Context 块级格式化上下文
块级元素的渲染区域规则 BFC盒子外部不影响内部内部不影响外部。
2、可以出发规则的属性：

float不为none 2. position属性为absolute和fixed 3. oveflow不为visiable 4. html 根标签 5. display为inline-block
3、BFC有哪些规则
BFC盒子内部的子标签按照垂直从上到下排
共用一个BFC盒子的垂直方向上的外边距不会发生塌陷现象
子标签都会父盒子的左边界停靠，即使浮动元素也如此
BFC盒子内部浮动元素也要参与高度计算 overflow:hidden
BFC区域和浮动元素不重叠
BFC盒子是一个密闭空间外部不影响内部内部不影响外部
4、解决的问题
1—》外边距塌陷
2—》浮动特性
3—》清除浮动影响
4—》图文不环绕 (p+overflow)

6：文本溢出显示省略号如何实现

第一步：强制文字一行显示：white-space: nowrap;
二：处理盒子溢出overflow: hidden;
三：文本溢出属性：ellipsis（省略号）text-overflow: ellipsis;

7：简述网页中常见图片格式及特点

jpg：可压缩的，有损图片质量的格式。虽然可压缩，它的色彩还是比较丰富。
特点：文件小、色彩丰富。在网页中常用。
劣势：不能保存透明背景图片。
用途：插入图，大篇幅的整个的背景图。本身不要求太清晰，文件加载够快。
png：不可压缩的，可以保存图层。质量比较大，真正使用的时候保存的是png32格式。
png特点：支持透明和半透明。
用途：精灵图、背景图。
问题：IE6不支持它的透明和半透明。高级浏览器支持透明和半透明。
gif：本身跟压缩无关，颜色色值较少，256种、128种、2种。
特点：可以保存透明，不支持半透明。可以保存动图。在IE6里，透明效果没有兼容性问题。
用途：背景透明，动图。

8：常见浏览器兼容性问题

1.图片边框的问题
ie8浏览器上 a>img 图片会出现蓝色边框
解决方法:

common.css
img {  border:none;  }

2.图片下间隙问题
盒子套图片时，盒子底边框和图片底线有一个空白距离
原因：图片和文字以基线对齐下间隙其实就是基线和底线之间距离
解决办法：

vertical-align:middle;
font-size:0;line-height:0;
display:block;

3.IE低版本常见的兼容性问题（了解）
1.ie6小高度盒子问题
原因： ie6下有默认行高
解决问题:

line-height:0;
font-size:0;

2.ie6下浮动双边距问题
解决问题：给浮动元素 + _display:inline;
3.ie7以下子元素相对定位，父盒子overflow失效问题
解决办法：给父盒子也加相对定位
4.ie8不支持图片格式为 .webp
5.ie6支持:after,:before 不支持::after ,::before

9：h5有哪些新增特性

一、新增语义化标签（布局标签）
头部标签： header：包含顶部导航，logo区，+ 搜索栏
导航： nav
侧边栏： aside 左，右辅助列表
底部：footer 底部
独立区域：article 独立区域里面包含了很多同级的单独区块和其他盒子互不影响
同级区域：section
二、新增音视频标签
音频audio：

<audio src="" controls></audio> 默认的播放器
src:音频路径
controls:播放控件
autoplay: 自动播放
muted 静音
preload 预加载

视频video：

<video src="" controls autoplay muted poster="./image/a.jpg"><source src="../资料/周杰伦 - 本草纲目.ogg" ><source src="../资料/周杰伦 - 本草纲目.webm" ><source src="../资料/周杰伦 - 本草纲目.mp4" >
</video> 默认的播放器
poster:视频没有播放时的图片 不写默认视频的第一帧

三、新增的表单type类型
type=“text” 名字昵称邮箱手机号网址
邮箱类型:
type=“email” 1.默认简易的验证 xx@xx 2.打开移动端邮箱键盘 @ .
网址类型：
type=“url” 1.默认简易的验证 http,https… 2.打开移动端url键盘 / .
手机号:
type=“tel” 打开移动端数字键盘
数字
type=“number”
颜色
type=“color”
年月日日期
type=“date”
周
type=“week”
月
type=“month”
时间
type=“time”
标尺
type=“range”
新增表单控件属性
checked 单选框和复选框被选中
selected 默认option被选中
size下拉列表展示的数据个数
min最小值
max最大值
step:步长
autofocus 自动聚焦写到谁身上界面加载成功以后这个元素就会自动聚焦
autocomplete 自动提示历史输入功能 autocomplete=“on开启/off关闭(默认)”
required 必填项
disabled 禁用的
enabled 可用的
readonly 只读不能写
placeholder 默认的文本提示
multiple:文件多选
h5新增的下拉列表（可输入，选择）

//配合一个输入框 text  list属性就是用来绑定选择那个下拉列表
<input type="search" list="city">
<datalist id="city"> //选项<option value='北京'><option value='上海'>
</datalist>

type=“search” 带关闭按钮的文本框

10：如何处理H5新标签的浏览器兼容问题

兼容性问题：

ie8一下不要语义化布局标签
解决：
(1)js去创造标签让ie浏览器识别
(2)引入前辈文件 html5shiv.js

<!--[if lt IE 9]>
<script type="text/javascript" src="./html5shiv.js"></script>
<![endif]-->
上面这段代码仅会在IE浏览器下运行。

11：css3有哪些新的特性

属性，选择器，布局方式，私有前缀，背景属性，动画

12：css3新增选择器有哪些

1、结构伪类选择器：–》父子
child类型
E:first-child {}
匹配的是E的父元素当中的子元素的第一个这个元素必须满足是E类型
E:nth-child(2n){} n从0开始递增的趋势 0,1,2,… 偶数 even
E:nth-child(2n+1){} n从0开始递增的趋势 0,1,2,…奇数 odd
E:nth-child(even/odd){} 匹配的是E的父元素里的子代中的第偶数/奇数个元素满足E类型
只能识别n在前表达式 n+1 /-n+1 不能识别的是 1-n
E:last-child{} 最后一个子元素
E:nth-last-child(3){}倒数第3个元素
2、type类型
E:first-of-type {} E的父元素的类型为E类型的子代当中的第一个（过滤）
E:nth-of-type(){}
E:nth-last-of-type{}
3、表单类选择器
input:focus {} 匹配的是当前被聚焦的input元素
input:checked {} 匹配的是当前被勾选的input元素（单选框，复选框）
input:enabled {}匹配的是没被禁用的input 元素
input:disabled {}匹配的是禁用的input 元素
4、属性选择器[]
一组选择器 5个全局
[属性名 ] ----》[attr] attr属性名 Attribute
[class] 匹配的是拥有class属性的元素
[a] 匹配的是拥有a属性的元素
[attr=“value”]
[class=“s”] 匹配的是class属性值为s的元素
[attr*=“value”]
[class*=“s-”] 匹配的是class属性值包含s-字符的元素 *包含
[attr^=“value”]
[class^=“s-”] 匹配的是class属性值以s-开头的元素 ^以…开头
[attr=“value”][class=“value”] [class=“value”][class=“a”] 匹配的是class属性值以a作为结尾的元素 $以…结尾
5、其他选择器
:root {} 匹配的html根元素
::first-letter {text-transform: capitalize; }第一个字符大写
::first-line{} 第一行
::selection 鼠标选中文本后文本的样式
:not() 非除了 :not§ {} audio:not([controls])
:target 锚点被激活时的样式
:empty {} 匹配的是空元素

13：c3中过渡和动画的区别和各自的适用场所

区别：
1、语法：
过渡——transition: 属性名完成时间速度曲线延迟时间;
动画——需要先定义关键帧，再通过animation属性引用关键帧
2、触发：
过渡：需要借助伪类、js、@media触发
动画：自动触发
3、执行次数
过渡：执行一次后不会执行，但是可以借助transitionEnd事件添加循环；
动画：可以通过属性设置循环次数；
4、复杂度
过渡：简单动画效果，可以通过属性展示动画的速度效果
动画：复杂动画效果，可以定义关键帧，控制每一帧的动画效果
适用场景：
transition：适用于当元素从一种样式变换为另一种样式时为元素添加效果
animation：可以在网页中取代动画图片、Flash及需要灵活定制多个帧以及循环的动画中

14：说出你知道的2D3D变形函数

2D：
平移：transform:translate(x,y); x沿着x轴 +x 沿着x轴正方向 -x 沿着x轴反方向
旋转：transform:rotate(ndeg); deg度数 +n顺时针 -n逆时针
缩放：transform:scale(w,h) w:宽度缩放 <1 缩小 >1放大 =0没有 h高度缩放
倾斜：transform:skew(xdeg,ydeg) x朝x轴方向的倾斜 -deg x轴正方向倾斜 +deg x轴负方向倾斜
3D：
平移：transform:translate3d(x,y,z); z轴在元素的正前方从屏幕内射出的一条指向你眼睛的线(+z)
旋转：transform:rotate3d(x,y,z,ndeg);x,y,z向量值方向 +x -x 大小

15：解释弹性布局模型以及适用场所

弹性盒模型：提供了一套成熟方案 (css属性) 单轴方向（水平，垂直）上提供了一些默认的子元素的排列对齐方式
适用：多列盒子浮动时可以采用弹性盒

16：常见的移动端布局解决方案

一.流式布局
自适应效果 %
原理：在移动设备的区间（320px—640px or 540px or 750px）之内，大盒子用%设置宽度,小盒子宽度和间距用px值表示，盒子的高度可以用auto或者固定，图片一般也是设置宽高% ,文字大小px
超小屏：(<768px)主流设备 375px psd宽度是 750px
二.rem布局
自适应效果 rem
原理：设置不同屏幕宽度下html字体值不同
三. 视口单位布局自适应效果

17：简述css盒模型

盒模型又称框模型（Box Model）,包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。
元素框的总宽度 = 元素（element）的width + padding的左边距和右边距的值 + margin的左边距和右边距的值 + border的左右宽度；
元素框的总高度 = 元素（element）的height + padding的上下边距的值 + margin的上下边距的值＋ border的上下宽度。

18：浮动产生的问题，清除浮动的方案

浮动元素引起的问题：
浮动元素脱离文档流之后在文档流中不占位，父元素的高度无法被撑开，影响与父元素同级的元素
清除浮动的方法：
（1）给父级元素加高度（不推荐使用，它只适合高度固定的布局，一般父盒子都是为由内容撑起来）
（2）在结尾处添加空div标签clear:both。具体做法：添加一个div标签并定义一个cl的类名，给cl类名添加样式clear:both，将该div标签放到父元素内容结束前的位置（缺点：会多加CSS和HTML标签）。
（3）给父级元素定义 overflow:hidden（推荐使用，缺点：不能和position配合使用，因为超出的尺寸的会被隐藏）
（4）给父级div定义伪类：after和zoom（推荐使用）

/*清除浮动代码*/
.clearfloat:after{display:block;
clear:both;content:"";
visibility:hidden;
height:0
}
.clearfloat{zoom:1}
//然后父级元素添加clearfloat类名即可

（5）给父级元素添加浮动（缺点：会产生新的浮动问题）

19：那些css属性是可以继承的

1）、字体系列属性
　　font-family：字体系列
　　font-weight：字体的粗细
　　font-size：字体的大小
font-style：字体的风格
line-height：行高
2）、文本系列属性
　　text-indent：文本缩进
　　text-align：文本水平对齐
color：文本颜色
3） list-style属性

20：margin外边距常见问题

1 父子元素margin合并问题
在父元素里面有子元素时，若父元素在没有设置overflow:hidden或者是border属性，则父元素的margin-top的值为父元素和子元素中的margin-top的最大值。
父子元素margin合并问题解决办法
方法一：设置父元素的overflow属性为hidden。
方法二：设置父元素的border属性，如：border:1px solid red;
2 兄弟元素margin合并问题
当元素是兄弟元素时，在不设置float和position:absolute时，margin-bottom和margin-top会合并为两者中的最大值。
兄弟元素margin合并问题解决方法
使兄弟元素不在同一个BFC区域下，具体做法如：将兄弟元素分别触发BFC或将兄弟元素包在不同的div下，这些不同的div再分别触发BFC。

21：简述三类标签的特点以及标签分类

块标签：独占浏览器一整行，可以设置盒模型所有属性。
块级标签有：div p ul li ol dl dt dd h1-h6
内联标签：内容多大就占多大的位置，默认不支持宽高，不能设置垂直方向的内外间距
内联标签有：span i em b strong sub sup a
内联块标签：内容多大就占多大的位置，可以支持宽高，能设置盒模型的所有属性
内联标签有：input img

22：简述id与类选择器的区别

1.类选择器使用.标识，id使用#标识
2.类选择器可以重复使用，同一个id在文档中只能出现一次
3.类可以使用词列表，id不可以
4.id选择器的优先级高于类

23：可以使内联元素支持设置宽高的方法有哪些？

1、display:bloak;将内联元素转化为块元素
2、display:inline-bloak;将内联元素转化为行内块元素
3、float：left/right;将内联元素设置为浮动元素，元素设置为浮动元素之后不区分类型，可以设置宽高

24：用纯css实现小箭头的思路

基本思路是，用css绘制两个三角形，通过绝对定位让两三角形不完全重叠，例如制作向右的空心箭头，位于前面的三角形border颜色是需要的颜色，后面的三角形border颜色与包裹它们的div背景色一致，然后设置前面三角形的left值比后者的left多1px，这样就可容易生成空心箭头，但是在ie8以下浏览器中，需要设置父元素和子元素的优先级，否则制作的三角形无法显示。

25：项目完成后需要做哪些测试检查

1）做完的页面要与设计稿进行比对，保证对设计稿95%以上的还原度。
页面模块的完整性，保证页面不出现模块丢失(尤其是悬浮的侧边栏，弹窗，下拉菜单等)
字体，字号，文字颜色的一致性
背景图片与图片是否有丢失
模块间距的还原度（通常根据页面设计排版的复杂程度，最多允许5-10px以内的偏差）
2）跨浏览器的兼容测试
做完的页面，要根据需求进行跨浏览器的兼容测试，保证不同浏览器显示结果基本一致。
Pc端通常需要测试的浏览器有 chrome,firefox,opera,IE（IE低版本是否兼容与需求沟通确定）

26：让元素在页面中消失的方法

1.display:none;（将整个元素隐藏，并且不会占据任何的空间）
2.visibility:hidden;（元素的内容不可见，但是元素仍然保持原来的位置和大小）
3.设定它的位置,让其消失不见：
position:absolute或fixed，用z-index遮盖。
4.overflow:hidden将要隐藏的元素移除父元素的范围。
5.设置元素为透明：即opacity:0；
6.将元素的font-size，line-height,width,height设置为0；（虽然这些方法很赖皮。）
7.设置元素的transform的translateX（Y）的值为-100%；

27：为什么要初始化css样式?哪些样式需要初始化

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
示例：

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }

28：单行文本和多行文本溢出省略号如何实现

单行文本显示省略号

div{width:200px; /*限定宽度*/
white-space:nowrap; /* 文本不换行*/
overflow:hidden; /*给元素设置溢出隐藏*/
text-overflow:ellipsis; /*文本溢出显示省略号*/}

多行文本溢出隐藏

div{width:200px; /* 限定盒子的宽度 */
display:-webkit-box; /* 将对象作为弹性伸缩盒子模型显示*/
-webkit-line-clamp:3; /* 用来限制在一个块元素显示的文本行数*/
-webkit-box-orient:vertical; /* 设置或检索伸缩盒对象的子元素的排列方式*/
overflow:hidden; /*给元素设置溢出隐藏*/
text-overflow:ellipsis; /*文本溢出显示省略号*/}

利用伪元素模拟溢出显示省略号

div{border: solid;
width:500px;
height: 90px; /*限定高度*/
line-height: 30px; /*行距与高度要成比例*/
position: relative;
overflow: hidden;}div:after{content: '...';
position: absolute;
right:0px;
bottom:0px;
padding-left:7px;
background-image:-webkit-linear-gradient(left,tansparent,#fff 60%);
background-image:-ms-linear-gradient(left,tansparent,#fff 60%);
background-image:-o-linear-gradient(left,tansparent,#fff 60%);
background-image: -webkit-linear-gradient(left,#fff,#fff); }

29：简述<!doctype>的作用

帮助浏览器正确的显示网页，<!doctype>声明叫做文件类型定义，声明的作用是为了告诉浏览器文件的类型，让浏览器，解析器知道该用哪种规范来解析文档，<!doctype>声明必须放在html文档的第一行，这并不是一个Html标签。

30：谈谈对语义化标签的理解

h1~h6 ,列表系列,em,strong,ins,del
1、有利于搜索引擎优化SEO (因为搜索引擎的爬虫根据语义化标签里的内容确定网站的权重)
2、当没有css样式时，语义化标签同样可以呈现清晰的结构
3、语义化标签代码可读性更高，后期结构好维护
问题三十：css引入方式有哪些
通常引入样式表的方法有三种：外部样式表、内部样式表、内联样式
1、内联样式
内联样式又称行内样式，使用该样式需要直接在标签内添加“ style=" " ”，再将需要的样式写在双引号内，如

<div style="background: red;">hello world!</div>

行内样式比较适合初学者学习的时候使用，在网站开发时尽量不要去用，因为使用这种样式会把结构和CSS全部融合在一个页面里面，造成代码冗余，后期调整样式的时候非常不方便。
2、内部样式
内部样式是一种适合案例或者比较小的页面的引入方式，它的语法是在在head标签里添加style标签，再在style标签的内容区添加需要的样式，如：

<head>
<style type="text/css">div{background: red;}
</style>
</head>

内部样式比较适合案例或者比较小的页面中，因为它也会增加HTML文件的代码量。
3、外部样式
外部样式是使用最广的引入方式，适合比较大的页面或者整站开发。引入方法是将样式写css文件中，再将css文件链接到HTML文件里。

31：css基础选择器有哪些

分类：基础选择器、标签选择器、类选择器、id选择器、通配符选择器、复合选择器
1、标签选择器：标签名作为选择器
优点:可以一次修改所有某一类的标签的样式
缺点:没法区分同名标签内的元素
2、类选择器；单独选择一个或几个标签
语法样例：
.类名 (class属性) {
属性1: 属性值1;}
标签中加class属性
无视标签，所有有相同class属性的都会改变样式
不能用标签名做class属性
类选择器里的多类名
给一个标签指定多个类名(class)
代码示例

<div class="red red2"></div>

多个类名中间用空格分开
能做到代码复用
3、id选择器
语法规范：
#id名 {
属性1: 属性值1;}
和类选择器很像，只不过是把class改成id，.改成#
和类选择器的区别：
id只能调用一次，下面的在调用这个id就无法使用了
4、通配符选择器：选取页面中所有的元素(标签)
代码示例:
{
color: red;
/* 把所有的标签都改为红色(包括html等标签) */
}

32：如何合并表格单元格

1、跨列合并：水平方向上单元格合并
从左到右属性写在最左侧的单元格身上接着删除被合并的列
删除的个数 = 合并个数-1
colspan=“列数”
2、跨行合并：垂直方向上单元格的合并
从上到下属性写在最上侧的单元格身上接着删除被合并的行
删除的个数 = 合并个数-1
rowspan=“行数”

33：thead tbody tfoot有什么作用

为了让大表格(table)在下载的时候可以分段的显示,就是说在浏览器解析HTML时，table是作为一个整体解释的，使用TBODY可以优化显示。如果表格很长，用tbody分段，可以一部分一部分地显示，不用等整个表格都下载完成。下载一块显示一块，表格巨大时有比较好的效果。
tbody、tfoot、thead一般来说用得不是很多，对于比较复杂的页面，页面的排版用到了很多的表格，表格的结构也就相对的复杂了，所以又将表格分割成三个部分：题头、正文和脚注。而这三部分分别用: thead, tbody, tfoot来标注。
thead　表格的头用来放标题之类的东西
tbody　表格的身体放数据本体
tfoot　表格的脚放表格的脚注之类
我觉得最直接的用处是：
TBODY包含行的内容下载完优先显示，不必等待表格结束.另外，还需要注意一个地方。表格行本来是从上向下显示的。但是，应用了thead/tbody/tfoot以后，就“从头到脚”显示，不管你的行代码顺序如何。也就是说如果thead写在了tbody的后面，html显示时，还是以先thead后tbody显示。

34：常见表单元素

input常用type属性如下：
text：单行文本输入框，可以通过正整数的size控制框长度。
password：密码输入框。
radio：单选按钮，同一组的单选按钮必须要有相同的name。
checkbox：复选框，同一组的单选按钮必须要有相同的name。
button：普通按钮。
submit：提交按钮，每出现一次，一个 Submit 对象就会被创建。
reset：重置按钮，会重置当前表单中全部的内容。
image：图像形式的提交按钮，写法是。
hidden：隐藏域，隐藏字段对于用户是不可见的。
file：文件域，用于文件上传。

35：css复合选择器有哪些

后代选择器
概念：后代选择器又称为包含选择器作用：用来选择元素或元素组的子孙后代。
其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔，先写父亲爷爷，在写儿子孙子。
格式：父级子级{属性:属性值;属性:属性值;}
语法：.class h3{color:red;font-size:16px;}
子元素选择器
作用：子元素选择器只能选择作为某元素子元素(亲儿子)的元素。
其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接。
语法：.class>h3{color:red;font-size:14px;}
比如： .demo > h3 {color: red;} 说明 h3 一定是demo 亲儿子。 demo 元素包含着h3。
交集选择器
条件：交集选择器由两个选择器构成，找到的标签必须满足：既有标签一的特点，也有标签二的特点。
语法：h3.class{ color:red; }
其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special。
交集选择器是并且的意思。即…又…的意思
比如： p.one 选择的是：类名为 .one 的段落标签，但用的相对来说比较少。
并集选择器
应用：如果某些选择器定义的相同样式，就可以利用并集选择器，可以让代码更简洁。
并集选择器（CSS选择器分组）是各个选择器通过,连接而成的，通常用于集体声明。
语法：.class,h3 {color:red;}
任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。
记忆技巧：并集选择器通常用于集体声明，逗号隔开的，所有选择器都会执行后面样式，逗号可以理解为和的意思。
比如 .one, p , #test {color: #F00;}
表示 .one 和 p 和 #test 这三个选择器都会执行颜色为红色,通常用于集体声明。
他和他，在一起，在一起一起的意思
链接伪类选择器
伪类选择器：和类选择器相区别类选择器是一个点比如 .demo {} 而我们的伪类用 2个点就是冒号比如 :link{} 。
作用：用于向某些选择器添加特殊的效果。比如给链接添加特殊效果，比如可以选择第1个，第n个元素。

a:link /* 未访问的链接 */
a:visited /* 已访问的链接 */
a:hover /* 鼠标移动到链接上 */
a:active /* 选定的链接 */

注意
写的时候，他们的顺序尽量不要颠倒按照 lvha(四类的首字母) 的顺序。否则可能引起错误。
因为叫链接伪类，所以都是利用交集选择器 a:link a:hover
因为a链接浏览器具有默认样式，所以我们实际工作中都需要给链接单独指定样式。
实际开发中，我们很少写全四个状态，一般我们写法如下：

a {   /* a是标签选择器  所有的链接 */font-weight: 700;font-size: 16px;color: gray;
}
a:hover {   /* :hover 是链接伪类选择器 鼠标经过 */color: red; /*  鼠标经过的时候，由原来的 灰色 变成了红色 */}

36：块级标签和行内标签的区别

行内标签可以叫行内元素、内联元素、内嵌元素。
特点：可以多个标签存在一行，不能直接设置行内标签的高度、宽度、行高以及顶和底边距。可以设置左右margin，左右padding，不可以设置上下margin,上下padding，靠内容撑开宽高！
块级标签：独占一行，对高度、宽度、行高以及上边距和底边距都可设置的属性值生效；如果不给宽度，块级元素就默认为父盒子宽度。
行内块：特点：结合行内标签和块级标签的优点，不仅可以对宽高属性值生效，还可以多个标签存在一行显示等；img和input。可以设置外边距还没有外边距塌陷的影响。

37：解释一下css3的flexbox以及适用场所

弹性盒模型是c3规范的新的布局方式，该布局模型的目的是提供一种更加高效的方式来对容器的条目进行布局、对齐和分配空间

适用于移动端，在Android和iOS上也支持。

38：什么是less，less有什么好处

Less 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件,只有在被编译后才能够被浏览器识别使用。
好处：
结构清晰，便于扩展。
可以方便地屏蔽浏览器私有语法差异。
可以轻松实现多重继承。
完全兼容 CSS 代码，可以方便地应用到老项目中。
Less常用语法：
1、变量：变量是识别符号是@，在less中以@开头的则是变量
2、混入：一个类引入另外一个类
这个模式比较常见，例如：规定的主背景色，主文字颜色等，可以事先定义好相关的颜色。在使用的时候直接调用，例如。
最简单的使用:

.br {-webkit-border-radius:50%;border-radius:50%;}
.a {width:200px;height:200px;.br;}
加强版01:
.br(@a:50%) {-webkit-border-radius:@a;border-radius:@a;}
.a {width:200px;height:200px;background-color: aqua;//不传参的时候取默认值  @a:50% 50%就是默认值.br();//传参10px会替换@a执行 .br(10px);}
加强版02
// 盒子阴影类 5个
// .boxs(@a,@b,@c,@d,@e) {// @arguments 参数表  多个参数 的简单写法
//     -ms-box-shadow:@arguments;
//    -moz-box-shadow: @arguments;
//     -webkit-box-shadow:@arguments;
//     -o-box-shadow: @arguments;
//     box-shadow:@arguments; }
.boxs(@style,@color) {box-shadow: @style @color;}
//isColor 内置方法 用于判断参数是否是颜色 如果是颜色 true
.boxs(@style,@color) when (isColor(@color)){box-shadow: @style @color;}
.a {width:200px;height:200px;background-color: aqua;//不传参的时候取默认值  @a:50% 50%就是默认值.br();.boxs(0px 0px 10px 1px,red);}

3、运算：
在less中的运算是默认使用有单位的一方为基础单位运算，

   @w= 100px;.bar_002{width:@w - 30;height:20px;margin:0 auto;background:#cdecde;}

此时采用的计算单位就是px为其默认的计算单位。
在less中有一点和css3中不一样的地方就是采用百分比的单位不能和其他单位混合使用，例：

　　.bar_002{width:100% - 30px;height:20px;margin:0 auto;background:#cdecde;　}

在上面的计算中编辑的时候就会报错，不能这样使用，推荐使用的方法是采用css原生的使用方法来使用。
4、嵌套规则
嵌套规则其实和css中的层级选择器一样，没有太多区别（层级最好控制在3层以内，这样有助于浏览器的识别）。

39：如何处理小于12px的字体

不同浏览器的最小字体不同，有的是10px，有的是12px
解决办法：设置字体时，不要小于12px,如果一定要小于12px，使用transform:sacle()进行缩放

40：什么是响应式

是一种网页设计的技术做法。该设计应当根据设备环境(系统平台、屏幕尺寸)进行相应的响应和调整。
优点:
1.用户体验友好
2.节省设计开发成本
3.积累分享
缺点：
1.对老版IE浏览器兼容性不友好
2.加载变慢
3.增加开发时间成本
4.影响布局

41：响应式项目中通常用到哪些核心技术

媒体查询配合流式布局

42：简述rem布局原理

rem是指相对于根元素的字体大小的单位,即根据html元素的font-size来计算大小。比如说html的font-size大小为100px,一个div的width为1rem,则div的width大小为100px。
rem布局实现步骤
设置页面的viewport
动态计算并设置html的fontsize值
按照pc端布局方式正常布局，把px单位换算成rem（较小的长度比如1px的边框就不需要转换成rem,直接设置px）

写给看到最后的你

朋友，感谢你看到了最后，新手报道，技术不成熟的地方请多多指点，感谢！

公众号：Linux下撸python
小程序：前端面试吧
期待和你再次相遇
愿你学的愉快

肝了一天一夜吐血整理的超级实用的Web前端面试题总结相关推荐

吐血熬夜整理!2020最全web前端面试题!!!你想要的我这都有！！！
吐血总结了下web前端面试题,分享给大家,以后还会持续更新,有些题目有多种答案,本文只给出其中一种,哪里有问题的欢迎指出. Html&CSS 1.谈谈你对web标准的理解 web标准的理解 2 ...
WEB前端面试题整理
WEB前端面试题文章目录 WEB前端面试题一.html部分 1.Doctype有什么作用?标准模式与兼容模式有什么区别 2.标准模式与兼容模式(怪异模式)各有什么区别? div1和div2之间的距 ...
web前端面试题完美整理/涵盖html,CSS、JS、浏览器、Vue、React、移动web。
本篇文章整理总结了一些前端面试题,涵盖面很广,并且面的都是知名大厂,所以这些题还是很有代表性的,都掌握以后一面基础面应该没什么问题,二面也能应付大半,奉上: css相关更多教程:https://su ...
WEB前端面试题汇总整理01
1.JS找字符串中出现最多的字符例如:求字符串'nininihaoa'中出现次数最多字符 var str = "nininihaoa"; var o = {}; for (var ...
【web前端面试题整理03】来看一点CSS相关的吧
前言昨天我们整理了14到js的题,今天我们再来整理14到CSS相关的题目,昨天整理时候时间有点晚了我便有点心浮气躁,里面的一些题需要再次解答,好了看看今天有些什么吧. PS:我这里挑一点来做就好了, ...
web前端面试题整理(vue、uni-app、前端三件套、web基础)
Vue 对mvvm的理解 mvvm分为model.view.viewmodel三者 model代表数据模型 view代表视图 viewmodel代表连接视图和模型,实现了vue数据的双向绑定 view ...
【web前端面试题整理03】来看一点CSS相关的吧 - 叶小钗
原帖地址:http://www.cnblogs.com/yexiaochai/p/3154031.html 前言昨天我们整理了14到js的题,今天我们再来整理14到CSS相关的题目,昨天整理时候时间 ...
【web前端面试题整理05】做几道前端面试题休息休息吧
前言连续学了两天javascript的东西了,我们都累了,于是今天还是上一套面试题吧,大家一起休息休息,也为下个星期可能会有的面试准备下. 题目一览 CSS 1. overflow-x 属于 C ...
持续不断更新中... 自己整理的一些前端知识点以及前端面试题，包括vue2，vue3，js，ts，css，微信小程序等
Vue3自考题 1,如何使用vue3的组合式api 答: 在普通的前端项目工程中,在script标签中增加setup即可使用api 使用setup()钩子函数 2,computed 与各个watch之 ...
前端面试题整理（定期更新）
前言因为面试的原因,最近又开始关注前端面试题,浏览过网上很多面试题集合,有很多小伙伴整理的很全面,但是我发现其中有很多技术点在当下已不再流行,而面试题一般都是映射开发中常遇到的一些技能和问题,再结合 ...

肝了一天一夜 吐血整理的超级实用的Web前端面试题总结