前端面试题之CSS

css hack是什么

参考资料

你想知道的css hack知识全都帮你整理好了


两种盒模型

参考答案

盒模型分为W3C的标准模型IE模型

盒模型又称为框模型,包含了元素内容(content)、内边距(padding)、外边距(margin)、边框(border)

如图:

W3C 的标准模型:width/height 属性指 content

IE 模型:width/height 属性由 content + padding + border 组成

这两种模型的区别就是计算的宽度和高度不同。

通过 CSS3 新增的属性 box-sizing:content-box | border-box 分别设置盒模型为标准模型(content-box)和 IE 模型(border-box)

W3C 的标准模型:

<div class="content-box"></div>
.content-box {
  box-sizing: content-box;
  width: 100px;
  height: 100px;
  padding: 20px;
  border: 5px solid red;
  margin: 10px;
}

其中:width = 100px


IE 模型:

<div class="border-box"></div>
.border-box {
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  padding: 20px;
  border: 5px solid red;
  margin: 10px;
}

其中:width = content + 2padding + 2border = 100px

相对比较而言:border-box 更好用!!!


扩展

JS 如何设置获取盒模型对应的宽和高呢?

dom.style.width / height;   // 设置获取的是内联样式
dom.currentStyle.width / height;   // IE支持
window.getComputedStyle(dom).width / height;   // 兼容性好
dom.getBoundingClientRect().width / height;   // 计算一个元素的绝对位置

参考资料

MDN - CSS 基础框盒模型


为什么要初始化CSS样式

参考答案

因为浏览器的兼容问题,不同浏览器的部分标签默认值都是不同的,如果没有对 CSS 样式初始化会出现各个浏览器之间的页面显示差异。

对 CSS 样式初始化后会对 SEO 有一定的影响,所以力求影响最小的情况下进行初始化。

最简单也最不建议初始化的方式:

* {
  margin: 0;
  padding: 0;
}

可以使用 normalize.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;}

块级元素与行内元素分别有哪些以及各有什么特点

参考答案

行内元素:
一个行内元素只占据它对应标签的边框所包含的空间,行内元素前后不会产生换行,一系列的行内元素都在一行显示,直到该行排满为止再另起一行。

行内元素有:a、img、span、button、input、textarea、label、em、kbd、br、b、i、tt 等等。

特点:

  1. 和其他元素都在同一行上;
  2. 宽度(width)、高度(height)、内边距的 top / bottom(padding-top / padding-bottom) 和外边距的 top / bottom(margin-top / margin-bottom) 都不可改变,但是 padding、margin 的 left 和 right 是可以设置的,line-height 也是有效的;
  3. 宽度就是它的文字或图片的宽度,是不可改变的;
  4. 行内元素只能容纳文本或者其他行内元素,不能容纳块级元素;
  5. 行内元素会在一条直线上排列,都是同一行的,水平方向排列。

块级元素:
块级元素占据其父元素(容器)的整个空间,因此创建了一个“块”。通常浏览器会在块级元素前后另起一个新行。

块级元素有:div、p、h1~h6、hr、ul、ol、li、dd、dl、table 等等。

特点:

  1. 独占一行,每一个块级元素都会从新的一行重新开始;
  2. 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可设置;
  3. 如果宽度没有设置,则默认宽度为容器的 100%;
  4. 块级元素可以容纳行内元素和其他块级元素;
  5. 块级元素各占据一行,垂直方向排列。

position有哪些常用的值

参考答案

static

static 是 position 属性的默认值,如果省略了 position 属性,浏览器就认为该元素为 static 定位。

浏览器会按照源码的顺序,决定每个元素的位置,这称为"正常的页面流"(normal flow)。每个块级元素占据自己的区块(block),元素与元素之间不产生重叠,这个位置就是元素的默认位置。

static 定位所导致的元素位置,是浏览器自主决定的,所以这时 top、bottom、left、right 这四个属性无效,并且 z-index 设置也无效。

relative

relative 表示相对定位,是默认参照父级的原始点为原始点来定位的,若无父元素则按照上一个元素的底部为原始点进行定位。

  1. 相对定位不会影响元素本身的特性;
  2. 不会使元素脱落文档流;
  3. 没有定位偏移量时对元素无影响;
  4. top、bottom、left、right、z-index 属性有效。

absolute

