广州专业手机网站建设,哪里找装修设计师,wap网站是什么意思啊,苏州制作网站哪家好CSS 面试题汇总 1. 介绍下 BFC 及其应 参考答案#xff1a; 参考答案#xff1a; 所谓 BFC#xff0c;指的是一个独立的布局环境#xff0c;BFC 内部的元素布局与外部互不影响。 触发 BFC 的方式有很多#xff0c;常见的有#xff1a; 设置浮动overflow 设置为 auto、scr…CSS 面试题汇总 1. 介绍下 BFC 及其应 参考答案 参考答案 所谓 BFC指的是一个独立的布局环境BFC 内部的元素布局与外部互不影响。 触发 BFC 的方式有很多常见的有 设置浮动overflow 设置为 auto、scroll、hiddenpositon 设置为 absolute、fixed 常见的 BFC 应用有 解决浮动元素令父元素高度坍塌的问题解决非浮动元素被浮动元素覆盖问题解决外边距垂直方向重合的问题 2. 介绍下 BFC、IFC、GFC 和 FFC 参考答案 BFC块级格式上下文指的是一个独立的布局环境BFC 内部的元素布局与外部互不影响。IFC行内格式化上下文将一块区域以行内元素的形式来格式化。GFC网格布局格式化上下文将一块区域以 grid 网格的形式来格式化FFC弹性格式化上下文将一块区域以弹性盒的形式来格式化 3. flex 布局如何使用 参考答案 flex 是 Flexible Box 的缩写意为弹性布局。指定容器display: flex即可。 容器有以下属性flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content。 flex-direction属性决定主轴的方向flex-wrap属性定义如果一条轴线排不下如何换行flex-flow属性是flex-direction属性和flex-wrap属性的简写形式默认值为row nowrapjustify-content属性定义了项目在主轴上的对齐方式。align-items属性定义项目在交叉轴上如何对齐。align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线该属性不起作用。 项目子元素也有一些属性orderflex-growflex-shrinkflex-basisflexalign-self。 order属性定义项目的排列顺序。数值越小排列越靠前默认为0。flex-grow属性定义项目的放大比例默认为0即如果存在剩余空间也不放大。flex-shrink属性定义了项目的缩小比例默认为1即如果空间不足该项目将缩小。flex-basis属性定义了在分配多余空间之前项目占据的主轴空间main size。flex属性是flex-grow, flex-shrink 和 flex-basis的简写默认值为0 1 auto。后两个属性可选。align-self 属性允许单个项目有与其他项目不一样的对齐方式可覆盖 align-items 属性。默认值为 auto表示继承父元素的align-items属性如果没有父元素则等同于stretch。 4. 怎么让一个 div 水平垂直居中 参考答案 水平垂直居中有好多种实现方式主要就分为两类不定宽高和定宽高 以在 body 下插入一个 div 为例 定宽高 使用定位 margin element.style {position: absolute;left: 50%;top: 50%;margin-left: -250px;margin-top: -250px;width: 500px;height: 500px;background: yellow;z-index: 1;
}使用定位 transfrom element.style {position: absolute;left: 50%;top: 50%;width: 500px;height: 500px;background: yellow;z-index: 1;transform: translate3d(-50%,-50%,0);
}不定宽高 不定宽高的方法基本都适用于定宽高的情况 这里把 div 的宽高按照内容展开使用定位 transform 同样是适用的 element.style {position: absolute;left: 50%;top: 50%;background: yellow;z-index: 1;transform: translate3d(-50%,-50%,0);
}5. 分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景。 参考答案 结构 display:none: 会让元素完全从渲染树中消失渲染的时候不占据任何空间, 不能点击 visibility: hidden:不会让元素从渲染树消失渲染元素继续占据空间只是内容不可见不能点击 opacity: 0: 不会让元素从渲染树消失渲染元素继续占据空间只是内容不可见可以点击 继承 display: none和opacity: 0是非继承属性子孙节点消失由于元素从渲染树消失造成通过修改子孙节点属性无法显示。 visibility: hidden是继承属性子孙节点消失由于继承了hidden通过设置visibility: visible;可以让子孙节点显式。 性能 displaynone : 修改元素会造成文档回流,读屏器不会读取display: none元素内容性能消耗较大 visibility:hidden: 修改元素只会造成本元素的重绘,性能消耗较少读屏器读取visibility: hidden元素内容 opacity: 0 修改元素会造成重绘性能消耗较少 6. 已知如下代码如何修改才能让图片宽度为 300px 注意下面代码不可修改。
img src1.jpg stylewidth:480px!important;”参考答案 CSS 方法 max-width:300px; 覆盖其样式transform: scale(0.625) 按比例缩放图片利用 CSS 动画的样式优先级高于 !important 的特性 JS 方法 document.getElementsByTagName(“img”)[0].setAttribute(“style”,“width:300px!important;”) 7. 如何用 css 或 js 实现多行文本溢出省略效果考虑兼容性 参考答案 CSS 实现方式 单行 overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;多行 display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; //行数
overflow: hidden;兼容 p{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;}
p::after{content: ...; position: absolute; bottom: 0; right: 0; padding-left: 40px;
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(right, transparent, #fff 55%);
background: -moz-linear-gradient(right, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);
}JS 实现方式 使用split 正则表达式将单词与单个文字切割出来存入words加上 ‘…’判断scrollHeight与clientHeight超出的话就从words中pop一个出来 8. 居中为什么要使用 transform为什么不使用 marginLeft/Top阿里 参考答案 transform 属于合成属性composite property对合成属性进行 transition/animation 动画将会创建一个合成层composite layer这使得被动画元素在一个独立的层中进行动画。通常情况下浏览器会将一个层的内容先绘制进一个位图中然后再作为纹理texture上传到 GPU只要该层的内容不发生改变就没必要进行重绘repaint浏览器会通过重新复合recomposite来形成一个新的帧。 top/left属于布局属性该属性的变化会导致重排reflow/relayout所谓重排即指对这些节点以及受这些节点影响的其它节点进行CSS计算-布局-重绘过程浏览器需要为整个层进行重绘并重新上传到 GPU造成了极大的性能开销。 9. 介绍下粘性布局sticky网易 参考答案 position 中的 sticky 值是 CSS3 新增的设置了 sticky 值后在屏幕范围viewport时该元素的位置并不受到定位影响设置是top、left等属性无效当该元素的位置将要移出偏移范围时定位又会变成fixed根据设置的left、top等属性成固定位置的效果。 sticky 属性值有以下几个特点 该元素并不脱离文档流仍然保留元素原本在文档流中的位置。当元素在容器中被滚动超过指定的偏移值时元素在容器内固定在指定位置。亦即如果你设置了top: 50px那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定不再向上移动。元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素如果祖先元素都不可以滚动那么是相对于viewport来计算元素的偏移量 10. 说出 space-between 和 space-around 的区别携程 参考答案 这个是 flex 布局的内容其实就是一个边距的区别按水平布局来说space-between是两端对齐在左右两侧没有边距而space-around是每个 子项目左右方向的 margin 相等所以两个item中间的间距会比较大。 如图所示 11. CSS3 中 transition 和 animation 的属性分别有哪些哔哩哔哩 参考答案 transition 过渡动画 transition-property指定过渡的 CSS 属性transition-duration指定过渡所需的完成时间transition-timing-function指定过渡函数transition-delay指定过渡的延迟时间 animation 关键帧动画 animation-name指定要绑定到选择器的关键帧的名称animation-duration动画指定需要多少秒或毫秒完成animation-timing-function设置动画将如何完成一个周期animation-delay设置动画在启动前的延迟间隔animation-iteration-count定义动画的播放次数animation-direction指定是否应该轮流反向播放动画animation-fill-mode规定当动画不播放时当动画完成时或当动画有一个延迟未开始播放时要应用到元素的样式animation-play-state指定动画是否正在运行或已暂停 12. 隐藏页面中的某个元素的方法有哪些 参考答案 隐藏类型 屏幕并不是唯一的输出机制比如说屏幕上看不见的元素隐藏的元素其中一些依然能够被读屏软件阅读出来因为读屏软件依赖于可访问性树来阐述。为了消除它们之间的歧义我们将其归为三大类 完全隐藏元素从渲染树中消失不占据空间。视觉上的隐藏屏幕中不可见占据空间。语义上的隐藏读屏软件不可读但正常占据空。 完全隐藏 (1) display 属性 display: none;(2) hidden 属性 HTML5 新增属性相当于 display: none div hidden
/div视觉上的隐藏 (1) 设置 posoition 为 absolute 或 fixed通过设置 top、left 等值将其移出可视区域。 position:absolute;
left: -99999px;(2) 设置 position 为 relative通过设置 top、left 等值将其移出可视区域。 position: relative;
left: -99999px;
height: 0(3) 设置 margin 值将其移出可视区域范围可视区域占位。 margin-left: -99999px;
height: 0;语义上隐藏 aria-hidden 属性 读屏软件不可读占据空间可见。 div aria-hiddentrue
/div13. 层叠上下文 参考答案 层叠上下文概念 在 CSS2.1 规范中每个盒模型的位置是三维的分别是平面画布上的 X 轴Y 轴以及表示层叠的 Z 轴。 一般情况下元素在页面上沿 X 轴 Y 轴平铺我们察觉不到它们在 Z 轴上的层叠关系。而一旦元素发生堆叠这时就能发现某个元素可能覆盖了另一个元素或者被另一个元素覆盖。 层叠上下文触发条件 HTML 中的根元素 HTML 本身就具有层叠上下文称为“根层叠上下文”。普通元素设置 position 属性为非 static 值并设置 z-index 属性为具体数值产生层叠上下文CSS3 中的新属性也可以产生层叠上下文 层叠顺序 “层叠顺序”stacking order表示元素发生层叠时按照特定的顺序规则在 Z 轴上垂直显示。 说简单一点就是当元素处于同一层叠上下文内时如何进行层叠判断。 具体的层叠等级如下图 14. 分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景 参考答案 display: none (不占空间不能点击)场景显示出原来这里不存在的结构visibility: hidden占据空间不能点击场景显示不会导致页面结构发生变动不会撑开opacity: 0占据空间可以点击场景可以跟transition搭配 15. 讲一下png8、png16、png32的区别并简单讲讲 png 的压缩原理 参考答案 PNG图片主要有三个类型分别为 PNG 8/ PNG 24 / PNG 32。 PNG 8PNG 8中的8其实指的是8bits相当于用282的8次方大小来存储一张图片的颜色种类28等于256也就是说PNG 8能存储256种颜色一张图片如果颜色种类很少将它设置成PNG 8得图片类型是非常适合的。PNG 24PNG 24中的24相当于3乘以8 等于 24就是用三个8bits分别去表示 R红、G绿、B蓝。R(0-255),G(0-255),B(0-255)可以表达256乘以256乘以25616777216种颜色的图片这样PNG 24就能比PNG 8表示色彩更丰富的图片。但是所占用的空间相对就更大了。PNG 32PNG 32中的32相当于PNG 24 加上 8bits的透明颜色通道就相当于R红、G绿、B蓝、A透明。R(0255),G(0255),B(0255),A(0255)。比PNG 24多了一个A透明也就是说PNG 32能表示跟PNG 24一样多的色彩并且还支持256种透明的颜色能表示更加丰富的图片颜色类型。 PNG图片的压缩分两个阶段 预解析Prediction这个阶段就是对png图片进行一个预处理处理后让它更方便后续的压缩。压缩Compression执行Deflate压缩该算法结合了 LZ77 算法和 Huffman 算法对图片进行编码。 16. 说说渐进增强和优雅降级 参考答案 这并不是一个新的概念其实就是以前提到的向上兼容和向下兼容。渐进增强相当于向上兼容优雅降级相当于向下兼容。向下兼容指的是高版本支持低版本或者说后期开发的版本能兼容早期开发的版本。 在确定用户群体的前提下渐进增强针对低版本浏览器进行页面构建保证基本功能再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。优雅降级一开始就构建完整的功能再针对低版本浏览器进行兼容。区别优雅降级是从复杂的现状开始并试图减少用户体验的供给而渐进增强则是从一个基础的、能够起到作用的版本开始再不断扩充以适应未来环境的需要。 绝大多少的大公司都是采用渐进增强的方式因为业务优先提升用户体验永远不会排在最前面。 例如新浪微博网站这样亿级用户的网站前端的更新绝不可能追求某个特效而不考虑低版本用户是否可用。一定是确保低版本到高版本的可访问性再渐进增强。如果开发的是一面面向青少面的软件或网站你明确这个群体的人总是喜欢尝试新鲜事物喜欢炫酷的特效喜欢把软件更新至最新版本这种情况再考虑优雅降级。 17. 介绍下 positon 属性 参考答案 position 属性主要用来定位常见的属性值如下 absolute 绝对定位相对于 static 定位以外的第一个父元素进行定位。 relative 相对定位相对于其自身正常位置进行定位。 fixed 固定定位相对于浏览器窗口进行定位。 static 默认值。没有定位元素出现在正常的流中。 inherit 规定应该从父元素继承 position 属性的值。 sticky 粘性定位当元素在容器中被滚动超过指定的偏移值时元素在容器内固定在指定位置。 18. 如何用 CSS 实现一个三角形 参考答案 可以利用 border 属性 利用盒模型的 border 属性上下左右边框交界处会呈现出平滑的斜线这个特点通过设置不同的上下左右边框宽度或者颜色即可得到三角形或者梯形。 如果想实现其中的任一个三角形把其他方向上的 border-color 都设置成透明即可。 示例代码如下 div/divdiv{
width: 0;
height: 0;
border: 10px solid red;
border-top-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
}19. 如何实现一个自适应的正方形 参考答案 方法1利用 CSS3 的 vw 单位 vw 会把视口的宽度平均分为 100 份 .square {width: 10vw;height: 10vw;background: red;
}方法2利用 margin 或者 padding 的百分比计算是参照父元素的 width 属性 .square {width: 10%;padding-bottom: 10%; height: 0; // 防止内容撑开多余的高度background: red;
}20. 如何实现三栏布局 参考答案 三栏布局是很常见的一种页面布局方式。左右固定中间自适应。实现方式有很多种方法。 第一种flex div classcontainerdiv classleftleft/divdiv classmainmain/divdiv classrightright/div
/div
.container{display: flex;
}
.left{flex-basis:200px;background: green;
}
.main{flex: 1;background: red;
}
.right{flex-basis:200px;background: green;
}第二种position margin div classcontainerdiv classleftleft/divdiv classrightright/divdiv classmainmain/div
/div
body,html{padding: 0;margin: 0;
}
.left,.right{position: absolute;top: 0;background: red;
}
.left{left: 0;width: 200px;
}
.right{right: 0;width: 200px;
}
.main{margin: 0 200px ;background: green;
}第三种float margin div classcontainerdiv classleftleft/divdiv classrightright/divdiv classmainmain/div
/div
body,html{padding:0;margin: 0;
}
.left{float:left;width:200px;background:red;
}
.main{margin:0 200px;background: green;
}
.right{float:right;width:200px;background:red;
}21. import 和 link 区别 参考答案 从属关系区别 import是 CSS 提供的语法规则只有导入样式表的作用link是HTML提供的标签不仅可以加载 CSS 文件还可以定义 RSS、rel 连接属性等。 加载顺序区别 加载页面时link标签引入的 CSS 被同时加载import引入的 CSS 将在页面加载完毕后被加载。 兼容性区别 import是 CSS2.1 才有的语法故只可在 IE5 才能识别link 标签作为 HTML 元素不存在兼容性问题。 DOM可控性区别 可以通过 JS 操作 DOM 插入link标签来改变样式由于DOM方法是基于文档的无法使用import的方式插入样式。 22. 说说你对 BFC 的理解 参考答案 块级格式化上下文 Block Formatting Context 是 CSS 规范中一个概念决定元素的内容如何渲染以及与其他元素的关系。存在5条规则 BFC 有隔离作用内部元素不受外部元素影响反之亦然。一个元素只能存在于一个 BFC 中如果能同时存在于两个 BFC 中那么就违反了 BFC 的隔离原则。BFC 内的元素按正常流排列元素间的间隙由元素外边距控制。BFC 中的内容不会与外面的浮动元素重叠。计算 BFC 的高度需要包括 BFC 内的浮动子元素的高度。 23. 清除浮动的方法 参考答案 clear 清除浮动添加空div法在浮动元素下方添加空div并给该元素写css样式 {clear:both;height:0;overflow:hidden;} 给浮动元素父级设置高度 父级同时浮动需要给父级同级元素添加浮动 父级设置成inline-block其margin: 0 auto居中方式失效 给父级添加overflow:hidden 清除浮动方法 万能清除法 after 伪类清浮动现在主流方法推荐使用 24. 说说选择器的权重计算方式 参考答案 !important 最高* 为0行内样式 A 组加一id 选择器 B 组加一类、伪类、属性选择器 C 组加一元素、伪元素 D 组加一。 其中 A 组权重值为 1000B 组权重值为 100C 组权重值为 10D 组权重值为 1。 25. css reset 和 normalize.css 有什么区别 参考答案 两者都是通过重置样式保持浏览器样式的一致性 前者几乎为所有标签添加了样式后者保持了许多浏览器样式保持尽可能的一致 后者修复了常见的桌面端和移动端浏览器的 bug包含了 HTML5 元素的显示设置、预格式化文字的 font-size 问题、在 IE9 中 SVG 的溢出、许多出现在各浏览器和操作系统中的与表单相关的 bug。 前者中含有大段的继承链 后者模块化文档较前者来说丰富 26. 说说两种盒模型以及区别 参考答案 盒模型也称为框模型就是从盒子顶部俯视所得的一张平面图用于描述元素所占用的空间。它有两种盒模型W3C盒模型和IE盒模型IE6以下不包括IE6以及怪异模式下的IE5.5 理论上两者的主要区别是二者的盒子宽高是否包括元素的边框和内边距。当用CSS给给某个元素定义高或宽时IE盒模型中内容的宽或高将会包含内边距和边框而W3C盒模型并不会。 27. 如何避免重绘或者重排 参考答案 集中改变样式 我们往往通过改变 class 的方式来集中改变样式 // 判断是否是黑色系样式
const theme isDark ? dark : light// 根据判断来设置不同的class
ele.setAttribute(className, theme)使用 DocumentFragment 我们可以通过createDocumentFragment创建一个游离于DOM树之外的节点然后在此节点上批量操作最后插入DOM树中因此只触发一次重排 var fragment document.createDocumentFragment();for (let i 0;i10;i){let node document.createElement(p);node.innerHTML i;fragment.appendChild(node);
}document.body.appendChild(fragment);提升为合成层 将元素提升为合成层有以下优点 合成层的位图会交由 GPU 合成比 CPU 处理要快当需要 repaint 时只需要 repaint 本身不会影响到其他的层对于 transform 和 opacity 效果不会触发 layout 和 paint 提升合成层的最好方式是使用 CSS 的 will-change 属性 #target {will-change: transform;
}28. 如何触发重排和重绘 参考答案 任何改变用来构建渲染树的信息都会导致一次重排或重绘 添加、删除、更新DOM节点通过display: none隐藏一个DOM节点-触发重排和重绘通过visibility: hidden隐藏一个DOM节点-只触发重绘因为没有几何变化移动或者给页面中的DOM节点添加动画添加一个样式表调整样式属性用户行为例如调整窗口大小改变字号或者滚动。 29. 重绘与重排的区别 参考答案 重排: 部分渲染树或者整个渲染树需要重新分析并且节点尺寸需要重新计算表现为重新生成布局重新排列元素重绘: 由于节点的几何属性发生改变或者由于样式发生改变例如改变元素背景色时屏幕上的部分内容需要更新表现为某些元素的外观被改变 单单改变元素的外观肯定不会引起网页重新生成布局但当浏览器完成重排之后将会重新绘制受到此次重排影响的部分 重排和重绘代价是高昂的它们会破坏用户体验并且让UI展示非常迟缓而相比之下重排的性能影响更大在两者无法避免的情况下一般我们宁可选择代价更小的重绘。 『重绘』不一定会出现『重排』『重排』必然会出现『重绘』。 30. 如何优化图片 参考答案 对于很多装饰类图片尽量不用图片因为这类修饰图片完全可以用 CSS 去代替。 对于移动端来说屏幕宽度就那么点完全没有必要去加载原图浪费带宽。一般图片都用 CDN 加载可以计算出适配屏幕的宽度然后去请求相应裁剪好的图片。 小图使用 base64 格式 将多个图标文件整合到一张图片中雪碧图 选择正确的图片格式 对于能够显示 WebP 格式的浏览器尽量使用 WebP 格式。因为 WebP 格式具有更好的图像数据压缩算法能带来更小的图片体积而且拥有肉眼识别无差异的图像质量缺点就是兼容性并不好小图使用 PNG其实对于大部分图标这类图片完全可以使用 SVG 代替照片使用 JPEG 31. 说说重绘Repaint和回流Reflow 参考答案 请参阅前面 28、29、30 题。 32. 你能描述一下渐进增强和优雅降级之间的不同吗? 参考答案 渐进增强 progressive enhancement针对低版本浏览器进行构建页面保证最基本的功能然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。 优雅降级 graceful degradation一开始就构建完整的功能然后再针对低版本浏览器进行兼容。 区别优雅降级是从复杂的现状开始并试图减少用户体验的供给而渐进增强则是从一个非常基础的能够起作用的版本开始并不断扩充以适应未来环境的需要。降级功能衰减意味着往回看而渐进增强则意味着朝前看同时保证其根基处于安全地带。 33. 如何在页面上实现一个圆形的可点击区域 参考答案 首先使用 CSS3 新增的 border-radius 属性来将一个区域变成圆形然后再使用 JS 来绑定事件。 34. 什么是渐进式渲染progressive rendering 参考答案 渐进式渲染是用于提高网页性能尤其是提高用户感知的加载速度以尽快呈现页面的技术。 在以前互联网带宽较小的时期这种技术更为普遍。如今移动终端的盛行而移动网络往往不稳定渐进式渲染在现代前端开发中仍然有用武之地。 一些举例 图片懒加载——页面上的图片不会一次性全部加载。当用户滚动页面到图片部分时JavaScript 将加载并显示图像。确定显示内容的优先级分层次渲染——为了尽快将页面呈现给用户页面只包含基本的最少量的 CSS、脚本和内容然后可以使用延迟加载脚本或监听DOMContentLoaded/load事件加载其他资源和内容。异步加载 HTML 片段——当页面通过后台渲染时把 HTML 拆分通过异步请求分块发送给浏览器。 35. CSS3 新增了那些东西 参考答案 CSS3 新增东西众多这里列举出一些关键的新增内容 选择器盒子模型属性border-radius、box-shadow、border-image背景background-size、background-origin、background-clip文本效果text-shadow、word-wrap颜色新增 RGBAHSLA 模式渐变线性渐变、径向渐变字体font-face2D/3D转换transform、transform-origin过渡与动画transition、keyframes、animation多列布局媒体查询 36. 我想实现一根只有 1px 的长线怎么实现? 参考答案 实现的方式很多下面是一种参考方案 .line {
width: 100%;
height: 1px;
overflow: hidden;
font-size: 0px;
border-bottom: dashed 1px #ccc;
}div classline/div37. 三角形怎么实现要设置宽高吗 参考答案 设置块级元素宽高为 0边框3条设置为透明色。具体可以参阅第 18 题答案 38. box-sizing 有什么作用 参考答案 box-sizing 是用于告诉浏览器如何计算一个元素是总宽度和总高度主要用来切换标准盒模型和 IE 盒子。 标准盒模型 box-sizing: content-box content-box: width content width; height content height IE盒模型 box-sizing: border-box border-box: width border padding content width heigth border padding content heigth 39. img 标签在页面中有 1px 的边框怎么处理 参考答案 img{border: 0;
}40. 如何绝对居中不用定位看书网 参考答案 方法一 使用 flex 弹性盒来绝对居中 方法二 设置 margin-left 为 calc(50% - 50px); 41. CSS 选择器权重值 参考答案 请参阅前面第 24 题答案。 42. 我有5个div在一行我要让div与div直接间距10px且最左最右两边的div据边框10px同时在我改变窗口大小时这个10px不能变div根据窗口改变大小长天星斗 参考答案 *{
margin: 0;
}
.container {
display: flex;
}
.containerdiv{
outline: 1px solid;
margin: 0 5px;
flex-grow: 1;
}.containerdiv:first-child {
margin-left: 10px;
}
.containerdiv:last-child {
margin-right: 10px;
}div classcontainer
div1/div
div2/div
div3/div
div4/div
div5/div
/div43. bootstrap 响应式的原理是什么 参考答案 bootstrap 使用的是栅格布局。栅格布局的实现原理是通过定义容器大小平分 12 份再调整内外边距最后结合媒体查询就制作出了强大的响应式网格系统。 44. 如何做响应式 参考答案 可以使用 CSS3 新增的媒体查询。 媒体查询的语法如下 media mediatype and|not|only (media feature) { CSS-Code;}45. 什么是响应式设计 参考答案 响应式设计简而言之就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。 优点 面对不同分辨率设备灵活性强能够快捷解决多设备显示适应问题 缺点 兼容各种设备工作量大效率低下 代码累赘会出现隐藏无用的元素加载时间加长 其实这是一种折中性质的设计解决方案多方面因素影响而达不到最佳效果 一定程度上改变了网站原有的布局结构会出现用户混淆的情况 具体步骤 第一步meta 标签 为了适应屏幕多数的移动浏览器会把HTML网页缩放到设备屏幕的宽度。你可以使用meta标签的viewport属性来设置。下面的代码告诉浏览器使用设备屏幕宽度作为内容的宽度并且忽视初始的宽度设置。这段代码写在 head里面 meta nameviewport contentwidthdevice-width, initial-scale1.0IE8及以下的浏览器不支持media query。你可以使用 media-queries.js 或 respond.js 。这样IE就能支持media query了。 !--[if lt IE 9] script srchttp://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js/script ![endif]--第二步HTML 结构 这个例子里面有header、content、sidebar和footer等基本的网页布局。 header 有固定的高180pxcontent 容器的宽是600pxsidebar的宽是300px。 第三步Media Queries CSS3 media query 响应式网页设计的关键。它像一个 if 语句告诉浏览器如何根据特定的屏幕宽口来加载网页。 下面是一个媒体查询示例代码 media screen and (max-width: 300px) {body {background-color:lightblue;}
}如果文档宽度小于 300 像素则修改背景演示(background-color) 46. 块级元素转行内元素除了 display:inline 还有什么 参考答案 display:inline-block 47. 对 CSS hack 技术的理解 参考答案 什么是CSS hack 由于不同厂商的流览器或某浏览器的不同版本如IE6-IE11,Firefox/Safari/Opera/Chrome等对CSS的支持、解析不一样导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时我们为了获得统一的页面效果就需要针对不同的浏览器或不同版本写特定的CSS样式我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程叫做CSS hack! CSS hack的原理 由于不同的浏览器和浏览器各版本对CSS的支持及解析结果不一样以及CSS优先级对浏览器展现效果的影响我们可以据此针对不同的浏览器情景来应用不同的CSS。 CSS hack分类 CSS Hack大致有3种表现形式CSS属性前缀法、选择器前缀法以及IE条件注释法即HTML头部引用if IEHack实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。 属性前缀法(即类内部Hack)例如 IE6能识别下划线“和星号” * “IE7能识别星号” * “但不能识别下划线”“IE6~IE10都认识”\9但firefox前述三个都不能认识。选择器前缀法(即选择器Hack)例如 IE6能识别html .class{}IE7能识别html .class{}或者*:first-childhtml .class{}。IE条件注释法(即HTML条件注释Hack)针对所有IE(注IE10已经不再支持条件注释) !--[if IE]IE浏览器显示的内容 ![endif]--针对IE6及以下版本 !--[if lt IE 6]只在IE6-显示的内容 ![endif]--。这类Hack不仅对CSS生效对写在判断语句里面的所有代码都会生效。 下面是微软官方推荐使用的 hack 方式 只在IE下生效!--[if IE] 这段文字只在IE浏览器显示![endif]--只在IE6下生效!--[if IE 6] 这段文字只在IE6浏览器显示![endif]--只在IE6以上版本生效!--[if gte IE 6] 这段文字只在IE6以上(包括)版本IE浏览器显示![endif]--只在IE8上不生效!--[if ! IE 8] 这段文字在非IE8浏览器显示![endif]--非IE浏览器生效!--[if !IE] 这段文字只在非IE浏览器显示![endif]--48. px 和 em 的区别 参考答案 px 即 pixel 像素是相对于屏幕分辨率而言的是一个相对绝对单位即在同一设备上每个设备像素所代表的物理长度是固定不变的绝对性但在不同设备间每个设备像素所代表的物理长度是可以变化的相对性。em 一个相对单位不是一个固定的值来源于纸张印刷业在 web 领域它指代基准字号浏览器默认渲染文字大小是 16px 它会继承计算后的父级元素的 font-size。 49. div 之间的间隙是怎么产生的应该怎么消除 参考答案 原因浏览器解析的时候会把回车换行符解析成一定的间隙间隙的大小跟默认的字体大小设置有关。 解决其父元素加上 font-size:0 的属性但是字体需要额外处理。 50. position 有哪些值各自的用法如何 参考答案 position 属性值有 static、relative、absolute、fixed、sticky。 static该关键字指定元素使用正常的布局行为即元素在文档常规流中当前的布局位置。 relative相对定位的元素是在文档中的正常位置偏移给定的值但是不影响其他元素的偏移。 absolute相对定位的元素并未脱离文档流而绝对定位的元素则脱离了文档流。在布置文档流中其它元素时绝对定位元素不占据空间。绝对定位元素相对于最近的非 static 祖先元素定位。 fixed固定定位与绝对定位相似但元素的包含块为 viewport 视口。该定位方式常用于创建在滚动屏幕时仍固定在相同位置的元素。 sticky粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位之后为固定定位。 51. 相对定位、绝对定位、固定定位的区别 参考答案 请参阅上一题答案。 52. display:none 和 visibility:hidden 的区别 参考答案 相同点都是设置某一个 DOM 元素不可见 区别 display:none 设置不可见后不会再存在于文档流中也就是说不会再占据空间visibility:hidden 仍然存在于文档流中之前所占据的空间还存在 53. 触发 BFC 的机制 参考答案 请参阅前面第 1 题。 54. div 怎么垂直居中 参考答案 div 垂直居中的方式比较多常见的有下面 3 种 利用绝对定位实现的居中利用flex垂直居中transformrelative实现的居中 解析 下面针对上面所列举的 3 种垂直居中的方式给出对应的代码片段 利用绝对定位实现的居中 !DOCTYPE html
htmlheadmeta charsetUTF-8title居中/titlestyle typetext/css*{padding: 0px;margin: 0px;}body {height: 100%;overflow: hidden;}.father{position: absolute;height: 500px;width: 100%;background-color:#2AABD2;}.children{position: absolute;top: 50%;left: 50%;background-color: red;width: 100px; height: 100px;margin: -50px 0 0 -50px;}/style/headbodydiv classfatherdiv classchildren/div/div/body
/html利用flex垂直居中 !DOCTYPE html
htmlheadmeta charsetUTF-8title居中/titlestyle typetext/css*{padding: 0px;margin: 0px;}body {height: 100%;overflow: hidden;}.father{height: 500px;width: 100%;background-color:#2AABD2;display: flex;justify-content: center;/*实现水平居中*/align-items:center; /*实现垂直居中*/}.children{background-color: red;width: 100px; height: 100px;}/style/headbodydiv classfatherdiv classchildren/div/div/body
/htmltransformrelative实现的居中 !DOCTYPE html
htmlheadmeta charsetUTF-8title居中/titlestyle typetext/css*{padding: 0px;margin: 0px;}body {height: 100%;overflow: hidden;}.father{position: absolute;height: 500px;width: 100%;background-color:#2AABD2;}.children{width: 300px;height: 150px;background-color: #333333;position: relative;top: 50%;left: 50%;transform: translateX(-50%) translateY(-50%);}/style/headbodydiv classfatherdiv classchildren/div/div/body
/html55. less、sass 是什么为什么要用它 参考答案 Less 和 Sass 被称之为 CSS 预处理器。 CSS 预处理器可以为 CSS 增加变编程特性通过编译器将使用新语法的文件输出为一个 CSS 文件解决 CSS 难以复用、代码冗余、可维护性低的缺点。常见的预处理器有 less、sass、stylus。 使用他们来书写 CSS 代码可以更符合编程思维、简化代码、提高代码重用、便于维护。 56. 如何隐藏一个 DOM 元素 参考答案 display: none;visibility: hidden;opacity: 0; 57. 你怎么处理页面兼容性问题 参考答案 统一标准模式利用 CSS 重置技术初始化默认样式针对不同浏览器采用不同的解决方案使用 CSS Hack 技术 58. CSS 引用的方式有哪些link 和 import 的区别 参考答案 CSS 引用的方式有 外联通过 link 标签外部链接样式表内联在 head 标记中使用 style 标记定义样式嵌入在元素的开始标记里通过 style 属性定义样式 link 和 import 的区别 link 属于 HTML 标签而 import 完全是 CSS 提供的一种方式。 link 标签除了可以加载 CSS 外还可以做很多其它的事情比如定义 RSS定义 rel 连接属性等import 就只能加载 CSS 了。 加载顺序的差别。 比如在 a.css 中使用 import 引用 b.css只有当使用当使用 import 命令的宿主 css 文件 a.css 被下载、解析之后浏览器才会知道还有另外一个 b.css 需要下载这时才去下载然后下载后开始解析、构建 render tree 等一系列操作. 兼容性的差别。 由于 import 是 CSS2.1 提出的所以老的浏览器不支持import 只有在 IE5 以上的才能识别而 link 标签无此问题。 当使用 JS 控制 DOM 去改变样式的时候只能使用 link 标签因为 import 不是 DOM 可以控制的。 对于可换皮肤的网站而言可以通过改变 link 便签这两个的 href 值来改变应用不用的外部样式表但是对于 import 是无法操作的毕竟不是标签。 59. CSS 动画如何实现 参考答案 即 animation 属性对元素某个或多个属性的变化进行控制可以设置多个关键帧。属性包含了动画的名称、完成时间以毫秒计算、周期、间隔、播放次数、是否反复播放、不播放时应用的样式、动画暂停或运行。 它不需要触发任何事件就可以随着时间变化来改变元素的样式。 使用 CSS 做动画 keyframes 规定动画。animation 所有动画属性的简写属性。animation-name 规定 keyframes 动画的名称。animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。animation-timing-function 规定动画的速度曲线。默认是 ease。animation-fill-mode 规定当动画不播放时当动画完成时或当动画有一个延迟未开始播放时要应用到元素的样式。animation-delay 规定动画何时开始。默认是 0。animation-iteration-count 规定动画被播放的次数。默认是 1。animation-direction 规定动画是否在下一周期逆向地播放。默认是 normal。animation-play-state 规定动画是否正在运行或暂停。默认是 running。 60. displayinline-block 在什么情况下会产生间隙 参考答案 空隙产生的原因 元素被当成行内元素排版的时候元素之间的空白符空格、回车换行等都会被浏览器处理根据 white-space 的处理方式默认是 normal合并多余空白原来 HTML 代码中的回车换行被转成一个空白符在字体不为 0 的情况下空白符占据一定宽度所以 inline-block 的元素之间就出现了空隙。 这些元素之间的间距会随着字体的大小而变化例如当行内元素 font-size:16px 时间距为8px。 解决空隙的办法 办法一解决元素之间的空白符 !-- 将前一个标签结束符和后一个标签开始符写在同一行 --
div classparentdiv classchildchild1/divdiv classchildchild2/div
/div
!-- 将所有子元素写在同一行 --
div classparentdiv classchildchild1/divdiv classchildchild2/div
/div缺点代码的可读性变差。 方法二为父元素中设置 font-size: 0在子元素上重置正确的 font-size div classparent stylefont-size: 0px div classchild stylefont-size: 16pxchild1/div div classchild stylefont-size: 16pxchild2/div/div缺点inline-block 元素必须设定字体不然行内元素中的字体不会显示。 增加了代码量。 方法三为 inline-block 元素添加样式 float:left 缺点float布局会有高度塌陷问题 方法四设置子元素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; /*兼容其他浏览器题主还未验证*/
}61. position 和 display、overflow 发生重叠时会发生什么 参考答案 浮动的行内变成块级元素绝对定位的行内也会变成块级元素。绝对定位时浮动失效top,bottom,left,right能改变位置。相邻普通流块级垂直方向margin叠压。浮动inline-block绝对定位不会和垂直方向其他元素margin叠压。BFC不会和子元素margin叠压。(absolute,fixed都是绝对定位) 62. 什么是选择器有哪些选择器 参考答案 选择器决定将样式应用在哪个或哪些元素身上。 元素选择器例如 div{…} p{…}id 选择器 例如 #box{…}类选择器 例如 .box{…}属性选择器[href“#”]{…}通配*{…}组合并集选择器div,p,a,.main{…}交集选择器input[type“text”]{…}后代选择器header nav{…}子级选择器 ulli{…}伪类选择器 :nth-child(num){…}:nth-child(odd){…}:nth-child(even){…}:nth-of-type{…}:first-child{…}:last-child{…}only-child{…}a:link{…}a:visited{…}:hover{…}a:active{…} 伪元素选择器 ::before{…}::after{…}::first-letter{…}::first-line{…} 63. 什么是继承CSS 中哪些属性可以继承哪些不可以继承 参考答案 继承指元素可以自动获得祖先元素的某些 CSS 属性。通常来说文本类的属性具有继承性。文本类的样式可以继承例如 color、 font-size、 line-height、 font-family、 font-weight、 font-weight、 text-decoration、 letter-spacing、text-align 等等display、 margin、 padding、 border、 background、 position、 float 等则不会被继承 64. 谈谈你对响应式的理解。 参考答案 响应式布局是 Ethan Marcotte 在2010年5月提出的一个概念。即页面的设计与开发应当根据用户行为以及设备环境进行相应的响应与调整。能让一个网站兼容多个终端展示出不同的结构样式而不是为每个终端做一个特定的版本。 具体的实践方式可由多方面组成包括使用 flex 布局、使用 CSS3 媒介查询 media query 实现。其特点在于灵活性较强但缺点在于兼容性较差、工作量巨大、代码冗余、网页加载时间过长。 65. CSS 的计算属性知道吗 参考答案 即 calc( ) 函数主要用于指定元素的长度支持所有 CSS 长度单位运算符前后都需要保留一个空格。 比如 width: calc(100% - 50px); 66. 为何 CSS 放在 HTML 头部 参考答案 为了尽早让浏览器拿到 CSS 并且生成 CSSOM然后与 HTML 一次性生成最终的 RenderTree渲染一次即可。如果放在 HTML 底部会出现渲染卡顿的现象影响性能和用户体验。 67. background-size 有哪 4 种值类型 参考答案 background-size: length|percentage|cover|contain;length设置背景图片高度和宽度。第一个值设置宽度第二个值设置的高度。如果只给出一个值第二个是设置为 auto(自动)percentage将计算相对于背景定位区域的百分比。第一个值设置宽度第二个值设置的高度。如果只给出一个值第二个是设置为“auto(自动)”cover此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。contain此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。 68. transition、transform、animate 的区别 参考答案 transition过渡效果它有4个属性 transition: property duration timing-function delay;property css属性的名称 duration 多长时间完成 timing-function转速曲线 delay开始的时候。 transform 应用于元素的 2D 或 3D 转换。这个属性允许你将元素旋转缩放移动倾斜等。 旋转rotate缩放scale移动translate倾斜skew animate应用动画效果。语法如下 animation: name duration timing-function delay iteration-count direction fill-mode play-state;name 定义的名称duration 多长时间完成delay 开始前多长的延迟iteration-count播放几次direction 指定是否应该轮流反向播放动画。fill-mode结束的状态play-state指定动画是否正在运行或已暂停。 69. 描述 CSS reset 的作用和用途 参考答案 因为不同浏览器间的内核存在差异对于标记都有自己默认的样式用来保证在没有自定样式的情况下也能被排列、渲染。但各个厂家有自己的风格样式想要样式不被浏览器默认样式影响就需要清除默认样式使各浏览器表现得一致。 70. 在 CSS 中关于盒子的 margin 属性叙述正确的是
A. 边距 margin 只能取一个值
B. margin 边距的属性有 margin-left、margin-right、margin-top、margin-bottom
C. margin 属性的值不可为 auto
D. margin 的参数值不能全部设置为 0px 参考答案 B 解析 选项 Amargin 能够设置四个方向的值 选项 C可以为 auto 选项 D可以设置为 0px 71. 以下代码中属于相对定位的是
A. #b{width:100px; position:relative}
B. #b{width:100px; position:static}
C. #b{width:100px;}
D. #b{width:100px; position:absolute} 参考答案 A 解析 B 和 C 都是静态定位D 是绝对定位 72. 以下选项中不能实现清除浮动的是
A. 空 div
B. hover 伪选择器
C. clear 属性
D. overflow 属性 参考答案 B A、C、D 是常用的清除浮动的方式B 是为元素添加 hover 效果 73. 关于 z-index 属性叙述正确的是
A. 必须与 postion 一起使用才能生效此时 postion 取任何值都可以
B. 此值越大层的顺序越往下
C. 一般后添加的元素其 z-index 值越大
D. 即使上面的层没有任何内容也会挡住下面的层使下面的层显示不出来 参考答案 C 解析 选项 A 确实要和 postion 一起使用但是不是任何值都可以z-index 仅能在定位元素上奏效例如 absolute 选项 B 值越大层的顺序越在上面 选项 D如果当前层没有内容或者内容是透明的是可以看到下面的层的内容的 74. 有一个高度自适应的 div里面有 2 个 div一个高度 100px希望另一个填满剩下的高度CSS 实现 参考答案 方法一利用定位 div classmain
div classbox1/div
div classbox2/div
/divhtml,
body {
height: 100%;
margin: 0px;
padding: 0px;
}.main {
position: relative;
height: 100%;
}.box1 {
height: 100px;
background-color: red;
}.box2 {
position: absolute;
width: 100%;
top: 100px;
bottom: 0px;
background-color: blue;
}方法二利用计算属性calc html,
body {
height: 100%;
margin: 0px;
padding: 0px;
}.main {
height: 100%;
}.box1 {
height: 100px;
background-color: red;
}.box2 {
height: calc(100% - 100px);
background-color: blue;
}75. display 有哪些值说明他们的作用。 参考答案 常用的有 none此元素不显示。block将元素显示为块级元素前后会带换行符。inline默认值元素会被显示为内联元素前后没有换行符。inline-block行内块级元素。 76. position 的值 relative 和 absolute 的定位原点是 参考答案 absolute生成绝对定位的元素定位原点是离自己这一级元素最近的一级 position 设置为 absolute 或者 relative 的父元素的左上角为原点的。relative生成相对定位的元素定位原点是元素本身所在位置。 77. 当 margin-top、padding-top 的值是百分比时分别是如何计算的
A. 相对父级元素的 height相对自身的 height
B. 相对最近父级块级元素的 height相对自身的 height
C. 相对父级元素的 width相对自身的 width
D. 相对最近父级块级元素的 width相对最近父级块级元素的 width 参考答案 D 可以对元素的margin设置百分数百分数是相对于父元素的width计算不管是margin-top/margin-bottom还是margin-left/margin-right。padding同理 如果没有为元素声明width在这种情况下元素框的总宽度包括外边距取决于父元素的width这样可能得到“流式”页面即元素的外边距会扩大或缩小以适应父元素的实际大小。如果对这个文档设置样式使其元素使用百分数外边距当用户修改浏览窗口的宽度时外边距会随之扩大或缩小。 78. 伪元素 :before :after 的作用 参考答案 特有的 content 可用于在 CSS 中向元素的头部或尾部添加内容常用于制作小图标。 79. 如何使用选择器来隐藏第一个列表项目 参考答案 ulli:first-child{
display: none;
}80. transition 和 animation 的区别以及应用场景 参考答案 区别 触发条件不同。transition 通常需要交互由事件触发。animation 则与 gif 动图差不多立即播放。循环。animation 可以设定循环次数。精确性。animation 可以设定每一帧的样式和时间其中的每一帧都可以有单独的变化。而 transition 中的所有样式都是一起变化的。与 JS 的交互。使用 JS 去操作时transition 更多。 应用场景 如果需要灵活定制多帧以及循环使用 animation 。如果只是简单的从 XX 样式变到 XX 样式两者皆可。如果要使用 JS 设定动画使用 transition 。 81. 在 rem 自适应页面中使用 sprite 会出现背景图不随元素放大缩小的情况如何解决 参考答案 将 backgroud-size 也换算为 rem 作为单位。 82. Normalize 是什么 参考答案 一个样式表的重置文件。因为不同浏览器间的内核存在差异对于标记都有自己默认的样式用来保证在没有自定样式的情况下也能被排列、渲染。但各个厂家有自己的风格样式想要样式不被浏览器默认样式影响就需要清除默认样式使各浏览器表现得一致。 83. 谈一谈 CSS 中的 2D 转换。 参考答案 即 transform能够对元素进行移动、缩放、拉伸。 translate(x, y): 元素从当前位置根据给定的 x 坐标 y 坐标移动。rotate(angle): 元素顺时针旋转指定的角度若为负值则逆时针旋转。scale(num, num): 放大或缩小元素。skew(angle, angle): 围绕 X Y 轴进行转动。 84. 谈一谈 CSS3 多列属性是什么以及其使用场景 参考答案 多列布局是 CSS3 新增的一组属性常用的属性如下 column-count: num: 规定元素被分隔的列数。column-gap: num; 规定列之间的间隔。column-rule: width style color: 规定列之间的样式规则。 更多多列布局相关属性可以参阅https://www.runoob.com/css3/css3-multiple-columns.html 应用场景可以将文本内容设计成像报纸一样的多列布局。 85. vw、vh 是什么 参考答案 vw 和 vh 是 CSS3 新单位即 view width 可视窗口宽度 和 view height 可视窗口高度。1vw 就等于可视窗口宽度的百分之一1vh 就等于可视窗口高度的百分之一。 86. 如何通过选择器选择 3 的倍数 参考答案 :nth-child(3n){…} 87. 页面布局有几种方式 参考答案 固定宽度布局为网页设置一个固定的宽度通常以 px 做为长度单位常见于 PC 端网页。流式布局为网页设置一个相对的宽度通常以百分比做为长度单位。栅格化布局将网页宽度人为的划分成均等的长度然后排版布局时则以这些均等的长度做为度量单位通常利用百分比做为长度单位来划分成均等的长度。响应式布局通过检测设备信息决定网页布局方式即用户如果采用不同的设备访问同一个网页有可能会看到不一样的内容一般情况下是检测设备屏幕的宽度来实现。 88. 什么是流式布局 参考答案 即 Fluid Layout 。这种布局方式在前端开发的早期历史上用来应对不同尺寸的 PC 屏幕那时的屏幕尺寸差异不会太大在当今的移动设备开发也常用。 流式布局是页面元素宽度依照屏幕分辨率进行适配调整但整体布局不变其代表就是栅格系统网格布局。划分区域的尺寸使用百分比通常也会搭配 min-* 或 max-*。例如设置网页主体宽度为 85%min-width 为 960px图片也做类似的处理 width: 100%; max-width 设置为图片本身尺寸以防止被拉伸变形。 布局特点在于屏幕分辨率发生变化时布局不变元素尺寸变。但缺点也很明显如果屏幕尺寸跨度太大那么在相对其原始设计而言过大过小的屏幕上就不能正常显示。 89. 什么是静态布局 参考答案 即 Static Layout。传统的 web 设计网页中所有元素的尺寸一律使用 px 作为单位。 布局特点在于无论浏览器尺寸为多少布局始终按照最初的设计稿布局来显示。常规的 PC 网站都是使用的静态定宽度布局如果浏览器小于这个宽度则出现滚动条如果浏览器大于这个宽度则内容居中或添加背景。这些设计方式是最常见的。 在 PC 中居中布局所有样式使用一个绝对宽度定宽适配当今主流屏幕宽度。在移动设备中另外建立移动网站单独设计一个布局使用不同的域名比如 wap. 或 m.。 这种布局方案对于 UI 设计师和前端开发人员来说都是最简单、没有兼容性问题的。但缺点显而易见需要做两次开发。当前大部门门户网站、企业宣传站点都采用了这种布局方式。 90. 什么是自适应布局什么是响应式布局 参考答案 自适应布局 即 Adaptive Layout 可以把自适应布局看作是静态布局的一个系列。其特点就是分别为不同屏幕分辨率定义布局即创建多个静态布局每个静态布局对应一个屏幕分辨率范围改变分辨率可以切换不同的静态布局页面元素位置发生改变元素不随窗口大小的调整而变化。 布局特点在于屏幕分辨率变化时元素位置发生变化尺寸不变。 响应式布局 即 Responsive Layout其目标是确保一个页面在所有终端各种尺寸的 PC、手机、电视等都能完美展现对于开发人员来说通常是结合了流式布局 弹性布局 媒介查询。分别为不同屏幕分辨率定义布局。 其特点在于每个屏幕分辨率下都会有一个布局样式元素位置、尺寸都会随之发生改变。使用多种布局方法配合如果足够耐心效果完美。但缺点在于媒介查询有限只能适应主流宽高需要匹配足够多的屏幕大小工作量巨大设计和开发都要需要多个版本。 91. 对比各种布局方式的特点。 参考答案 原理其实类似都是检测设备根据不同的设备采用不同的 CSS而且 CSS 都是采取百分比的方式。不同点在于 响应式的模板在不同设备上看上去不同会随着设备的改变而改变表现样式常用于解决不同设备间分辨率间的兼容。自适应则是所有设备看起来都是一个模板不过就是元素长度、图片尺寸变化。流式则是采用了一些设置当宽度大于多少时将怎样展示小于多少时将怎样展示并且展示方向像水流一样一部分一部分的加载。常用于解决分辨率差异较小的情况。静态即采用固定宽度。 92. 文字超出了元素的宽度如何使用 CSS 处理 参考答案 可以使用 word-wrap 配合 word-break 属性来进行处理。 示例代码如下 p{
word-wrap: break-word;word-break: break-all;overflow: hidden;
}93. 内外边距取值 1 个、2 个、3 个、4 个参数分别表示什么意思 参考答案 1个值 margin {10px;} 表示上右下左2个值 margin {10px 20px ;} 表示上下 左右3个值 margin {10px 20px 30px;} 表示上 左右 下3个值 margin {10px 20px 30px 40px ;} 表示上 右 下 左 94. 处理长宽不固定的元素居中方案 参考答案 使用 flex-boxele { position: absolute; top: 50%; left: 50%; transform:translate(-50%;-50%);} 95. 三角形如果不使用图片实现CSS 如何实现 参考答案 设置块级元素宽高为 0边框3条设置为透明色。具体可以参阅第 18 题答案 96. 你在工作中是如何使用伪类的列举一些常用的伪类以及用途。 参考答案 快速选择到父元素中某一个子级元素制作小图标 icon清除浮动使用 :not() 排除一些不想选择的元素使用 :nth-child(3n) 可以快速实现 “每N个实现XX效果” 97. 列举 flex 布局在你的实际项目里的使用它能很方便的帮你做一些什么事情 参考答案 flex 是根据主轴和交叉轴的方向来对元素进行排列在不固定宽高的情况下可以很方便的帮助我们进行布局、居中、控制对齐方式。 98. 如何将大量可变化的图片显示到页面并不影响浏览器性能 参考答案 使用图片懒加载。将页面中未出现在可视区域的图片先不做加载等滚动到可视区域后再加载。 99. 图片与图片之间默认存在的间距如何去除 参考答案 将图片全部脱离文档流将图片父元素设置文字大小为 0 100. 阅读代码计算元素在 W3C 盒模型中的宽度和在 IE 盒模型中的宽度。
div{width: 100px;padding: 10px;border: 1px solid;margin: 10px;
}参考答案 W3C 盒模型中的宽度: width padding border 122pxIE 盒模型中的宽度 100px 101. 两个相邻兄弟元素如代码所示此时两个元素之间的间隔是多少
div stylemargin-bottom: 20px;/div
div stylemargin-top: 10px;/div参考答案 20px由于两个元素见发生了外边距塌陷所以中间的间隔就是取其中较大的值。 102. 不使用 border 属性使用其他属性模拟边框。 参考答案 使用 outline 或 box-shadow 都可以模拟出边框。 103. 阅读代码计算 ul 的高度。 ul styleoverflow: hidden;li styleheight: 100px; float: left;/li/ul参考答案 ul 的高度为 100px虽然子级 li 浮动会造成父元素 ul 的高度塌陷但父元素触发了 BFC所以高度可以自动找回。 104. 有哪些方式可以将 p 文字设置为红色 参考答案 color: red; color: #f00; color: #FF0000; color: rgb(255, 0, 0); color: hsl(120, 100%, 50%); 105. 如何使用媒体查询实现视口宽度大于 320px 小于 640px 时 div 元素宽度变成 30% 参考答案 media screen and (min-width: 320px) and (max-width: 640px){
div{width: 30%;
}
}106. 什么是 HTML 实体 参考答案 即对当前文档的编码方式不能包含的字符提供一种转义表示。例如对于 “” 符号它是 HTML 元素的一部分如果要在文档中显示就需要进行转义为“gt;”。 107. 什么是全局属性列举两个全局属性。 参考答案 全局属性 Global Attribute 指全部元素都能使用的通用属性与之对应的是局部属性 Local Attribute 。class、contenteditable、onclick、data- 都是全局属性。 108. 什么是 hasLayout? 触发 hasLayout 会有什么后果 参考答案 hasLayout 是微软的一个私有概念类似于 BFC 能够运行在早期的 IE6、7 当中但在 IE8 已被抛弃。在早期 IE 浏览器中元素会被分为拥有布局hasLayout和没有布局拥有布局的元素就可以控制自己内容的尺寸和位置没有布局的元素需要由最近的拥有布局的祖先元素代劳。 IE6 中很多 bug 都是由于元素没有布局所引起的例如浮动元素会拥有双倍外边距。可以通过定义特定的属性来触发 lasLayout float 为 left 或 rightposition 为 absolutewidth height 不为 autozoom 不为 normal 109. 在定位属性 position 中哪个值会脱离文档流? 参考答案 absolute、fixed。 110. 假设视口的宽是 70px高为 50px执行下面代码后div 元素的宽度为多少 stylesection{margin: 6px;}div{width: 50vw;height: 50vh;}/stylesectiondiv/div/section参考答案 vw 和 vh 单位1vw 等于视口宽度的 1/1001vh 等于视口高度的 1/100即 1vw 0.7px1vh 0.5px0.7*50 35px0.5*50 25px 即 div 宽度为35px高度25px。 111. 伪元素 ::before 和 :before 有什么区别 参考答案 作用相同但 CSS3 规范中为了区分伪类和伪元素将 :before 改为了 ::before。 112. cale( ) 函数是什么有什么作用 参考答案 是 CSS 的一个函数只有一个数学表达式参数可处理数学运算并且在表达式中可混用不同的单位。例如 div{
width: cale(80% - 20px);
}113. :first-child 和 :first-of-type 有什么不同 参考答案 伪类 :first-child 表示父元素第一个子元素只要这个元素是在第一个位置就会被匹配。伪类 :first-of-type 表示父元素中第一个相同类型的子元素这个类型得是相同的元素名。 例如 div
span第一个 sapn 元素/span
p第一个 p 元素/p
p第二个 p 元素/p
/div/*匹配第一个 span*/
div :first-child{}
/*匹配第一个 p*/
div p:first-child{}114. 什么叫 web 安全色 参考答案 在过去显示器性能比较落后最多支持 256 种颜色其中 40 种被操作系统作为了保留色剩下 216 种就是安全色。安全色就指在各种平台下显示效果与预期一致如果不是安全色那么操作系统可能在处理颜色时产生抖动混合几种颜色模拟出系统没有的颜色这样就会造成颜色在不同平台中显示出色差。 115. 在 CSS 中background-color: transparent 和 opacity: 0 有什么区别 参考答案 transparent 关键字相当于 rgba(0,0,0,0,)作为 background 的属性值仅仅是将元素的背景色设置为透明而元素中的内容还可以被显示。opacity 则会将元素和内容当作一个整体全部透明。 116. 阅读代码分析 p 元素的字体大小。 stylesection{font-size: 32px;}sectiondiv{font-size: 50%;}/stylesectiondivplorem/p/div/section参考答案 16px因为 font-size 具有继承性。 117. font-face 有什么作用 参考答案 以前CSS 只能使用操作系统中安装的字体自从引入了 font-face 允许使用在线字体能将放置在服务器上的自定义字体嵌入到页面中这个字体也可以是矢量图标。 118. 绝对定位和浮动有什么异同 参考答案 都会脱离文档流改变元素盒子类型将元素变为块级都会创建 BFC不同点在于对包含块的定义、兄弟元素间的影响、可摆放的位置、能否设置 z-index 119. 字体风格 font-style 的关键字有两个italic 和 oblique 它们有什么区别 参考答案 italic 会对文字的结构有改动得到一种倾斜字体oblique 不会修改文字结构仅仅是倾斜字体如果不存在 italic 的变形字体 italic 的功能将会与 oblique 相同 120. 文本“强制换行”的属性是什么 参考答案 word-break: break-all; 121. 阅读代码分析最终执行结果 div 的水平、垂直位置距离。 div{width: 200px;height: 100px;padding: 10px;transform: translate(50%, 50%);}参考答案 水平位移 110px 垂直位移 60px。水平方向参照的是元素的宽度处置方向参照的是元素的高度。HTML 元素默认都以标准盒模型当元素存在内边距计算时还要包含内边距。即 220 的 50% 和 120 的 50%。 122. 设置了元素的过渡后需要有触发条件才能看到效果列举出可用的触发条件。 参考答案 :hover 、:checked 等伪类媒体查询当改变窗口尺寸触发js 触发用脚本更改元素样式 123. 怎样把背景图附着在内容上 参考答案 background-attachment: fixed; 124. CSS 优化、提高性能的方法有哪些 参考答案 最好使用表示语义的名字。一个好的类名应该是描述他是什么而不是像什么避免 !important可以选择其他选择器使用紧凑的语法避免不必要的命名空间尽可能的精简规则你可以合并不同类里的重复规则 125. 网页中应该使用奇数还是偶数的字体 参考答案 偶数。偶数字号相对更容易与 web 设计的其他部分构成比例关系 windows 自带的点阵宋体中易宋体从 Vista 开始只提供 12、14、16px 这3个大小的点阵而奇数时是用的是小一号的点。即每个字占的空间大了 1px 但点阵没有变于是略显稀疏。 126. margin 和 padding 分别适合什么场景使用 参考答案 使用 margin需要在 border 外侧添加空白、空白处不需要背景色、上下相连的两个盒子之间的空白需要相互抵消时。使用 padding: 需要在 border 内侧添加空白、空白处需要背景色 127. 对于 line-height 是如何理解的 参考答案 行高指一行文字的高度两行文字间基线与基线之间的距离。在 CSS 中起高度作用的是 height 和 line-height使用行高等于高的方式可以实现单行文字垂直居中将 display 设置为 inline-block 可以实现多行文本居中 128. 如何让 Chrome 支持小于 12px 的文字 参考答案 可以配合 CSS3 中的 transform 属性来实现例如 p{
font-size: 10px;
-webkit-transform: scale(0.8);
}129. 如果需要手动写动画你认为最小时间间隔是多久 参考答案 多数显示器默认频率是 60Hz即 1s 刷新 60 次理论上最小间隔为 1/60*1000ms 16.7s 130. 简述 png、jpg、gif 这些图片格式的适用场景有没有了解过 webp? 参考答案 png 是便携式网络图片一种无损数据压缩位图优点压缩比高色彩好。 大多数地方都可以用。jpg 是一种针对相片使用的一种有损的压缩格式在色调及颜色平滑变化做的不错。常被用来储存和传输照片的格式。gif 是一种位图文件格式以8位色重现真色彩的图像。可以实现动画效果。webp 格式是谷歌在2010年推出的图片格式压缩率只有 jpg 的2/3大小比 png 小了45%。缺点是压缩的时间更久了兼容性不好目前只有 Google 和 opera 支持。 131. style 标签写在 body 后面与 body 前面有什么区别 参考答案 页面加载自上而下当然是先加载样式。写在 body 标签后由于浏览器以逐行方式对 HTML 文档进行解析当解析到写在尾部的样式表外联或写在 style 标签会导致浏览器停止之前的渲染等待加载且解析样式表完成之后重新渲染在 windows 的 IE 下可能会出现 fouc 现象即样式失效导致的页面闪烁问题。 132. 阐述一下 CSS Sprites 参考答案 将一个页面涉及到的所有图片都包含到一张大图中去然后利用 CSS 的 background-image、background- repeat、background-position 的组合进行背景定位。利用 CSS Sprites 能很好地减少网页的 http 请求从而大大的提高页面的性能还能减少图片的字节。 133. 写出背景色渐变的 CSS 代码 参考答案 线性渐变 background: linear-gradient(direction,color-stop1,color-stop2,...);direction用角度值指定渐变的方向(或角度) color-stop1,color-stop2,…用于指定渐变的起止颜色 径向渐变 CSS 径向颜色渐变(Radial Gradients)跟线性渐变(linear gradients)不一样它不是沿着一个方向渐变而是以一个点为中心向四周辐射渐变。 语法 background-image: radial-gradient([position || angle][shape || size]stopstopstop)134. 写出添加下划线的 CSS 代码 参考答案 一般有两种方法 通过 CSS 下划线代码text-decoration:underline 来设置文字下划线。通过设置 div 的 border 实现效果 135. 写出让对象顺时针旋转 90 度的 CSS 代码最好附带动画效果 参考答案 顺时针旋转可以使用 CSS3 新增的 transform 属性属性值对应 rotate(90deg)如果要附带动画效果那么可以添加 transition 过渡。下面是一段示例代码 div/divdiv{
width: 100px;
height: 100px;
background-color: red;
transition: all 1s;
}
div:hover{
transform: rotate(90deg);
}136. CSS 优先级顺序正确的是
A. !important class id tag
B. !important tag class id
C. !important id class tag
D. Class !important id tag 参考答案 选 C 解析 关于 CSS 选择器的优先级具体可以参阅下图 137. 如何产生带有正方形项目的列表
A. type:square
B. type:2
C. list-style-type:square
D. list-type:square 参考答案 C 解析 CSS list-style-type 属性可以设置不同的列表样式 具体属性值可以参阅https://www.w3school.com.cn/cssref/pr_list-style-type.asp 138. 手写一个三栏布局要求垂直三栏布局所有两栏宽度固定中间自适应 参考答案 这是一道经典的面试题实现的方式很多这里列举两种。 方法一flexbox 的解决方案 body!-- flexbox解决方案 --section classlayout flexboxarticle classleft-center-rightdiv classleft/divdiv classcenterh1flexbox的解决方案/h1p1.这是布局的中间部分/pp2.这是布局的中间部分/p/divdiv classright/div/article/section
/bodystyle
.layout.flexbox {
margin-top: 140px;
}.layout.flexbox .left-center-right {
display: flex;
}.layout.flexbox .left {
width: 300px;
background: red;
}.layout.flexbox .center {
flex: 1;
background: yellow;
}.layout.flexbox .right {
width: 300px;
background: blue;
}
/style方法二网格布局解决方案 body!-- 网格布局的解决方案 --section classlayout gridarticle classleft-center-rightdiv classleft/divdiv classcenterh1网格布局的解决方案/h1p1.这是布局的中间部分/pp2.这是布局的中间部分/p/divdiv classright/div/article/section
/bodystyle
.layout.grid .left-center-right {
display: grid;
width: 100%;
grid-template-rows: 100px;
grid-template-columns: 300px auto 300px;
}.layout.grid .left {
background: red;
}.layout.grid .center {
background: yellow;
}.layout.grid .right {
background: blue;
}
/style
