【面试篇】前端点滴（css/css3）

程序员文章站 2022-06-09 21:38:09

...

【面试篇】前端点滴（CSS/CSS3）---倾尽所有

面试小问答

css盒模型
css选择器
BFC
css（float）
css（position）
css（display，opacity，visiblity）
css（text）
css（link）
css布局，编写题

面试小问答

css盒模型

css盒模型基本概念？

参考：https://blog.csdn.net/Errrl/article/details/103743641
margin、border、padding、content。在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（content），元素的内边距（padding），元素的边框（border），元素的外边距（margin）四个部分。这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域。4个部分一起构成了css中元素的盒模型。可以分为标准模型、IE模型

说说你对盒模型的理解，以及如何告知浏览器使用不同的盒模型渲染布局。

CSS 盒模型描述了以文档树中的元素而生成的矩形框，并根据排版模式进行布局。每个盒子都有一个内容区域（例如文本，图像等）以及周围可选的padding、border和margin区域。

CSS 盒模型负责计算：

块级元素占用多少空间。
边框是否重叠，边距是否合并。
盒子的尺寸。

标准盒模型有以下规则：

块级元素的大小由width、height、padding、border和margin决定。
如果没有指定height，则块级元素的高度等于其包含子元素的内容高度加上padding
如果没有指定width，则非浮动块级元素的宽度等于其父元素的宽度减去父元素的padding。
元素的height是由内容的height来计算的。
元素的width是由内容的width来计算的。
默认情况下，padding和border不是元素width和height的组成部分。

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

盒子宽度、高度计算方式不同；
标准盒子模型的盒子宽度：width
IE盒子模型的盒子宽度：左右border+左右padding+width

css如何设置这两种模型？

box-sizing:content-box;/*标准模型*/
box-sizing:border-box; /*IE模型*/

设置padding与margin的作用？

padding用于撑开盒子，margin用于分开盒子

对于不同元素设置padding与margin会有什么表现？

对于块元素：宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
对于行内元素：宽度(width)、高度(height)、内边距的 top/bottom(padding-top/padding-bottom)和外边距的 top/bottom(margin-top/margin-bottom)都不可改变（也就是 padding 和 margin 的 left 和 right 是可以设置的），就是里面文字或图片的大小。

js如何设置获取盒模型对应的宽和高？

1、dom.style.width/height // 只能取到内联样式
2、dom.currentStyle.width/height // 取到渲染后的样式（只有IE支持）
3、window.getComputedStyle(dom).width/height // 兼容firefox，chrome，兼容性更好
4、dom.getBoundingClientRect().width/height // 运行后的宽度

在什么情况下发生边距重叠，怎么计算？

父子元素（同向边距重叠），兄弟元素，空元素分别设置了上下边距。
在 margin 都是正数的情况下，取其中 margin 较大的值为最终 margin 值
在 margin 都是负值的时候,取的是其中绝对值较大的,然后从零开始,负向位移
在 margin中有正值有负值的时候,要从所有负值中选出绝对值最大的,所有正值中选择绝对值最大的,二者相加

请简要描述margin重合问题，及解决方式

1、同向margin的重叠（父子）：
父层的margin-top与子层的margin-top发生重叠，父层的margin-bottom与子层的margin-bottom发生重叠。这时候重叠之后的margin值由发生重叠两片的最大值决定；如果其中一个出现负值，则由最大的正边距减去绝对值最大的负边距，如果没有最大正边距，则由0减去绝对值最大的负边距。
解决同向重叠的方法：
（1）在父层的div中加入overflow:hidden;zoom:1
（2）在父层加入padding:1px;属性
（3）在父层加入：border:1px solid #cacbcc;
2、异向重叠问题（兄弟）：
兄弟1的margin-bottom与兄弟2的margin-top发生重叠，这时候重叠之后的margin值同样遵循上述规则。
解决异向重叠问题：
（1）BFC格式化上下文

#father的子元素是.child,请说出#father的高度是多少？并说明原因

