前端面试——css篇

时间 2019-11-12

标签前端面试 css 栏目快乐工作繁體版

原文原文链接

css盒子模型

在W3C模型中: 总宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-rightcss
在IE模型中: 总宽度 = margin-left + width + margin-righthtml

在CSS3中引入了box-sizing属性, 它能够容许改变默认的CSS盒模型对元素宽高的计算方式.git

共包括两个选项：github

content-box：标准盒模型，CSS定义的宽高只包含content的宽高web
border-box：IE盒模型，CSS定义的宽高包括了content，padding和bordersegmentfault

定位机制

css有三种基本定位机制：标准文流(Normal flow)，浮动(Floats)和绝对定位(Absolute positioning)。浏览器

标准文档流

从左到右，从上到下，输出文档内容
有会计元素（从作导游撑满页面，独占一行，触碰到页面边缘时自动换行的元素，div,ul,li,dl,dt,p）和行级元素组成（能在同一行内显示而且不会改变html文档结构，如span,input）

浮动

设置为浮动的元素将会往左或者往右漂移，知道遇到阻碍-其余元素或者父级元素的边框。浮动元素不在标准文档流中占空间，但会随其后的浮动元素形成影响

绝对定位

设置为绝对定位的元素将从标准文档流中删除，不占据空间，而后经过top,left,right,bottom属性对其相对父元素进行定位。

网页布局

流动布局
- 需了解实现块居中的几种方式

浮动布局
- 当设置float:left或float:right时，元素会左移或右移直到触碰容器位置，仍然处于标准文档流中。当元素没有设置宽度值，而设置了浮动属性，元素的宽度岁内容的变化而变化。当元素设置为浮动属性后，会对紧邻后的元素形成影响，紧邻以后的元素会挨着该元素显示。当父元素包含块缩成一条时，用clear:both方法无效，它通常用于紧邻气候的元素的清除浮动，要用overflow属性。清除浮动的方法有两种：使用clear属性-clear:both;同时设置width:100%(或固定宽度)+overflow:hidden。
- 浮动布局可实现横向多列布局
绝对定位布局
- position:static,relative,absoulte,fixed
  - static是默认值
  - 相对定位relative
    - 相对于自身原有位置进行偏移
    - 仍处于标准文档流中
    - 随即拥有偏移属性和z-index属性
  - 固定定位fixed
    - 一个固定定位元素会相对于视窗来定位，这意味着即使页面滚动，它仍是会停留在相同的位置。一个固定定位元素不会保留它本来在页面拥有的空隙
  - 绝对定位absolute
    - 相对于最近的已定位的祖先元素, 有已定位(指position不是static的元素)祖先元素, 以最近的祖先元素为参考标准。若是无已定位祖先元素, 以body元素为偏移参照基准, 而且它会随着页面滚动而移动。
    - 彻底脱离了标准文档流。
    - 随即拥有偏移属性和z-index属性。
- 实现横向两列布局
  - 经常使用于一列固定宽度，另外一列宽度自适应的状况
  - relative - 父元素相对定位
  - absolute - 自适应宽度元素定位
- 可以实现横向多列布局

常见布局实现

常见的布局有如下几种: 单列水平居中布局, 一列定宽一列自适应布局, 两列定宽一列自适应布局, 两侧定宽中间自适应三列布局。服务器

重点介绍一下常见的三列布局之: 圣杯布局和双飞翼布局。app

圣杯布局和双飞翼布局

二者都属于三列布局，是一种很常见的页面布局方式，三列通常分别是子列sub、主列main和附加列extra，其中子列通常是居左的导航，且宽度固定；主列是居中的主要内容，宽度自适应；附加列通常是广告等额外信息，居右且宽度固定。框架

圣杯布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        body {
            min-width: 600px; /* 2*sub + extra */
        }
        .container {
            padding-left: 210px;
            padding-right: 190px;
        }
        .main {
            float: left;
            width: 100%;
            height: 300px;
            background-color: rgba(255, 0, 0, .5);
        }
        .sub {
            position: relative;
            left: -210px;
            float: left;
            width: 200px;
            height: 300px;
            margin-left: -100%;
            background-color: rgba(0, 255, 0, .5);
        }
        .extra {
            position: relative;
            right: -190px;
            float: left;
            width: 180px;
            height: 300px;
            margin-left: -180px;
            background-color: rgba(0, 0, 255, .5);
        }
    </style>
</head>
<body>
<div class="container">
    <div class="main"></div>
    <div class="sub"></div>
    <div class="extra"></div>
</div>
    
</body>
</html>

双飞翼布局(淘宝使用的布局方式)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .main-wrapper {
            float: left;
            width: 100%;
        }
        .main {
            height: 300px;
            margin-left: 210px;
            margin-right: 190px;
            background-color: rgba(255, 0, 0, .5);
        }
        .sub {
            float: left;
            width: 200px;
            height: 300px;
            margin-left: -100%;
            background-color: rgba(0, 255, 0, .5);
        }
        .extra {
            float: left;
            width: 180px;
            height: 300px;
            margin-left: -180px;
            background-color: rgba(0, 0, 255, .5);
        }
    </style>
</head>
<body>
    <div class="main-wrapper">
        <div class="main"></div>
    </div>
    <div class="sub"></div>
    <div class="extra"></div>

</body>
</html>

总结:

俩种布局方式都是把主列放在文档流最前面，使主列优先加载。
两种布局方式在实现上也有相同之处，都是让三列浮动，而后经过负外边距造成三列布局。
两种布局方式的不一样之处在于如何处理中间主列的位置：圣杯布局是利用父容器的左、右内边距定位；双飞翼布局是把主列嵌套在div后利用主列的左、右外边距定位。

