前端面试题系列之-CSS及页面布局篇

2020-08-10 本文已影响0人 wowoqu

IE盒模型和标准盒模型的区别

标准盒模型
标准盒模型下，盒子的宽高由content+padding+border+margin组成，缺点：盒子的宽高计算复杂
IE盒模型
IE盒模型下，盒子的宽高由content+margin组成，其中content相当于标准盒模型的content+padding+border。优点：确定宽高后可随意修改padding和border，而不影响盒子整体的宽高。
模型切换

目前使用此属性需要加前缀，-moz-、-webkit-、-o-、-ms-等
box-sizing:content-box;
box-sizing:border-box;

如何让一个div水平垂直居中

.container {
    background: silver;
    width: 100%;
    height: 200px;
}
.position {
    position: relative;
}
.flex {
    display: flex;
}
.tableCell {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.child {
    width: 100px;
    height: 100px;
    background: pink;
}

1. div绝对定位水平垂直居中【margin:auto实现绝对定位元素的居中】

.f1 {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

<p>方案一：绝对定位 + margin：auto</p>
<div class="container position">
    before
    <div class="child f1"></div>
    after
</div>

2. div绝对定位水平垂直居中【margin 负间距】

.f2 {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -50px;
    margin-top: -50px;
}

<p>方案二：绝对定位 + margin负一半，<i class="red">需要子元素宽高</i></p>
<div class="container position">
    before
    <div class="child f2"></div>
    after
</div>

3. div绝对定位水平垂直居中【Transforms 变形】

.f3 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

<p>方案三：绝对定位 + translate负50%</p>
<div class="container position">
    before
    <div class="child f3"></div>
    after
</div>

4. 弹性盒子水平垂直居中

.f4 {
    justify-content: center;
    align-items: center;
}

<p>方案四：弹性盒子，父元素设置水平垂直居中，<i class="aqua">受其他元素影响</i></p>
<div class="container flex f4">
    before
    <div class="child"></div>
    after
</div>

5. 将父盒子设置为table-cell元素，可以使用text-align:center和vertical-align:middle实现水平、垂直居中。

.f5 {
    display: inline-block;
}

<p>方案五：tabel-cell，<i class="aqua">受其他元素影响</i></p>
<div class="container tableCell">
    before
    <div class="child f5"></div>
    after
</div>

6. div绝对定位，利用calc计算位置

.f6 {
    position: absolute;
    left: calc((100vw - 100px)/2);
    top: calc((200px - 100px)/2);
}

<p>方案六：绝对定位 + calc计算，<i class="red">需要父元素及子元素宽高</i></p>
<div class="container position">
    before
    <div class="child f6"></div>
    after
</div>

7. 弹性盒子【margin:auto实现水平垂直居中】

.f7 {
    margin: auto;
}

<p>方案七：flex + margin</p>
<div class="container flex">
    before
    <div class="child f7"></div>
    after
</div>

什么是弹性盒子，有哪些属性，通常怎么用

什么是弹性盒子

CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。可以用简单的方式满足很多常见的复杂的布局需求。它的优势在于开发人员只是声明布局应该具有的行为，而不需要给出具体的实现方式。浏览器会负责完成实际的布局。该布局模型在主流浏览器中都得到了支持。

.box{
  display:flex;
}
/* 行内元素也可以设置为flex */
.box{
    display:inline-flex;
}
/* 注意设为flex布局后，子元素的float,clear,vertical-align属性将失效。*/

采用flex布局的元素，成为flex容器。它的所有子元素自动成为容器成员，称为flex项目。常用的，设置到容器上的属性有：

/* 1.flex-direction:属性决定主轴的方向（即项目的排列方向）。 */
.box {
flex-direction: row | row-reverse | column | column-reverse
}
/* 2. flex-wrap:默认情况下，项目都排在一条线上。这个属性定义，如果一条轴线拍不下，如何换行。 */
.box{
flex-wrap: nowrap | wrap | wrap-reverse
}
/* 3. justify-content:属性定义了项目在主轴上的对齐方式。 */
.box{
justify-content: flex-start | flex-end | center | space-between | space-around
}
/* 4.align-items:属性定义项目在交叉轴上如何对齐 */
.box{
align-items: flex-start | flex-end | center | baseline | stretch
}
/* baseline 项目的第一行文字的基线对齐 */
/* stretch(默认值)  如果项目未设置高度或设为auto,将占满整个容器的高度。 */

/* 5. align-content：属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。 */
.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
/* 6. flex-flow  是flex-direction和 flex-wrap的简写，默认是 row nowrap */

设置到项目上的属性：

/* 1.order 属性定义项目的排列顺序。数值越小，排列越靠前。默认为0 */
.item {
  order: 1;
}
/* 2.flex-grow属性定义项目的放大比例，默认为0.即如果有剩余空间，也不放大。 */
.item {
  flex-grow: <number>; /* default 0 */
}
/* 3.flex-shrink 属性定义了项目的缩小比例。默认为1，如果空间不足，项目将缩小。 */
.item {
  flex-shrink: <number>; /* default 1 */
}
/* 如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。 */
/* 负值对该属性无效。 */

/* 4. flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间。默认为auto.即项目本来的大小。它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。 */
.item {
  flex-basis: <length> | auto; /* default auto */
}
/* 5. flex 属性是flex-grow,flex-shrink,flex-basis,默认值为0 1 auto */
/* 该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。 */
/* 建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。 */

/* 6.align-self 属性 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性，默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。 */
.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

什么是BFC，通常用来干什么

什么是BFC

(Block Formatting Context)块级格式化上下文。BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此.并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。

怎么创建BFC

float的值不是none；
position的值不是static或者relative；
display的值是inline-block、table-cell、flex、table-caption或者inline-flex;
overflow的值不是visible

上述方法都可以创建BFC，但是会带来一些负面影响：

display：table 可能会引发响应性问题；
overflow：scroll 可能产生多余的滚动条；
float：left 将把元素移至左侧，并被其他元素环绕；
overflow：hidden 将裁切溢出元素

创建BFC的作用

解决浮动引起的父元素塌陷问题

.container {
    border: 1px solid red;
    background: #ccc;
    overflow: hidden;  /* 解决父元素塌陷问题 */
}
.left {
    width: 100px;
    height: 200px;
    background: pink;
    float: left;
}
.right {
    float: left;
     /* overflow: hidden; */  /* 解决浮动布局问题 */
    width: 200px;
    height: 400px;
    background: orange;
}

<div class="container">
    <div class="left">left</div>
    <div class="right">right</div>
</div>

浮动带来的布局问题（上例）
解决上下margin边距重叠的问题


.top {
    width: 100px;
    height: 200px;
    background: pink;
    margin: 10px 0;
    overflow: hidden;
}
.bottom {
    width: 200px;
    height: 200px;
    background: orange;
    margin: 10px 0;
    overflow: hidden;
}
.bfc {
    overflow: hidden;
}

<div>
    <!-- 添加bfc -->
    <div class="bfc">
        <div class="top">top</div>
    </div>
    <div class="bottom">bottom</div>
</div>

::before和:before的区别，这个属性是用来干什么的

::before是css3的写法，:before是css2的写法，用来设置对象前的内容
:before的兼容性要比::before好

清除浮动的方法有哪些

额外标签法
BFC设置overflow
使用after伪元素清除浮动
使用before和after双伪元素清除浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试清除浮动</title>
    <style type="text/css">
        .container {
            border: 1px solid red;
            background: #ccc;
        }
        .left {
            width: 100px;
            height: 100px;
            background: pink;
            float: left;
        }
        .right {
            width: 100px;
            height: 100px;
            background: orange;
            float: right;
        }
        .clear {
            clear: both;
        }
        .f2 {
            overflow: hidden;
        }
        .f3 {
            *zoom: 1;
        }
        .f3:after {
            content: "";
            display: block;
            clear: both;
            height: 0; /* 可以不设置 */
            visibility: hidden; /* 可以不设置 */
        }
        .f4 {
           *zoom: 1; /* ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行 */
        }
        .f4:after,.f4:before {
            content: "";
            display: table; /* 可以换成block */
        }
        .f4:after {
            clear:both;
        }
    </style>
</head>
<body>
    <div>
        <h1>额外标记法</h1>
        <div class="container f1">
            <div class="left">left</div>
            <div class="right">right</div>
            <div class="clear"></div>
        </div>
        <h1>BFC设置overflow</h1>
        <div class="container f2">
            <div class="left">left</div>
            <div class="right">right</div>
        </div>
        <h1>使用after伪元素</h1>
        <div class="container f3">
            <div class="left">left</div>
            <div class="right">right</div>
        </div>
        <h1>使用before和after双伪元素</h1>
        <div class="container f4">
            <div class="left">left</div>
            <div class="right">right</div>
        </div>
    </div>
</body>
</html>

css选择器的优先级

!important 优先级最高权值无穷大
style 写在元素行的内联样式其次权值1000
id 权值 100
class/伪类/属性权值10
标签选择器权值1
通配符权值0

更准确的说法

越具体，优先级越高
写在后面的，会覆盖写在前面的
important优先级最高，但是要少用

CSS:opacity:0,visibility:hidden,display:none的区别

opacity 不改变页面布局，元素占位，可点击
visibility 不改变页面布局，元素占位，不可点击
display 改变页面布局，元素不占为，不可点击

transition 和 animation 的区别

1、transition 是过渡，是样式值的变化的过程，只有开始和结束；animation 其实也叫关键帧，通过和 keyframe 结合可以设置中间帧的一个状态；　　　　
2、animation 配合 @keyframe 可以不触发时间就触发这个过程，而 transition 需要通过 hover 或者 js 事件来配合触发；　　　　
3、animation 可以设置很多的属性，比如循环次数，动画结束的状态等等，transition 只能触发一次；　　　　
4、animation 可以结合 keyframe 设置每一帧，但是 transition 只有两帧；

如何使用css3开启GPU硬件加速

常规方法

.example{
   -webkit-transform: translate3d(250px,250px,250px)
   rotate3d(250px,250px,250px,-120deg)
   scale3d(0.5, 0.5, 0.5);
}

不需要使用transform属性时

.example {
   -webkit-transform: translateZ(0);
   -moz-transform: translateZ(0);
   -ms-transform: translateZ(0);
   -o-transform: translateZ(0);
   transform: translateZ(0);
   /* Other transform properties here */
}

webkit内核

.example {
   -webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
  /* Other transform properties here */
}

如何设置文字超出隐藏及文字换行

自动换行

div{
   word-wrap:break-word; /*允许长单词换行到下一行*/
   word-break:normal; /*在恰当的断字点进行换行*/
}

强制不换行

div{
   white-space:nowrap; /*溢出不换行*/
}

强制英文单词换行

div{
   word-break:break-all; /*允许在单词内换行*/
}

单行文本不换行多余文本显示省略号

div{
   width:200px;
   white-space:nowrap; /*溢出不换行*/
   overflow:hidden; /*元素超出隐藏*/
   text-overflow:ellipsis; /*显示省略符号来代表被修剪的文本*/
}

多行文本超出隐藏多余文本显示省略号

/* -webkit-box 只适用webkit内核的浏览器 */
div{
   display:-webkit-box;
   overflow:hidden;
   text-overflow:ellipsis;
   -webkit-line-clamp:3;
   -webkit-box-orient:vertical;
}

table表格中单元格单行文本不换行

table{
   table-layout:fixed;
}
table tr td{
   width:60%;
   white-space:nowrap;
   overflow:hidden;
   text-overflow:ellipsis;
}

参考链接：
CSS实现不换行/自动换行/文本超出隐藏显示省略号

如何设置元素不可选取文字

body{
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

object-fit属性

object-fit CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。这个CSS属性可以达到最佳最完美的居中自动剪裁图片的功能

fill: 中文释义“填充”。默认值。替换内容拉伸填满整个content box, 不保证保持原有的比例。
contain: 中文释义“包含”。保持原有尺寸比例。保证替换内容尺寸一定可以在容器里面放得下。因此，此参数可能会在容器内留下空白。
cover: 中文释义“覆盖”。保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸，宽度和高度至少有一个和容器一致。因此，此参数可能会让替换内容（如图片）部分区域不可见。
none: 中文释义“无”。保持原有尺寸比例。同时保持替换内容原始尺寸大小。
scale-down: 中文释义“降低”。就好像依次设置了none或contain, 最终呈现的是尺寸比较小的那个。

页面导入时，使用 link 和 @import 有什么区别？

link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;
页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;

@import规则一定要先于除了@charset的其他任何CSS规则。

不推荐使用@import:

@import混合js文件时，在IE中引发资源文件的下载顺序被打乱，即使排列在@import后面的js文件先于@import下载，并且打乱甚至破坏@import自身的并行下载
link混合@import会破坏并行下载，这是一个很严重的问题，这会导致原本并行下载的样式变成一个一个的同步下载
而仅仅使用LINK 可确保样式在所有浏览器里面都能被并行下载，并且按照顺序被下载

简述 src 和 href 的区别？

src 用于替换当前元素，是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素
href 时指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。

写页面元素样式初始化库的意义

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

伪类选择器有哪些，伪元素和伪类的区别？

伪元素选择器：

:first-letter/::first-letter
:first-line/::first-line
:before/::before
:after/::after
::placeholder
::selection

伪类选择器

:link
:visited
:hover
:active
:focus
:lang(fr)
:not(s)
:root
:first-child
:last-child
:only-child
:nth-child(n)
:nth-last-child(n)
:first-of-type
:last-of-type
:only-of-type
:nth-of-type(n)
:nth-last-of-type(n)
:empty
:checked
:enabled
:disabled
:target
@page:left
@page:first
@page:right

区别

伪类的效果可以通过添加实际的类来实现
伪元素的效果可以通过添加实际的元素来实现
所以它们的本质区别就是是否抽象创造了新元素

伪元素和伪类的区别总结

什么是 CSS 继承？哪些属性能继承，哪些不能？

css继承指的是被包在内部的标签将拥有外部标签的样式性，即子元素可以继承父元素的属性。

相关链接：
CSS 继承，哪些属性能继承，哪些不能

z-index 有什么作用？如何使用？

z-index可以改变元素层叠顺序，z-index较大的会叠加在z-index较小的元素上方。z-index值相同时，则按照文档流顺序，后面的覆盖前边的。

px，em，rem，vw 有什么区别？

px

px就是pixel的缩写，意为像素。px就是一张图片最小的一个点，一张位图就是千千万万的这样的点构成的，比如常常听到的电脑像素是1024x768的，表示的是水平方向是1024个像素点，垂直方向是768个像素点。注意css中的1px并不一定是物理像素的一个像素块，需要根据DPR计算，对应多少物理像素块

dpr

设备像素比：dpr = 物理像素 / 逻辑像素(px)，例如，iPhone6的dpr为2，物理像素750（x轴）,则它的逻辑像素为375

em

参考物是父元素的font-size，具有继承的特点。如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。

rem

css3新单位，相对于根元素html（网页）的font-size，不会像em那样，依赖于父元素的字体大小，而造成混乱。

vw

css3新单位，viewpoint width的缩写，视窗宽度，1vw等于视窗宽度的1%。举个例子：浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。

屏幕尺寸，分辨率，像素，PPI之间到底什么关系？1px和1cm的关系？

1英寸（inch）=2.54厘米（cm）

屏幕尺寸

手机对角线的长度换算成英寸

分辨率

屏幕横向和纵向的像素点

像素

1px即代表一个物理像素点/像素块

PPI

PPI，是每英寸可以显示的像素点的英文缩写。如果说上面分辨率是一个质量总量的概念，那么，ppi就是密度的概念。我们可以通过屏幕的像素总量除以屏幕大小来计算屏幕的PPI，公式如下：a：横向像素数量，b：纵向像素数量，c：屏幕尺寸（英寸）

PPI= \frac{\mathrm{\sqrt{a^{2} + b^{2}}} }{\mathrm{c}}

1px与多少厘米之间是不能直接划等号的，需要看分辨率。

一般电脑的像素分辨率是72ppi，计算公式：(((1**2 + 1**2)**0.5)/72)*2.54，此时1px=0.0498cm，1cm=25px；
很多手机是300ppi，计算公式：(((1**2 + 1**2)**0.5)/300)*2.54，此时1px=0.0119cm。

画一条0.5px的直线？

.hr {
    width: 300px;
    background: #000;
    margin: 20px 0;
}
.base {
    height: 1px;
}
.f1 {
    height: 0.5px;
}

<p>设置值为0.5px</p>
<div class="hr f1"></div>
<p>基准值</p>
<div class="hr base"></div>

1. 直接设置0.5px

.hr {
    width: 300px;
    background: #000;
    margin: 20px 0;
}
.base {
    height: 1px;
}
.f1 {
    height: 0.5px;
}

<!-- 缺点是浏览器兼容性差，各浏览器效果不一致 -->
<p>设置值为0.5px</p>
<div class="hr f1"></div>
<p>基准值</p>
<div class="hr base"></div>

2. 使用scale缩放

.f2 {
    height: 1px;
    transform: scaleY(0.5);
}
.f2.plus {
    transform-origin: 50% 100%;
}

<p>设置缩放</p>
<div class="hr f2"></div>
<!-- scale缩放会使线条变虚，plus的则不会 -->
<p>设置缩放 + 基准定位点</p>
<div class="hr f2 plus"></div>

3. 线性渐变linear-gradient

.f3 {
    height: 1px;
    background: linear-gradient(0deg, #fff, #000);
}

<p>线性渐变</p>
<div class="hr f3"></div>

4. boxshadow

.f4 {
    height: 1px;
    background: none;
    box-shadow: 0 0.5px 0 #000;
}

<p>boxshadow</p>
<div class="hr f4"></div>

5. viewport

<!-- UI需要按2倍图的出，整体面面的单位都会放大一倍 -->
<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5">

参考链接：
画一条0.5px的线

inline-block 有什么特性？在实际工作中有什么作用？

block

总是在新行上开始
高度，行高以及顶和底边距都可控制
宽度缺省是它的容器的100%，除非设定一个宽度
可以设置height, width, margin, padding

inline

和其他元素都在一行上
高，行高及顶和底边距不可改变
宽度就是它的文字或图片的宽度，不可改变
可以设置padding

inline-block

和其他元素都在一行上
高度，行高以及顶和底边距都可控制
宽度就是它的文字或图片的宽度，可改变
可以设置height, width, margin, padding

line-height: 2; 和 line-height: 200%; 有什么区别?

line-height: 2 表示单行文本的行高为它本身的两倍
line-height: 200% 表示单行文本的行高为系统默认字体的200%

在继承性上：

对父元素设置了line-height: 2后，父元素的子元素会继承line-height: 2这个属性，子元素的行高都是自身高度的2倍，是相对大小，子元素的字体大小不同，行高也会不同；
对父元素设置了line-height: 200%后，父元素的子元素会继承系统默认字体的200%，是一个固定的值，是固定大小，子元素的字体大小不同，行高都是固定某个值；

<div>
    <div style="font-size: 20px;line-height: 2;">line:2 本身字体20px 实际行高应为 40px</div>
    <!-- line-height: 200% 如果不设置字体默认为页面默认字体的200%，如果设置字体则为设置字体的200% -->
    <div style="font-size: 14px;line-height: 200%;">line:200% 本身字体20px 实际行高应为28px</div>
    <div style="font-size: 16px;line-height: 20px;">line:20px 本身字体16px 实际行高应为20px</div>
</div>
<div>
    <div style="line-height: 2;background: pink;">
        <div style="font-size: 16px;">font-size:16</div> <!-- 32px -->
        <div style="font-size: 18px;">font-size:18</div><!-- 36px -->
        <div style="font-size: 20px;">font-size:20</div><!-- 40px -->
    </div>
    <div style="line-height: 200%;background: orange;">
        <div style="font-size: 16px;">font-size:16</div><!-- 32px -->
        <div style="font-size: 18px;">font-size:18</div><!-- 32px -->
        <div style="font-size: 20px;">font-size:20</div><!-- 32px -->
    </div>
</div>

calc, support, media各自的含义及用法？

@support：用于检测浏览器是否支持css某个属性，即条件判断，如果支持某个属性，可以写一套样式，如果不支持某属性，提供另一套样式作为替补。
calc（）：用于计算动态函数值，支持"+"，"-"，"*"，"/"运算
@media：针对不同的媒体类型定义不同的样式

渐进增强和优雅降级

渐进增强

一开始针对低版本的浏览器构建页面，满足最基本的功能，再针对高级浏览器进行效果，交互，追加各种功能以达到更好用户体验,换句话说，就是以最低要求，实现最基础功能为基本，向上兼容。以css为例，以下这种写法就是渐进增强。

.box {-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;}

优雅降级

一开始针对一个高版本的浏览器构建页面，先完善所有的功能。然后针对各个不同的浏览器进行测试，修复，保证低级浏览器也有基本功能就好，低级浏览器被认为“简陋却无妨 (poor, but passable)” 可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。也就是以高要求，高版本为基准，向下兼容。同样以css为例，优雅降级的写法如下。

.box {border-radius: 10px;-moz-border-radius: 10px;-webkit-border-radius: 10px;}

区别

渐进增强，开发时间长，成本高，优雅降级，节约成本，开发周期短。