#father{background:#000;}
.child{background:#CCC;height:100px;margin-top:30px;}

#father的高度是100px，原因是父子盒子margin垂直方向的重叠

#father{background:#000;overflow:hidden;}
.child{background:#CCC;height:100px;margin-top:30px;}

#father的高度是130px，原因是父盒子中设置了overflow:hidden;破坏了margin的重叠，因此margin不重叠，造成高度为子盒子高度+子盒子margin-top=130px

#father{background:#000;padding-bottom:30px;}
.child{background:#CCC;height:100px;padding-top:30px;}

#father的高度是160px,原因是由于标准模型下盒子为content-box，实际高度= #father.height（.child.height+.child.padding）+#father.padding = 160px

#father{background:#000;margin-bottom:30px;overflow:hidden}
.child{background:#CCC;height:100px;padding-top:30px;margin-bottom:20px}

#father的高度是150px,原因是由于overflow:hidden破坏了边距的重叠，标准模型下盒子为content-box，实际高度= #father.height（.child.height+.child.padding+.child.margin） = 150px

css选择器

CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3 新增伪类有那些？

1.id选择器（ # myid）
2.类选择器（.myclassname）
3.标签选择器（div, h1, p）
4.相邻选择器（h1 + p）
5.子选择器（ul < li）
6.后代选择器（li a）
7.通配符选择器（ * ）
8.属性选择器（a[rel = “external”]）
9.伪类选择器（a: hover, li: nth - child）

可继承： font-size font-family color, ul li dl dt dd,css(text)属性;
不可继承：border padding margin width height ;
优先级就近原则，样式定义最近者为准;
载入样式以最后载入的定位为准;

优先级为:

!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
注意：同一级别中后写的会覆盖先写的样式

优先级算法：

每个规则对应一个初始"四位数"：0、0、0、0
若是行内选择符，则加1、0、0、0
若是 ID选择符，则加0、1、0、0
若是类选择符/伪类选择符，则分别加0、0、1、0
若是元素选择符，则分别加0、0、0、1

算法：将每条规则中，选择符对应的数相加后得到的”四位数“，从左到右进行比较，大的优先级越高。

CSS3新增伪类举例：

p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。

p:last-of-type  选择属于其父元素的最后 <p> 元素的每个 <p> 元素。

p:only-of-type  选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。

p:only-child    选择属于其父元素的唯一子元素的每个 <p> 元素。

p:nth-child(2)  选择属于其父元素的第二个子元素的每个 <p> 元素。

:enabled、:disabled 控制表单控件的禁用状态。

:checked，单选框或复选框被选中。

伪元素和伪类的区别？

1、伪元素使用 2 个冒号，常见的有：::before，::after，::first-line，::first-letter，::selection、::placeholder 等；

伪类使用1个冒号，常见的有：:hover，:link，:active，:target，:not()，:focus等。
2、伪元素添加了一个页面中没有的元素（只是从视觉效果上添加了，不是在文档树中添加）；

伪类是给页面中已经存在的元素添加一个类。

::before 和 :after中双冒号和单冒号有什么区别？

双冒号是在当前规范中引入的，用于区分伪类和伪元素。但是伪类兼容现存样式，浏览器需要同时支持旧的伪类，比如:first-line、:first-letter、:before、:after等。
对于CSS2之前已有的伪元素，比如:before和:after，单冒号和双冒号的写法::before和::after作用是一样的。
如果只需要兼容webkit、firefox、opera等浏览器，建议对于伪元素采用双冒号的写法，如果不得不兼容IE浏览器，还是用CSS2的单冒号写法比较安全。

超链接访问过后 hover 样式就不出现的问题是什么？如何解决？

被点击访问过的超链接样式不在具有 hover 和 active 了,解决方法是改变 CSS 属性的排列顺序:L(link)OV(visited)E and H(hover)A(active)TE

解释浏览器如何确定哪些元素与 CSS 选择器匹配。

浏览器从最右边的选择器（关键选择器）根据关键选择器，浏览器从 DOM 中筛选出元素，然后向上遍历被选元素的父元素，判断是否匹配。选择器匹配语句链越短，浏览器的匹配速度越快。

例如，对于形如p span的选择器，浏览器首先找到所有<span>元素，并遍历它的父元素直到根元素以找到<p>元素。对于特定的<span>，只要找到一个<p>，就知道’`已经匹配并停止继续匹配。

BFC

什么是BFC？

BFC（Block Formatting Context）格式化上下文，是 Web 页面中盒模型布局的 CSS 渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。

形成 BFC 的条件有什么？

浮动元素，float 除 none 以外的值
定位元素，position（absolute，fixed）
display 为以下其中之一的值 inline-block，table-cell，table-caption
overflow 除了 visible 以外的值（hidden，auto，scroll）

BFC的布局规则?

内部的 Box 会在垂直方向上一个接一个的放置。
垂直方向上的距离由 margin 决定
bfc 的区域不会与 float 的元素区域重叠。
计算 bfc 的高度时，浮动元素也参与计算
bfc 就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。

BFC的使用场景？

1、利用BFC避免margin重叠
2、BFC不与float重叠，可以使用于自适应布局
3、清除浮动：子元素是浮动元素的时候，把外层元素设置成BFC的时候，子元素的浮动元素也会参与到父级元素的高度计算上来。

css（float）

什么是css浮动，原来是什么？

浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。

浮动元素引起的问题（浮动的负效应）？

1、背景不能显示
2、父系高度坍塌，父系边框不能撑开，影响与父元素同级的元素
3、与浮动元素同级的非浮动元素（内联元素）会跟随其后
4、margin padding设置值不能正确显示
5、造成其他元素的显示问题

详细可以点击查看float负效应问题

css如何清除浮动？

1.使用额外标签法（不推荐使用）
2.设置父级元素为BFC元素，overflow:hidden;清除浮动（不推荐使用）
3.使用伪元素清除浮动(用的最多)

详细可以点击查看清除浮动问题

inline-block和float的共性和区别?

两者共同点是都可以实现元素在一行显示，并且可以*设置元素大小。

区别是
inline-block: 水平排列一行（但会产生空白节点），即使元素高度不一，也会以高度最大的元素高度为行高，即使高度小的元素周围留空，也不回有第二行元素上浮补位。所以还需设置line-height、vertical-align…。

float: 让元素脱离当前文档流，呈环绕状排列，如遇上行有空白，而当前元素大小可以挤进去，这个元素会在上行补位排列。默认是顶部对齐。脱离文档流，还得清除浮动。

position:absolute和float共性和区别?

共同点：对内联元素设置float和absolute属性，可以让元素脱离文档流，并且可以设置其宽高。

不同点：float仍会占据位置（注意：不代表没有脱离文档流），absolute会覆盖文档流中的其他元素。

float定位的工作原理?

浮动（float）是 CSS 定位属性。浮动元素从网页的正常流动中移出，但是保持了部分的流动性，会影响其他元素的定位（比如文字会围绕着浮动元素）。这一点与绝对定位不同，绝对定位的元素完全从文档流中脱离。

CSS 的clear属性通过使用left、right、both，让该元素向下移动（清除浮动）到浮动元素下面。

如果父元素只包含浮动元素，那么该父元素的高度将塌缩为 0。我们可以通过清除（clear）从浮动元素后到父元素关闭前之间的浮动来修复这个问题。

有一种 hack 的方法，是自定义一个.clearfix类，利用伪元素选择器::after清除浮动。另外还有一些清除浮动的方法，比如添加空的<div></div>和设置浮动元素父元素的overflow属性。与这些方法不同的是，clearfix方法，只需要给父元素添加一个类，定义如下：

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

值得注意的是，把父元素属性设置为overflow: auto或overflow: hidden，会使其内部的子元素形成块格式化上下文（Block Formatting Context），并且父元素会扩张自己，使其能够包围它的子元素。
例子与上述#father高度计算实例相结合

行内元素 float:left 后是否变为块级元素？

行内元素设置成浮动之后变得更加像是 inline-block
行内块级元素，设置成这个属性的元素会同时拥有行内和块级的特性，最明显的不同是它的默认宽度不是 100%（而是取决于内容宽度），块元素默认 100%宽度占据一行
这时候给行内元素设置 padding-top 和 padding-bottom 或者 width、height 都是有效果的

css（position）

position 的值， relative 和 absolute 分别是相对于谁进行定位的？

absolute :生成绝对定位的元素，相对于最近一级的定位不是 static 的父元素来进行定位。
fixed （老 IE 不支持）生成绝对定位的元素，通常相对于浏览器窗口或 frame 进行定位。
relative 生成相对定位的元素，相对于其在普通流中的位置进行定位。
static 默认值。没有定位，元素出现在正常的流中
sticky 生成粘性定位的元素，容器的位置根据正常文档流计算得出

relative，fixed，absolute和static总体定位有什么区别？

static：定位定位属性值。该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时上，右，下，左和z-index属性无效。
relative：该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的下方下调整元素位置（因此会在此元素未添加定位时所在位置保留空白）。
absolute：不为元素增量空间（脱离文档流），通过指定元素相对于最近的非静态定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（边距），并且不会与其他边距合并。
fixed：不为元素缩放空间，或者通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的当元素祖先的变换属性非none时，容器由视口替换该祖先。
static：盒位置根据正常流计算（这称为正常流动中的位置），然后相对于该元素在流中的流根（BFC）和包含块（最近的块级祖先元素）定位。在所有情况下（被即便定位元素为table时），该元素定位均不对后续元素造成影响。当元素乙被粘性定位时，后续元素的位置仍按照乙未定位时的位置来确定。position: static对table元素的效果与position: relative相同。

css（display，opacity，visiblity）

display有什么值？说明他们的作用

display:none、inline、block、inline-block、table、inline-table、table-caption、table-cell、table-row、table-row-group、table-column、table-column-group、table-header-group、table-footer-group、run-in、box、inline-box、flexbox、inline-flexbox、flex、inline-flex

none：隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间
inline：指定对象为内联元素。
block：指定对象为块元素。
list-item：指定对象为列表项目。
inline-block：指定对象为内联块元素。（CSS2）
table：指定对象作为块元素级的表格。类同于html标签<table>（CSS2）
inline-table：指定对象作为内联元素级的表格。类同于html标签<table>（CSS2）
table-caption：指定对象作为表格标题。类同于html标签<caption>（CSS2）
table-cell：指定对象作为表格单元格。类同于html标签<td>（CSS2）
table-row：指定对象作为表格行。类同于html标签<tr>（CSS2）
table-row-group：指定对象作为表格行组。类同于html标签<tbody>（CSS2）
table-column：指定对象作为表格列。类同于html标签<col>（CSS2）
table-column-group：指定对象作为表格列组显示。类同于html标签<colgroup>（CSS2）
table-header-group：指定对象作为表格标题组。类同于html标签<thead>（CSS2）
table-footer-group：指定对象作为表格脚注组。类同于html标签<tfoot>（CSS2）
run-in：根据上下文决定对象是内联对象还是块级对象。（CSS3）
box：将对象作为弹性伸缩盒显示。（伸缩盒最老版本）（CSS3）
inline-box：将对象作为内联块级弹性伸缩盒显示。（伸缩盒最老版本）（CSS3）
flexbox：将对象作为弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3）
inline-flexbox：将对象作为内联块级弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3）
flex：将对象作为弹性伸缩盒显示。（伸缩盒最新版本）（CSS3）
inline-flex：将对象作为内联块级弹性伸缩盒显示。（伸缩盒最新版本）（CSS3）

display：inline-block什么时候会显示间隙？

间距产生的原因是因为，换行或间隔会占用一定的位置，所以inline-block布局的元素在编辑器里写在同一行就不会显示间隙
推荐解决方法：

父元素中设置font-size：0;letter-spacing：-4px;
详细可以参考https://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove-%E5%8E%BB%E9%99%A4%E9%97%B4%E8%B7%9D/

请解释一下 CSS3 的 Flexbox（弹性盒布局模型）,以及适用场景？

flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。块级元素只需要display属性为flex即可。行内元素也可以使用 Flex 布局。.box{ display: inline-flex; }。Webkit 内核的浏览器，必须加上-webkit前缀。

对容器中的条目进行布局、对齐和分配空间。这种布局方式在条目尺寸未知或动态时也能工作。
设置属性可以参考上述的flex（弹性）布局。

rgba()和 opacity 的透明效果有什么不同？

rgba()和 opacity 都能实现透明效果，但最大的不同是 opacity 作用于元素，以及元素内的所有内容的透明度。

而 rgba()只作用于元素的颜色或其背景色。（设置 rgba 透明的元素的子元素不会继承透明效果！）。

设置了float浮动后，该元素的display会产生什么效果？

自动变成 display:block，表现却像是display:inline-block。

CSS隐藏元素的几种方法，区别?（至少说出三种）

opacity：元素本身依然保留它自己的位置位置网页的布局设置（未脱离文档流）。它也将响应用户交互；
visiblity：与opacity唯一不同的是它不会响应任何用户交互。转化，元素在读屏软件中也会被隐藏，占据原有位置；
display，显示没有任何该元素直接打用户交互操作都无法实现。读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在（从文档中脱离，不占据原有位置）；
position：不会影响布局，有助于元素保持可以操作;

css（text）

css 中可以让文字在垂直和水平方向上重叠的两个属性是什么？

垂直方向：line-height

水平方向：letter-spacing

letter-spacing 的作用还可以用于消除 inline-block 元素间的换行符空格间隙问题。

Vertical-Align的作用是什么？

vertical-align用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。也就是说，对于块级元素，vertical-align是不起作用的。

对哪些元素可以使用Vertical-Align?

inline
inline-block
inline-table
没有设置float和position: absolute
其中，行内元素（inline element）就是包含文本的标签。
而行内块元素（inline-block element），顾名思义，就是位于行内的块元素。可以有宽度和高度（可以由其内容决定），也可以有内边距、边框和外边距。

vertical-align的各类属性值？

线类，如 baseline、top、middle、bottom；
文本类，如 text-top、text-bottom；
上标下标类，如 sub、super；
数值百分比类，如 10px、1em、5%；
详细参考：深入理解css之vertical-align

CSS文本溢出显示省略号

单行省略：

 overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap

多行省略（适用于移动端）：

  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

使用伪类进行文本省略

html

<div id="con">
  <span id="txt">文本溢出显示省略号,文本溢出显示省略号,文本溢出显示省略号,文本溢出显示省略</span>
  <span class="t"></span>
</div>

css

#txt{
  display: inline-block;
  height: 40px;
  width: 250px;
  line-height: 20px;
  overflow: hidden;
  font-size: 16px;
}
.t:after{
  display: inline;
  content: "...";
  font-size: 16px;
    
}

跨浏览器兼容的方案

p {
    position:relative;
    line-height:1.4em;
    /* 3 times the line-height to show 3 lines */
    height:4.2em;
    overflow:hidden;
}
p::after {
    content:"...";
    font-weight:bold;
    position:absolute;
    bottom:0;
    right:0;
    padding:0 20px 1px 45px;
    background:url(/newimg88/2014/09/ellipsis_bg.png) repeat-y;
}

JavaScript 方案

1.Clamp.js
js

var module = document.getElementById("id");
$clamp(module, {clamp: 3});

6.line-height的应用?

大部分时候，我们设置line-height，都是为了垂直居中对齐。但这里的居中，只能说是近似居中。line-height除了可以作为单行文本的居中对齐外，多行文本也是可以的。

vertical-align与line-height的关系?

vertical-align的百分比值是根据line-height来计算的。但实质上，只要是内联元素，这两个元素都会同时在起作用。

请解释下面代码发生了什么，为什么会这样，怎么解决？

.box {
    line-height: 32px;
}
.box > span {
    font-size: 24px;
}
<div class="box">
    <span>文本</span>
</div>

效果：
【面试篇】前端点滴（css/css3）
从代码上看，好像.box的高度会是32px，但实质上.box的高度会比32px还要高。原因是"strut"继承了line-height: 32px，span也继承了line-height: 32px，但两者的font-size不一样，这就导致了"strut"的font-size比较小，而span的font-size比较大，也就是说它们的基线不在同一位置上，"strut"偏上一点，而span默认又是基线对齐，为此，span总体会往上移以便跟"strut"基线对齐，.box元素就是这样被撑高了

解决方案：

span元素不使用基线对齐，可以改为top对齐
span元素块状化
line-height设置为0

css（link）

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

Link 属于 html 标签，而@import 是 CSS 中提供的

在页面加载的时候，link 会同时被加载，而@import 引用的 CSS 会在页面加载完成后才会加载引用的 CSS

@import 只有在 ie5 以上才可以被识别，而 link 是 html 标签，不存在浏览器兼容性问题

Link 引入样式的权重大于@import 的引用（@import 是将引用的样式导入到当前的页面中）

css布局，编写题

实现不使用 border 画出 1px 高的线，在不同浏览器的标准模式与怪异模式下都能保持一致的效果。

<div style="height:1px;overflow:hidden;background:red"></div>

怎么样实现边框 0.5 个像素？

1、采用meta viewport的方式

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

2、利用渐变

background-image: linear-gradient(0deg, #f00 50%, transparent 50%);

3、transform:scaleY(.5)

如何垂直居中一个元素？

方法一：绝对定位居中+margin:auto法

.inner{
			position: absolute;/*父元素需要相对定位*/
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin:auto;/*高宽auto*/
			border:1px solid yellow;
			height: 100px;
			width: 100px;
		}

方法二：绝对定位居中+margin负值法

.inner{
			position: absolute;/*父元素需要相对定位*/
			top: 50%;
			left: 50%;
			margin-top:-50px;/*自身高度的一半*/
			margin-left: -50px;/*自身宽度的一半*/
			border:1px solid yellow;
			height: 100px;
			width: 100px;
		}

方法三：绝对定位居中+偏移法

.inner{
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translateX(-50%) translateY(-50%); /*在水平和垂直方向上各偏移-50%*/
			border:1px solid yellow;
			height: 100px;
			width: 100px;
		}

方法四：table-cell+vertical-align+text-align居中

.outer{
			width: 500px;
			height: 500px;
			border: 1px solid red;
			position: relative;
			display: table-cell;
			vertical-align: middle;/*子元素必须设置为行内元素、行内块元素*/
			text-align: center;
		}
.inner{
			display:inline-block;
		}

方法五：flex布局居中

/*统一设置在父元素中*/
.outer{
			width: 500px;
			height: 500px;
			border: 1px solid red;
			display: flex; /*设置外层盒子display为flex*/
			justify-content: center;/*设置内层盒子的水平居中*/
			align-items: center; /*设置内层盒子的垂直居中*/
		}

几种常见的 CSS 布局

单列布局
两列自适应布局
圣飞布局和双飞翼布局（三栏、多栏布局）
flex布局

三栏布局：左右各300px,中间自适应,并说说各自的优缺点？

①浮动布局：需要清除浮动，兼容性比较好。

<style type="text/css">
            *{
              margin: 0;
              padding: 0;
            }
            .left{
              width: 300px;height: 300px; background: yellow; float: left;    
            }
            .right{
              width: 300px; height: 300px; background: blueviolet; float: right;
            }
            .middle{
              height: 300px; background: goldenrod; margin-left: 320px; margin-right: 320px;
            }
        </style>
        
    <body>
        <div class="left">左栏</div>
        <div class="right">右栏</div>
        <div class="middle">中间栏</div>
    </body>

②绝对定位：快捷，布局已经脱离了文档流，导致下面的元素也要脱离文档流，使用性较差，没有设置margin:0;有位移差。（不推荐使用）

<style type="text/css">
            .left{
                background: skyblue;
                width: 300px;
                height: 300px;
                position: absolute;
                top: 0;
                left: 0;
            }
            .middle{
                height: 300px;
                margin: 0 320px;
                background: yellow;
            }
            .right{
                height: 300px;
                width: 300px;
                position: absolute;
                top: 0;
                right: 0;
                background: violet;
            }
        </style>
        <body>
        <div class="left">左栏</div>
        <div class="middle">中间栏</div>
        <div class="right">右栏</div>
 </body>

③flex布局：解决了浮动和绝对定位的缺点，移动端基本已经支持了兼容性。（推荐）

 <style type="text/css">
            .wrapper{
                display: flex;
            }
            .left{
                width: 300px;
                height: 300px;
                background: green;
            }
            .middle{
                width: 100%; /*flex:1;*/
                background: red;
                marign: 0 20px;
            }
            .right{
                width: 3000px;
                height: 300px;
                background: yellow;
            }
        </style>
        
        <body>
        <div class="wrapper">
            <div class="left">左栏</div>
            <div class="middle">中间</div>
            <div class="right">右栏</div>
        </div>
    </body>

④表格布局：表格布局的兼容性非常好

<style>
    .content{
      width:100%;
      display:table;
      height:100px;
    }
    .content>div{
      display:table-cell;
    }
    .content .left{
      width:300px;
      background:red;
    }
    .content  .center{
      background:yellow;
    }
    .content  .right{
      width:300px;
      background:blue;
    }
  </style>
  
  <body>
  		<div class = "content">
  			<div class="left">左</div>
    		<div class="center">中</div>
    		<div class="right">右</div>
    	</div>
   </body>

⑤网格布局：新出的（后期作用很大）

 <style>
    .content{
      display:grid;
      width:100%;
      grid-template-rows:300px;
      grid-template-columns:300px auto 300px;
    }
    .content .left{
      background:red;
    }
    .content .center{
      background:yellow;
    }
    .content .right{
      background:blue;
    }
  </style>
  
   <body>
  		<div class = "content">
  			<div class="left">左</div>
    		<div class="center">中</div>
    		<div class="right">右</div>
    	</div>
   </body>

三栏布局：上下各300px,中间自适应

①绝对定位：快捷，布局已经脱离了文档流，导致下面的元素也要脱离文档流，使用性较差，没有设置margin:0;有位移差。（不推荐使用）

<style type="text/css">
			div{
				width：100%
			}
            .top{
                background: skyblue;
                height: 300px;
                position: fixed;   /*固定在头部*/
                top: 0;
            }
            .middle{
 				top: 300px;
                bottom: 300px;
                background: yellow;
				position:absolute;
 				overflow: auto;  /*当文本内容超出自定义高度时，出现自定义滚动条*/
            }
            .bottom{
                height: 300px;
                position: fixed;/*固定在尾部*/
                bottom: 0;
                background: violet;
            }
        </style>
        
        <body>
        <div class="top">上栏</div>
        <div class="middle">中间栏</div>
        <div class="bottom">下栏</div>
 </body>

②flex布局：解决了浮动和绝对定位的缺点，移动端基本已经支持了兼容性。（推荐）

 <style type="text/css">
            .wrapper{
                display: flex;
                flex-direction: column;
            }
             .wrapper>div{
                width:100%;
            }
            .top{
                height: 300px;
                background: green;
            }
            .middle{
                height: 100%; /*flex:1;*/
                background: red;
                marign:  20px 0;
            }
            .bottom{
                height: 300px;
                background: yellow;
            }
        </style>
        
        <body>
        <div class="wrapper">
            <div class="top">上栏</div>
            <div class="middle">中间</div>
            <div class="bottom">下栏</div>
        </div>
    </body>

③表格布局：表格布局的兼容性非常好

<style>
    .content{
      width:100%;
      display:table;
    }
    .content>div{
      display:table-row;
    }
    .content .top{
      height:300px;
      background:red;
    }
    .content  .center{
      background:yellow;
    }
    .content  .bottom{
      height:300px;
      background:blue;
    }
  </style>
  
  <body>
  		<div class = "content">
  			<div class="top">左</div>
    		<div class="center">中</div>
    		<div class="bottom">右</div>
    	</div>
   </body>

④网格布局：新出的（后期作用很大）

 <style>
   .content{
      display:grid;
      width:100%;
      grid-template-rows:100px auto 100px;
    }
    .content .top{
      background:red;
    }
    .content .center{
      background:yellow;
    }
    .content .bottom{
      background:blue;
    }
  </style>
  
   <body>
  		<div class = "content">
  			<div class="top">左</div>
    		<div class="center">中</div>
    		<div class="bottom">右</div>
    	</div>
   </body>

圣杯布局？原理？

<style>
    .container{
      padding-left: 50px; /*设置左右padding，防止main的字被左右两块遮挡*/
      padding-right:100px;
    }
 	.main{
      float:left;
      width:100%;
      height:200px;
      background-color:blue;
    }
    .left{
      float:left;
      width:50px;
      height:200px;
      margin-left:-100%; /*左栏移到第一行的首部*/
      position:relative;
      left:-50px; /*抵消container的左padding*/
      background-color:red;
    }
    .right{
      float:left;
      width:100px;
      height:200px;
      margin-left:-100px; /*右栏移到和左中一行*/
      position:relative;
      right:-100px;
      background-color:yellow;
    }
  </style>

<body>
<div class="container"><divclass="main">111111111111111111111111111111111111111111111111111111111111111111111111111111111111</div>
  <div class="left"></div>
  <div class="right"></div>
</div>
</body>

1、圣杯布局的核心是左、中、右三栏都通过float进行浮动，然后通过负值margin进行调整。
2、.left， .right的margin-left是为了让.main .left .right在同一行。
3、.container的padding-left,padding-right，.left的position和left, . right的position和left是为了防止文字被遮挡。

双飞翼布局？

 <style>
    .content{
      float:left;
      width:100%;
    }
    .main{
      height:200px;
      margin-left:100px;
      margin-right:200px;
      background-color:green;
    }
    .content::after{
      display:block;
      content: '';
      font-size: 0;
      height:0;
      clear: both;
      zoom:1;
    }
    .left{
      float:left;
      width:100px;
      height:200px;
      margin-left:-100%; /*左栏移到第一行的首部*/
      background-color:red;
    }
    .right{
      float:left;
      width:200px;
      height:200px;
      margin-left:-200px; /*右栏移到和左中一行*/
      background-color:yellow;
    }
  </style>

<body>
  <div class="content">
    <div class="main"></div>
  </div>
  <div class="left"></div>
  <div class="right"></div>
  </body>

1、双飞翼布局的前两步和圣杯布局一样，只是处理中间栏部分内容被遮挡问题的解决方案有所不同。
2、既然content部分的内容会被遮挡，那么就在content内部再加一个main，通过设置其margin来避开遮挡，问题也就可以解决了。
3、需要注意的是，需要在main后面加一个元素来清除浮动。

实现纯 CSS 创建一个三角形并说明原理？

span {
  width: 0;
  height: 0;
  border-top: 40px solid transparent;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  border-bottom: 40px solid #ff0000;
}

采用的是均分原理,把矩形分为4等份,这4等份其实都是边框

实现纯 CSS 创建正方体？

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>perspective</title>
<style>
.wrapper{
width: 50%;
float: left;
}
.cube{
font-size: 4em;
width: 2em;
margin: 1.5em auto;
transform-style:preserve-3d;
transform:rotateX(-35deg) rotateY(30deg);
}
.side{
position: absolute;
width: 2em;
height: 2em;
background: rgba(255,99,71,0.6);
border: 1px solid rgba(0,0,0,0.5);
color: white;
text-align: center;
line-height: 2em;
}
.front{
transform:translateZ(1em);
}
.bottom{
transform:rotateX(-90deg) translateZ(1em);
}
.top{
transform:rotateX(90deg) translateZ(1em);
}
.left{
transform:rotateY(-90deg) translateZ(1em);
}
.right{
transform:rotateY(90deg) translateZ(1em);
}
.back{
transform:translateZ(-1em);
}
</style>
</head>
<body>
<div class="wrapper w1">
<div class="cube">
<div class="side front">1</div>
<div class="side back">6</div>
<div class="side right">4</div>
<div class="side left">3</div>
<div class="side top">5</div>
<div class="side bottom">2</div>
</div>
</div>
</body>
</html>

【面试篇】前端点滴（css/css3）