absolute 表示绝对定位,相对于 static 定位以外的第一个父元素进行定位。

  1. 使元素完全脱离文档流;
  2. 可以改变行内元素的特性,即可以设置宽高;
  3. 在未设置宽度时,宽度由内容撑开宽度;
  4. 相对于最近的一个有定位的父元素偏移,若父元素没有定位则逐层向上找直至 body 为止;
  5. top、bottom、left、right、z-index 属性有效。

fixed

fixed 表示绝对定位,相对于浏览器窗口进行定位。即定位基点是浏览器窗口。这会导致元素的位置不随页面滚动而变化,就好像固定在网页上一样。

搭配 top、bottom、left、right 这四个属性一起使用,表示元素的初始位置是基于视口计算的,否则初始位置就是元素的默认位置。


CSS中伪类与伪元素的区别

参考资料

AlloyTeam - 总结伪类与伪元素


如何垂直居中

参考资料

CSS实现垂直居中的几种方法


如何水平居中

参考资料

CSS实现水平居中的几种方法


flex怎么用,常用属性有哪些

参考资料

Flex布局

腾讯云加社区 - 30分钟彻底弄懂flex布局


grid布局怎么用

参考资料

阮一峰 - CSS Grid网格布局教程


display:none; 、visibility:hidden; 、opacity:0; 有什么区别

参考答案

display:none;

  1. 隐藏对应的元素,浏览器不会渲染,在文档布局中不占据空间;
  2. 无法进行 DOM 事件监听;
  3. 会引起重排,性能较差;
  4. 不会被子元素继承。

visibility:hideen;

  1. 隐藏对应的元素,浏览器会渲染,在文档布局中占据原来的空间;
  2. 无法进行 DOM 事件监听;
  3. 只会引起重绘,性能较高;
  4. 会被子元素继承,子元素可以设置 visibility: visible; 来进行显示。

opacity:0;

  1. 将透明度为 100%,元素被隐藏了,在文档布局中占据原来的空间;
  2. 可以进行 DOM 事件监听;
  3. 提升为合成层,不会触发重绘,性能较高;
  4. 会被子元素继承,但是子元素设置 opacity: 1; 无效。

使用 display:none; 属性后,HTML 元素(对象)的宽度、高度等各种属性值都将丢失;使用 visibility:hideen; 属性后,HTML 元素(对象)仅仅是在视觉上看不见(完全透明),而它所占据的空间位置仍然存在;而使用 opacity:0; 属性后,也仅仅是将透明度设置成了 100%,以致于在视觉上完全看不见。

示例代码


BFC是什么,举例回答

参考资料

理解CSS中的BFC

[译]:BFC与IFC


CSS选择器的优先级

参考答案
  1. 越具体优先级越高;
  2. 写在后面的覆盖前面的;
  3. !important,最高,但是要少用!
  4. !important > 行内样式 > id > class > tag

参考资料

MDN - 优先级

有趣:256个class选择器可以干掉1个id选择器


CSS哪些属性可以继承

参考答案

继承就是指子节点默认使用父节点的样式属性。

可继承的属性大概有颜色、文字、字体间距、行高、对齐方式、列表的样式。

  1. 所有元素可继承:元素可见性(visibility)、光标属性(cursor);
  2. 内联元素可继承:letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction;
  3. 块状元素可继承:text-indent、text-align;
  4. 列表元素可继承:list-style、list-style-type、list-style-position、list-style-image。

如何清除浮动

参考答案

方法一

为 float 后的元素添加 clear 属性。

<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>
.a,
.b {
  width: 100px;
  height: 100px;
  border: 5px solid red;
}
.b {
  float: right;
}
.a {
  float: left;
}
.c {
  border: 5px solid blue;
  height: 100px;
  clear: both;
}

添加clear属性

示例代码 - 方法一


方法二

给父容器添加 clearfix 的 class,用伪元素 clearfix::after 设置样式,清除浮动。

<div class="parent clearfix">
    <div class="a">a</div>
    <div class="b">b</div>
</div>
.parent {
  border: 5px solid red;
}
.a,
.b {
  width: 100px;
  height: 100px;
  border: 5px solid blue;
}
.a {
  float: left;
}
.b {
  float: right;
}
.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

使用伪元素

示例代码 - 方法二


方法三

给父容器添加 overflow:hidden 或者 auto。

