![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端面经
程序员小王同学
初入职场小菜鸟一枚,多多指教!
会记录在平时开发过程中遇到的小问题,欢迎大家一起讨论和指教!
展开
-
前端面试题HTML+CSS基础篇——高度塌陷
什么是高度塌陷?如何解决高度塌陷1. 高度塌陷的产生原因父元素在文档流中的高度默认是子元素撑开的,当子元素脱离文档流之后,将无法撑起父元素的高度,也就会造成父元素的高度塌陷。2. 造成后果父元素高度一旦塌陷,所有标准流中的元素的位置都将会上移,导致整个页面布局混乱。3. 解决方案给父元素设置一个默认的高度,但这种方式不太灵活,父元素的高度变为固定高度,当后期进行代码维护,增加或者修改文档内的内容时,需要重新进行设置父元素的高度,违背了高度自适应的原则。在塌陷的父元素的最后添加一个空白的原创 2020-08-10 23:25:34 · 312 阅读 · 0 评论 -
前端面试题HTML+CSS基础篇——Doctype
Doctype<!DOCTYPE>不属于HTML标签,所有浏览器都支持Doctype1. Doctype的使用 声明必须是 HTML 文档的第一行,位于 标签之前。<!DOCTYPE> 没有结束标签,不区分大小写2. Doctype的作用Doctype声明于文档的最前面,告诉浏览器是以何种方式来渲染页面页面的渲染方式分为两种:严格模式和混杂模式<!DOCTYPE html><html><head><title>文原创 2020-08-09 13:38:41 · 254 阅读 · 0 评论 -
前端面试题HTML+CSS基础篇——css选择器
css选择器1. 什么是css选择器CSS选择器用于选择你想要的元素的样式的模式。选择器不仅可以选择所有元素,也可以选择另一个元素内的所有元素。2. css选择器都有哪些ID选择器:ID 选择器可以为标有特定 ID 的 HTML 元素指定特定的样式。 根据元素ID来选择元素,具有唯一性,这意味着同一id在同一文档页面中只能出现一次。ID选择器根据ID来选择,前面以“#”来标志。#div{ width:100px; height:100px;}类选择器类选择器根据类名来选原创 2020-08-07 23:35:25 · 531 阅读 · 0 评论 -
前端面试题HTML+CSS基础篇——css单位
css单位CSS有几个不同的单位用来表示长度。一些设置CSS长度的属性有width,margin,padding,font-size,border-width等。数字与单位之间不能出现空格。如果长度值为 0,则可以省略单位。1. px像素,是应用最为广泛的一种css单位,相对长度单位,相对于不同显示器屏幕的分辨率而言2. em相对长度单位,相对于当前对象内文本的字体尺寸,如果当前文本的字体尺寸未被设置,则相对于浏览器的默认字体尺寸而言== px 和 em 的区别:px是固定的,em是不固定的,原创 2020-08-06 23:38:10 · 291 阅读 · 0 评论 -
前端面试题HTML+CSS基础篇——position
position 定位1. static默认值,无定位,元素出现在文档流中2. absolute绝对定位,元素相对于static定位以外的第一个有定位的父元素进行定位,会使元素脱离文档流,不在文档流中占据空间3. relative相对定位,元素相对于自身进行定位,不会使元素脱离文档流,原来位置仍然占据空间4. fixed绝对定位,元素相当于浏览器窗口进行定位,会使元素脱离文档流,原来位置不占据空间5. inherit规定元素从父类继承position属性的值...原创 2020-08-06 23:17:04 · 347 阅读 · 0 评论 -
前端面试题HTML+CSS基础篇——双边距重叠
双边距重叠问题1. 什么是双边距重叠多个相邻的(兄弟或者父子关系)标准流中的块元素垂直方向的margin会重叠。2. 折叠结果两个相邻的外边距都是正数的时候,折叠结果就是它们两者之间较大的值两个相邻的外边距都是负数的时候,折叠结果就是它们两者之间绝对值的较大值两个相邻的外边距一正一负的时候,折叠结果就是它们两者相加的和3. 如何解决双边距重叠给其中的一个div添加一个父的div,并且为这个div设置边框或者实现overflow:hidden;将块级div设置成行内div(display:原创 2020-08-05 23:42:09 · 658 阅读 · 0 评论 -
前端面试题HTML+CSS基础篇——清除浮动
css清除浮动//这个也是面试过程中比较常问到的内容,也是基础中的基础1. 使用带clear属性的空元素给浮动的元素后面添加一个空白的div,给该div添加clear:both; (在左右两侧均不允许浮动元素,可以根据需要设置左右清除浮动)// 但该方法会在文档结构中添加无用的元素,增加dom结构,是文档结构复杂化,所以推荐第二种方法2. 给浮动的元素添加after伪类.div:after{ content:''; clear:both; ......}// 这种方法就不会有第一种方原创 2020-08-05 22:48:57 · 246 阅读 · 0 评论 -
前端面试题HTML+CSS基础篇——垂直水平居中
盒子垂直水平居中1. margin:auto父元素宽高固定,子绝父相,父元素相对定位,子元素绝对定位.father{ height: 200px; width: 200px; position: relative;}.son{ position: absolute; width: 80px; height: 80px; top: 0; left: 0; bottom: 0; right: 0; margin: auto;}2. 子绝父相,已知宽高的情况下.fat原创 2020-08-03 23:01:36 · 244 阅读 · 0 评论 -
前端面试题HTML+CSS基础篇——标签语义化
前端面试题HTML+CSS基础篇——标签语义化**找工作两个月的面试经验分享给大家,各种常见面试题型,希望可以帮助到你!1. 什么是HTML标签语义化根据内容的结构(内容语义化)选择合适的标签(代码语义化),便于开发者阅读和写出更优雅的代码,同时让浏览器的爬虫和机器更好的解析。2. 语义化的优点为了使页面在没有css的情况下,也能很好的展示出页面结构(内容结构+代码结构)提高用户体验方便其他设备解析便于团队的开发和维护有利于SEO(搜索引擎):和SEO建立良好的沟通,有利于爬虫抓取原创 2020-07-31 23:28:28 · 276 阅读 · 0 评论 -
前端面试题HTML+CSS基础篇——flex布局
Flex弹性布局1. 什么是flex布局Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。可以随着页面大小的改变自适应页面布局。目前被所有浏览器所支持。2. 如何设置flex布局块级元素: .box{ display:flex; }行内元素也可以设置成flex布局: .box{ display:inline-flex; }**设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。3. flex的原创 2020-08-02 18:45:20 · 6074 阅读 · 2 评论 -
前端面试题HTML+CSS基础篇——css盒模型
前端面试题HTML+CSS基础篇——css盒模型1. 什么是css盒模型css盒模型就是用来装页面上元素的矩形区域,css盒模型包括IE盒模型和标准的W3C盒模型2. IE盒模型和标准盒模型IE盒模型和标准盒模型的区别在于盒子的实际宽度和实际高度不同IE盒模型中盒子的宽度=左右padding+左右border+contentWidth(内容的实际宽度)IE盒模型中盒子的高度=上下padding+上下border+contentHeight(内容的实际高度)标准盒模型中盒子的宽度=content原创 2020-08-01 22:33:55 · 258 阅读 · 0 评论