Flex布局

Flexbox又叫弹性盒模型。它能够简单使用一个元素居中（包括水平垂直居中），可让扩大和收缩元素来填充容器的可利用空间，能够改变源码顺序独立布局，以及还有其余的一些功能。Flex布局是我最喜欢的布局，合理使用它可以大大减小布局方面的工做, 例如以上列举的三列布局也可使用flex轻松实现。此外在移动端使用flex也比较常见。

CSS flex彻底指南

响应式布局(Responsive Web Design)

响应式布局是指，网页能够自动识别设备屏幕宽度，根据不一样的宽度采用不一样的CSS的样式，从而达到兼容各类设备的效果。响应式布局使用媒体查询(CSS3 Media Queries), 根据不一样屏幕分辨率采用不一样CSS规则, 使用方式以下:

@media screen and (max-width:1024px) {
  /* 视窗宽度小于1024px时 */
  ....
}

Bootstrap grid系统的实现

Bootstrap是很受欢迎的HTML, CSS和JS框架, 用于开发响应式布局和移动设备优先的Web项目。它提供了一套响应式，移动优先的流式栅格系统(grid system)，将屏幕分红12列来实现响应式的。它的实现原理很是简单，Media Query加上float布局，若是想了解实现细节，请参考我另一篇博客Boostrap网格系统。

CSS reset

CSS reset的目的是为了将不一样浏览器自带样式重置，达到保持浏览器一致性的目的;reset.css一般是样式设计开始以前第一个引用的CSS文件。

TODO:

Normalize.css

CSS hacks

不一样的浏览器对CSS的解析结果是不一样的，所以会致使相同的CSS输出的页面效果不一样，这就须要CSS Hack来解决浏览器局部的兼容性问题。而这个针对不一样的浏览器写不一样的CSS 代码的过程，就叫CSS Hack。CSS Hack常见的有三种形式：CSS属性Hack、CSS选择符Hack以及IE条件注释Hack， Hack主要针对IE浏览器。

TODO:

经常使用css hacks技巧

CSS sprite

把网页中的一些零星背景图片整合到一张图片当中，再利用CSS背景图片定位属性定位到要显示的位置，所以也叫图片拼合技术。
好处：减小文件体积和服务器请求次数，从而提升开发效率。通常状况下保存为PNG-24，能够设计出丰富多彩的图标。
难处：你须要预先肯定每一个图标的大小。注意小图标与小图标之间的距离。
实现方式: background-image + background-position。

TODO:

如何制做CSS sprite图

iconfont字体

iconfont是指使用字体文件取代图片文件，来展现图标和一些特殊字体等元素。它使用CSS3中的@font-face属性，它容许加载自定义字体样式，并且它还可以加载服务器端的字体文件，让客户端显示客户端所没有安装的字体。它有不少优点: 首先它的体积要比图片小得多; 特定的属性(颜色,大小,透明)等修改起来就像是操做字体同样简单;iconfont具备矢量性, 放大缩小不会失真;使用步骤:

设计师设计出Icon矢量图,须要保存为多种格式(可使用一些online webfont工具完成)。
- EOT(Embedded OpenType Fonts) IE专用格式
- WOFF(The Web Open Font Format) Web字体最佳格式, 它是一个开放的TrueType/OpenType的压缩版本。09年被开发, 现在是W3C阻止的推荐标准。
- TTF(TrueType Fonts) MacOS和WIN操做系统中最多见格式。
- SVG(SVG Fonts) 用于SVG字体渲染的一种格式, W3C制定的开放标准图形格式。
制做完成以后，进行字体声明。因为各个浏览器支持的字体文件不一样, 因此要声明多种字体达到浏览器兼容的目的。声明格式以下:

@font-face {
```
font-family: <font-family-name>;
src: [<url> [format(<string> #)]?| <font-face-name>] #;
font-weight: <weight>;
font-style: <style>;
```
}
在网页中使用字体。主要有两种方式: 一种是直接在网页中输入相应的Icon所表明的字体;另外一种是使用CSS after伪类, 这样能够经过CSS直接控制Icon类别，只是IE6不兼容。
第一种方式:
```
<li>\01FD</li>
```
第二种方式:
```
.icon:after{
    content: '\01FD';
}
<li class="icon"></li>
```
推荐:
- IconMoon图标工具
- Font Awesome

CSS3常见新特性

新的元素选择器

E:nth-last-child(n), E:nth-of-type(n), E:nth-last-of-type(n), E:last-child, E:first-of-type, E:only-child, E:only-of-type, E:empty, E:checked, E:enabled, E:disabled, E::selection, E:not(s)

@font-face

见上文中iconfont部分。

border-radius

又称圆角属性，一般使用该属性将图片圆角化，如头像。

word-wrap & text-overflow

word-wrap属性用来指出浏览器在单词内进行断句，防止字符串太长而找不到它的天然断句点时产生的溢出。

word-wrap:break-word;

text-overflow用于文本溢出:
单行缩略的实现以下:

.oneline {
    white-space: nowrap; //强制文本在一行内输出
    overflow: hidden; //隐藏溢出部分
    text-overflow: ellipsis; //对溢出部分加上...
}

多行缩略实现以下(主要针对webkit内核):

.multiline {
    display: -webkit-box !important;
    overflow: hidden;
    
    text-overflow: ellipsis;
    word-break: break-all;
    
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

background

主要是如下三个属性:

background-clip 规定背景的绘制区域, 取值为border-box | padding-box | content-box | no-clip
background-origin 规定背景的定位区域, 取值为border | padding | content
background-size 规定背景图片的尺寸, 取值为[<length> | <percentage> | auto]{1,2} | cover | contain