<div class="parent">
    <div class="a">a</div>
    <div class="b">b</div>
</div>
.parent {
  border: 5px solid red;
  overflow: auto;
}
.a,
.b {
  width: 100px;
  height: 100px;
  border: 5px solid blue;
}
.a {
  float: left;
}
.b {
  float: right;
}

添加overflow

示例代码 - 方法三


em与rem

参考资料

动态REM


CSS3有哪些新特性

参考答案
  1. 新增各种 css 选择器,例如::root:last-child:first-of-type:last-of-type等等;
  2. 三个动画相关特性:过渡(transition)、2D或3D转换(transform)、动画(animation);
  3. 三个边框属性:圆角边框(border-radius)、添加阴影(box-shadow)、使用图片来绘制边框(border-image);
  4. 背景属性:确定背景画区(background-clip)、确定背景的位置(background-origin)、调整背景图片的大小(background-size);
  5. 文字效果:强制换行(word-wrap)、当文本溢出包含它的元素该如何显示(text-overflow)、文本阴影(text-shadow)、规定添加到文本的修饰(text-decoration);
  6. 渐变:线性渐变(linear-gradient)、径向渐变(radial-gradient);
  7. 多列布局;
  8. 媒体查询:@media;
  9. 字体:@font-face。

去除inline-block元素间间隙的方法

参考资料

去除inline-block元素间间隙的几种方法


如何适配各种移动设备

参考资料

白树 - 移动web资源整理

流云诸葛 - 从网易与淘宝的font-size思考前端设计稿与工作流


如何添加代码使得图片宽度为300px

参考答案
<img src="#.png" style="width:500px!important;">

使用 CSS 有如下三种方法:

// 1. 最简单的就是直接在后面添加宽度并设置 !important 来覆盖掉
<img src="#.png" style="width:500px!important; width:300px!important;">

// 2. 设置最大宽度
<img src="#.png" style="width:500px!important; max-width:300px;">

// 3. 使用 transform 来缩小
<img src="#.png" style="width:500px!important; transform:scale(0.6,0.6);">

使用 JS 的方法:

// 使用 setAttribute 来属性
let img = document.querySelector("img")
img.setAttribute("style", "width:300px;")

示例代码


用纯CSS创建一个三角形

参考答案
.triangle {
  width: 0;
  height: 0;
  border-width: 40px;
  border-style: solid;
  border-color: transparent transparent red transparent;
}

点击预览😀


width:auto;和width:100%;的区别是什么

参考答案

首先它们都是由父级元素所决定的,其次有以下区别:

  1. width:100%;:会使元素的宽度等于父元素的宽度,子元素增加 padding,会使得元素超过父元素的边界;
  2. width:auto;:会使元素撑满整个父元素,margin、border、padding、content 区域会自动分配水平空间;

参考代码


什么是优雅降级和渐进增强

参考答案

优雅降级:一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。

渐进增强:针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

// 渐进增强写法
.transition {
  -webkit-transition: all .5s;
     -moz-transition: all .5s;
       -o-transition: all .5s;
          transition: all .5s;
}

// 优雅降级写法
.transition {
          transition: all .5s;
       -o-transition: all .5s;
     -moz-transition: all .5s;
  -webkit-transition: all .5s;
}

参考资料

谈谈优雅降级与渐进增强的区别

你知道渐进增强和优雅降级吗?[css3兼容性写法]


line-height是如何继承的

参考答案

分如下三种情况:

  1. 具体的数值(例如:10px):继承该值,如果父元素 line-height: 30px;,则子元素 line-height: 30px;
  2. 比例(例如:1.5):继承该比例,如果父元素 line-height: 2;,且子元素的 font-size: 15px;,那么子元素的 line-height: 30px;
  3. 百分比(例如:200%):继承计算出来的值,如果父元素 font-size: 30px; line-height: 200%;,那么子元素 line-height: 60px;

怎么画一条0.5px的线

参考资料

怎么画一条0.5px的边(更新)

[css] 第105天 怎么实现移动端的边框0.5px?


文本省略有哪些方案

参考资料

可能是最全的 “文本溢出截断省略” 方案合集


更多面试题请移步至 我的新博客 - 持续更新地址


posted @ 2020-08-24 13:11  LqZww  阅读(388)  评论(0编辑  收藏  举报