HTML、CSS、JavaScript常见面试问题的总结（css篇）

相关知识点：

（1）有两种盒子模型：IE盒模型（border-box）、W3C标准盒模型（content-box）
（2）盒模型：分为内容（content）、填充（padding）、边界（margin）、边框（border）四个部分
IE盒模型和W3C标准盒模型的区别：
（1）W3C标准盒模型：属性width，height只包含内容content，不包含border和padding
（2）IE盒模型：属性width，height包含content、border和padding，指的是content
+padding+border。
在ie8+浏览器中使用哪个盒模型可以由box-sizing（CSS新增的属性）控制，默认值为content-box，即
标准盒模型；
如果将box-sizing设为border-box则用的是IE盒模型。如果在ie6，7，8中DOCTYPE缺失会将盒子模型
解释为IE
盒子模型。若在页面中声明了DOCTYPE类型，所有的浏览器都会把盒模型解释为W3C盒模型。

回答：

1、盒模型都是由四个部分组成的，分别是margin、border、padding和content。
2、标准盒模型和IE盒模型的区别在于设置width和height时，所对应的范围不同。标准盒模型的width和height属性的
3、范围只包含了content，而IE盒模型的width和height属性的范围包含了border、padding和content。
4、一般来说，我们可以通过修改元素的box-sizing属性来改变元素的盒模型。

问题二： css选择器以及优先级？

不同级别
在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
作为style属性写在元素内的样式
id选择器
类选择器
元素选择器
通配符选择器
浏览器自定义或继承
总结排序：!important > 行内样式 > ID选择器 > 类选择器 > 元素 > 通配符 > 继承 > 浏览器默认属性。

同一级别

(1) 同一级别中后写的会覆盖先写的样式

(2) 同一级别css引入方式不同，优先级不同
总结排序：内联(行内)样式 > 内部样式表 > 外部样式表 > 导入样式(@import)。

对于选择器优先级，还可以通过计算权重值来比较。（请参见：狠狠戳我）

选择器：

1、普通选择器

2、属性选择器

3、伪类

注：link、visited、active、hover的顺序，为LoVe HAte

4、伪元素

问题三：::before 和:after 中双冒号和单冒号有什么区别？解释一下这 2 个伪元素的作用。

知识点：

单冒号（:）用于CSS3伪类，双冒号（::）用于CSS3伪元素。（伪元素由双冒号和伪元素名称组成）
双冒号是在当前规范中引入的，用于区分伪类和伪元素。不过浏览器需要同时支持旧的已经存在的伪元素写法，比如:first-line、:first-letter、:before、:after等。
而新的在CSS3中引入的伪元素则不允许再支持旧的单冒号的写法。
想让插入的内容出现在其它内容前，使用::before，否则，使用::after；
在代码顺序上，::after生成的内容也比::before生成的内容靠后。
如果按堆栈视角，::after生成的内容会在::before生成的内容之上。

回答：

在css3中使用单冒号来表示伪类，用双冒号来表示伪元素。但是为了兼容已有的伪元素的写法，在一些浏览器
中也可以使用单冒号
来表示伪元素。
伪类一般匹配的是元素的一些特殊状态，如hover、link等，而伪元素一般匹配的特殊的位置，比如after、
before等。

问题四：伪类与伪元素的区别？

1、css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或者是列表中的第一个元素。
2、伪类用于当已有的元素处于某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过:hover来描述这个元素的状态。
3、伪元素用于创建一些不在文档树中的元素，并为其添加样式。它们允许我们为元素的某些部分设置样式。比如说，我们可以通过::before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。

问题五： CSS 中哪些属性可以继承？

1、每一个属性在定义中都给出了这个属性是否具有继承性，一个具有继承性的属性会在没有指定值的时候，会使用父元素的同属性的值来作为自己的值。
2、一般具有继承性的属性有，字体相关的属性，font-size和font-weight等。文本相关的属性，color和text-align等。
3、表格的一些布局属性、列表属性如list-style等。还有光标属性cursor、元素可见性visibility。

当一个属性不是继承属性的时候，我们也可以通过将它的值设置为inherit来使它从父元素那获取同名的属性值来继承。

1、inherit 关键字允许显式的声明继承性，它对继承和非继承属性都生效。

可以使用 all 简写属性一次控制所有属性的继承，该属性将其值应用于所有属性，例如:
font {
  all: revert;
  font-size: 200%;
  font-weight: bold;
}
这会将 font 属性的样式恢复为用户代理（浏览器）的默认值，除非存在用户样式表，在这种情况下使用该样式表。然后它将字体大小加倍并应用 font-weight 属性为"bold"。

2、initial CSS关键字将属性的初始（或默认）值应用于元素。不应将初始值与浏览器样式表指定的值混淆。它可以应用于任何CSS属性。这包括CSS简写all，initial 可用于将所有CSS属性恢复到其初始状态。

示例

HTML
<p>
  <span>This text is red.</span>
  <em>This text is in the initial color (typically black).</em>
  <span>This is red again.</span>
</p>
CSS
p {
  color: red;
}

em {
  color: initial;
}
3、如果CSS关键字 unset 从其父级继承，则将该属性重新设置为继承的值，如果没有继承父级样式，则将该属性重新设置为初始值。换句话说，在第一种情况下（继承属性）它的行为类似于inherit ，在第二种情况下（非继承属性）类似于initial。它可以应用于任何CSS属性，包括CSS简写属性 all 。

示例

Color

HTML
<p>This text is red.</p>
<div class="foo">
  <p>This text is also red.</p>
</div>
<div class="bar">
  <p>This text is green (default inherited value).</p>
</div>
CSS
.foo {
  color: blue;
}
.bar {
  color: green;
}

p {
  color: red;
}
.bar p {
  color: unset;
}
结果：

问题六：如何居中 div？

1、水平居中：给 div 设置一个宽度，然后添加 margin:0auto 属性
div {
width: 200px;
margin: 0auto;
}
2、水平居中，利用 text-align:center 实现
.container {
background: rgba(0, 0, 0, 0.5);
text-align: center;
font-size: 0;
}
.box {
display: inline-block;
width: 500px;
height: 400px;
background-color: pink;
}
3、让绝对定位的 div 居中
div {
position: absolute;
width: 300px;
height: 300px;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: pink; /*方便看效果*/
}
4、水平垂直居中
//水平垂直居中一
/*确定容器的宽高宽500高300的层设置层的外边距

div{*/
    position:absolute;/*绝对定位*/
    width:500px;
    height:300px;
    top:50%;
    left:50%;
    margin:-150px00-250px;/*外边距为自身宽高的一半*/
    background-color:pink;/*方便看效果*/
}

//水平垂直居中二
/*未知容器的宽高，利用`transform`属性*/

div {
    position: absolute; /*相对定位或绝对定位均可*/
    width: 500px;
    height: 300px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: pink; /*方便看效果*/
}

//水平垂直居中三
/*利用flex布局实际使用时应考虑兼容性*/

.container {
    display: flex;
    align-items: center; /*垂直居中*/
    justify-content: center; /*水平居中*/
}
.containerdiv {
    width: 100px;
    height: 100px;
    background-color: pink; /*方便看效果*/
}

//水平垂直居中四
/*利用text-align:center和vertical-align:middle属性*/

.container {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    text-align: center;
    font-size: 0;
    white-space: nowrap;
    overflow: auto;
}
.container::after {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.box {
    display: inline-block;
    width: 500px;
    height: 400px;
    background-color: pink;
    white-space: normal;
    vertical-align: middle;
}
总结：一般常见的几种居中的方法有：
对于宽高固定的元素
（1）我们可以利用margin:0auto来实现元素的水平居中。
（2）利用绝对定位，设置四个方向的值都为0，并将margin设置为auto，由于宽高固定，因此对应方向实现平分，可以实现水平和垂直方向上的居中。

（3）利用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过margin负值来调整元素的中心点到页面的中心。
（4）利用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过translate来调整元素的中心点到页面的中心。
（5）使用flex布局，通过align-items:center和justify-content:center设置容器的垂直和水平方向上为居中对齐，然后它的子元素也可以实现垂直和水平的居中。
对于宽高不定的元素，上面的后面两种方法，可以实现元素的垂直和水平的居中。

问题七：display 有哪些值？说明他们的作用。

block 块类型。默认宽度为父元素宽度，可设置宽高，换行显示。
none 元素不显示，并从文档流中移除。
inline 行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。
inline-block 默认宽度为内容宽度，可以设置宽高，同行显示。
list-item 像块类型元素一样显示，并添加样式列表标记。
table 此元素会作为块级表格来显示。
inherit 规定应该从父元素继承display属性的值。

问题八：css几种定位讲解？

CSS中的定位使用来布局的熟练应用对页面美化有很好的帮助，下面就进行详细介绍：定位分为静态定位，相对定位，绝对定位，固定定位这四种，定位有不同的参数，例如：left、right、top、bottom、z-index等。

1、静态定位（static）

一般的标签元素不加任何定位属性都属于静态定位，在页面的最底层属于标准流。

2、绝对定位（absolute）

绝对定位的元素从文档流中拖出，使用left、right、top、bottom等属性相对于其最接近的一个最有定位设置的父级元素进行绝对定位，如果元素的父级没有设置定位属性，则依据 body 元素左上角作为参考进行定位。绝对定位元素可层叠，层叠顺序可通过 z-index 属性控制，z-index值为无单位的整数，大的在上面，可以有负值。

绝对定位的定位方法：如果它的父元素设置了除static之外的定位，比如position:relative或position:absolute及position:fixed，那么它就会相对于它的父元素来定位，位置通过left , top ,right ,bottom属性来规定，如果它的父元素没有设置定位，那么就得看它父元素的父元素是否有设置定位，如果还是没有就继续向更高层的祖先元素类推，总之它的定位就是相对于设置了除static定位之外的定位的第一个祖先元素，如果所有的祖先元素都没有以上三种定位中的其中一种定位，那么它就会相对于文档body来定位（并非相对于浏览器窗口，相对于窗口定位的是fixed）。

3、相对定位（relative）

相对定位元素不可层叠，依据left、right、top、bottom等属性在正常文档流中偏移自身位置。同样可以用z-index分层设计。

4、固定定位（fixed）

固定定位与绝对定位类似，不占位置完全脱标，但它是相对于浏览器窗口定位，并且不会随着滚动条进行滚动。

固定定位的最常见的一种用途是在页面中创建一个固定头部、固定脚部或者固定侧边栏，不需使用margin、border、padding。

5、绝对定位vs相对定位

绝对定位好像把不同元素安排到了一栋楼的不同楼层(除首层，文本流放在首层)，它们之间互不影响；

相对定位元素在首层，与文本流一起存放，它们之间互相影响。

被设置了绝对定位的元素，在文档流中是不占据空间的，如果某元素设置了绝对定位，那么它在文档流中的位置会被删除，它浮了起来，其实设置了相对定位也会让元素浮起来，但它们的不同点在于，相对定位不会删除它本身在文档流中占据的空间，其他元素不可以占据该空间，而绝对定位则会删除掉该元素在文档流中的位置，使其完全从文档流中抽了出来，其他元素可以占据其空间，可以通过z-index来设置它们的堆叠顺序。

问题九：Flex布局

flex布局是CSS3新增的一种布局方式，我们可以通过将一个元素的display属性值设置为flex从而使它成为
一个flex容器，它的所有子元素都会成为它的项目。
一个容器默认有两条轴，一个是水平的主轴，一个是与主轴垂直的交叉轴。我们可以使用flex-direction来指定主轴的方向。
我们可以使用justify-content来指定元素在主轴上的排列方式，使用align-items来指定元素在交叉轴上的排列方式。还可以使用flex-wrap来规定当一行排列不下时的换行方式。
对于容器中的项目，我们可以使用order属性来指定项目的排列顺序，还可以使用flex-grow来指定当排列空间有剩余的时候，项目的放大比例。还可以使用flex-shrink来指定当排列空间不足时，项目的缩小比例。

详情请看：flex布局讲解。flex布局：语法篇。flex布局：实例篇

问题十：用纯 CSS 创建一个三角形的原理是什么？

采用的是相邻边框连接处的均分原理。
将元素的宽高设为0，只设置 border ，把任意三条边隐藏掉（颜色设为 transparent），剩下的就是一个三角形。
#demo {
width: 0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: transparenttransparentredtransparent;

}

问题十一：一个满屏品字布局如何设计?

简单的方式：
上面的div宽100%，
下面的两个div分别宽50%，
然后用float或者inline使其不换行即可

问题十二：CSS 多列等高如何实现？

（1）利用padding-bottom|margin-bottom正负值相抵，不会影响页面布局的特点。设置父容器设置超出隐藏（overflow:
hidden），这样父容器的高度就还是它里面的列没有设定padding-bottom时的高度，当它里面的任一列高度增加了，则
父容器的高度被撑到里面最高那列的高度，其他比这列矮的列会用它们的padding-bottom补偿这部分高度差。
（2）利用table-cell所有单元格高度都相等的特性，来实现多列等高。
（3）利用flex布局中项目align-items属性默认为stretch，如果项目未设置高度或设为auto，将占满整个容器的高度的特性，来实现多列等高。

问题十三：经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用 hack 的技巧？

（1）png24位的图片在iE6浏览器上出现背景
解决方案：做成PNG8，也可以引用一段脚本处理。
（2）浏览器默认的margin和padding不同
解决方案：加一个全局的*{margin:0;padding:0;}来统一。
（3）IE6双边距bug：在IE6下，如果对元素设置了浮动，同时又设置了margin-left或
margin-right，margin值会加倍。
#box{float:left;width:10px;margin:00010px;}
这种情况之下IE会产生20px的距离
解决方案：在float的标签样式控制中加入_display:inline;将其转化为行内属性。(_这个符号只有ie6 会识别)
（4）渐进识别的方式，从总体中逐渐排除局部。
首先，巧妙的使用"\9"这一标记，将IE游览器从所有情况中分离出来。
接着，再次使用"+"将IE8和IE7、IE6分离开来，这样IE8已经独立识别。
.bb{
background-color:#f1ee18;/*所有识别*/
.background-color:#00deff\9;/*IE6、7、8识别*/
+background-color:#a200ff;/*IE6、7识别*/
_background-color:#1e0bd1;/*IE6识别*/
}
（5）IE下，可以使用获取常规属性的方法来获取自定义属性，也可以使用getAttribute()获取自定义属性；Firefox下，只能使用getAttribute()获取自定义属性解决方法：统一通过getAttribute()获取自定义属性。
（6）IE下，event对象有x、y属性，但是没有pageX、pageY属性;Firefox下，event对象有
pageX、pageY属性，但是没有x、y属性。
解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。
（7）Chrome中文界面下默认会将小于12px的文本强制按照12px显示
解决方法：
1.可通过加入CSS属性-webkit-text-size-adjust:none;解决。但是，在chrome
更新到27版本之后就不可以用了。
2.还可以使用-webkit-transform:scale(0.5);注意-webkit-transform:scale(0.75);
收缩的是整个span的大小，这时候，必须要将span转换成块元素，可以使用display：block/inline- block/...；
（8）超链接访问过后hover样式就不出现了，被点击访问过的超链接样式不再具有hover和active了解决方法：改变CSS属性的排列顺序L-V-H-A
（9）怪异模式问题：漏写DTD声明，Firefox仍然会按照标准模式来解析网页，但在IE中会触发怪异模式。为避免怪异模式给我们带来不必要的麻烦，最好养成书写DTD声明的好习惯。

问题十四：CSS 里的 visibility 属性有个 collapse 属性值是干嘛用的？在不同浏览器下以后什么区别？

（1）对于一般的元素，它的表现跟visibility：hidden;是一样的。元素是不可见的，但此时仍占用页面空间。
（2）但例外的是，如果这个元素是table相关的元素，例如table行，tablegroup，table列， tablecolumngroup，它的表现却跟display:none一样，也就是说，它们占用的空间也会释放。
在不同浏览器下的区别：
在谷歌浏览器里，使用collapse值和使用hidden值没有什么区别。
在火狐浏览器、Opera和IE11里，使用collapse值的效果就如它的字面意思：table的行会消失，它的下面一行会补充它的位置。

问题十五：width:auto 和 width:100%的区别

width:100%会使元素box的宽度等于父元素的contentbox的宽度。

width:auto会使元素撑满整个父元素，margin、border、padding、content区域会自动分配水平空间。

问题十六：绝对定位元素与非绝对定位元素的百分比计算的区别

绝对定位元素的宽高百分比是相对于临近的position不为static的祖先元素的paddingbox来计算的。

非绝对定位元素的宽高百分比则是相对于父元素的contentbox来计算的。

问题十七：简单介绍使用图片 base64 编码的优点和缺点。

base64编码是一种图片处理格式，通过特定的算法将图片编码成一长串字符串，在页面上显示的时候，可以用该字符串来代替图片的 url属性。
使用base64的优点是：
（1）减少一个图片的HTTP请求
使用base64的缺点是：
（1）根据base64的编码原理，编码后的大小会比原文件大小大1/3，如果把大图片编码到html/css中，不仅会造成文件体
积的增加，影响文件的加载速度，还会增加浏览器对html或css文件解析渲染的时间。
（2）使用base64无法直接缓存，要缓存只能缓存包含base64的文件，比如HTML或者CSS，这相比域直接缓存图片的效果要
差很多。
（3）兼容性的问题，ie8以前的浏览器不支持。

一般一些网站的小图标可以使用base64图片来引入。

问题十八：margin 重叠问题的理解。

块级元素的上外边距（margin-top）与下外边距（margin-bottom）有时会合并为单个外边距，这样的现象称为“margin合
并”。
产生折叠的必备条件：margin必须是邻接的!
而根据w3c规范，两个margin是邻接的必须满足以下条件：
•必须是处于常规文档流（非float和绝对定位）的块级盒子，并且处于同一个BFC当中。
•没有线盒，没有空隙，没有padding和border将他们分隔开
•都属于垂直方向上相邻的外边距，可以是下面任意一种情况
1、•元素的margin-top与其第一个常规文档流的子元素的margin-top
2、•元素的margin-bottom与其下一个常规文档流的兄弟元素的margin-top
3、•height为auto的元素的margin-bottom与其最后一个常规文档流的子元素的margin-bottom

4、•高度为0并且最小高度也为0，不包含常规文档流的子元素，并且自身没有建立新的BFC的元素的margin- top
和margin-bottom

margin合并的3种场景：
（1）相邻兄弟元素margin合并。
解决办法：
•设置块状格式化上下文元素（BFC）
（2）父级和第一个/最后一个子元素的margin合并。
解决办法：
对于margin-top合并，可以进行如下操作（满足一个条件即可）：

•父元素设置为块状格式化上下文元素；
•父元素设置border-top值；
•父元素设置padding-top值；
•父元素和第一个子元素之间添加内联元素进行分隔。
对于margin-bottom合并，可以进行如下操作（满足一个条件即可）： •父元素设置为块状格式化上下文元素；
•父元素设置border-bottom值；
•父元素设置padding-bottom值；
•父元素和最后一个子元素之间添加内联元素进行分隔；
•父元素设置height、min-height或max-height。
（3）空块级元素的margin合并。
解决办法：
•设置垂直方向的border；
•设置垂直方向的padding；
•里面添加内联元素（直接Space键空格是没用的）；
•设置height或者min-height。

回答总结：

margin重叠指的是在垂直方向上，两个相邻元素的margin发生重叠的情况。

一般来说可以分为四种情形：
第一种是相邻兄弟元素的marin-bottom和margin-top的值发生重叠。这种情况下我们可以通过设置其中一个元素为BFC
来解决。
第二种是父元素的margin-top和子元素的margin-top发生重叠。它们发生重叠是因为它们是相邻的，所以我们可以通过这
一点来解决这个问题。我们可以为父元素设置border-top、padding-top值来分隔它们，当然我们也可以将父元素设置为BFC 来解决。
第三种是高度为auto的父元素的margin-bottom和子元素的margin-bottom发生重叠。它们发生重叠一个是因为它们相
邻，一个是因为父元素的高度不固定。因此我们可以为父元素设置border-bottom、padding-bottom来分隔它们，也可以为父元素设置一个高度，max-height和min-height也能解决这个问题。当然将父元素设置为BFC是最简单的方法。
第四种情况，是没有内容的元素，自身的margin-top和margin-bottom发生的重叠。我们可以通过为其设置border、pa
dding或者高度来解决这个问题。

问题十九：对 BFC 规范（块级格式化上下文：blockformattingcontext）的理解？

块格式化上下文（BlockFormattingContext，BFC）是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒
子的区域，也是浮动元素与其他元素的交互限定区域。
通俗来讲：
•BFC是一个独立的布局环境，可以理解为一个容器，在这个容器中按照一定规则进行物品摆放，并且不会影响其它环境中的物品。
•如果一个元素符合触发BFC的条件，则BFC中的元素布局不受外部影响。
创建BFC
（1）根元素或包含根元素的元素
（2）浮动元素float＝left|right或inherit（≠none）
（3）绝对定位元素position＝absolute或fixed
（4）display＝inline-block|flex|inline-flex|table-cell或table-caption
（5）overflow＝hidden|auto或scroll(≠visible)

回答：

BFC指的是块级格式化上下文，一个元素形成了BFC之后，那么它内部元素产生的布局不会影响到外部元素，外部元素的布局也不会影响到BFC中的内部元素。一个BFC就像是一个隔离区域，和其他区域互不影响。
一般来说根元素是一个BFC区域，浮动和绝对定位的元素也会形成BFC，display属性的值为inline- block、flex这些
属性时也会创建BFC。还有就是元素的overflow的值不为visible时都会创建BFC。

问题二十：请解释一下为什么需要清除浮动？清除浮动的方式

浮动元素可以左右移动，直到遇到另一个浮动元素或者遇到它外边缘的包含框。浮动框不属于文档流中的普通流，当元素浮动之后，不会影响块级元素的布局，只会影响内联元素布局。此时文档流中的普通流就会表现得该浮动框不存在一样的布局模式。当包含框的高度小于浮动框的时候，此时就会出现“高度塌陷”。
清除浮动是为了清除使用浮动元素产生的影响。浮动的元素，高度会塌陷，而高度的塌陷使我们页面后面的布局不能正常显示。
清除浮动的方式：

清除浮动四种方式

因为BFC元素不会影响外部元素的特点，所以BFC元素也可以用来清除浮动的影响，因为如果不清除，子元素浮动则父元
素高度塌陷，必然会影响后面元素布局和定位，这显然有违BFC元素的子元素不会影响外部元素的设定。

问题二十一：使用 clear 属性清除浮动的原理？

使用clear属性清除浮动，其语法如下：
clear:none|left|right|both
如果单看字面意思，clear:left 应该是“清除左浮动”，clear:right 应该是“清除右浮动”的意思，实际上，这种解释是有问题的，因为浮动一直还在，并没有清除。
官方对clear属性的解释是：“元素盒子的边不能和前面的浮动元素相邻。”，我们对元素设置clear属性是为了避免浮动元素对该元素的影响，而不是清除掉浮动。还需要注意的一点是clear属性指的是元素盒子的边不能和前面的浮动元素相邻，注意这里“前面的”3个字，也就是 clear 属性对“后面的”浮动元素是不闻不问的。考虑到float属性要么是left，要么是right，不可能同时存在，同时由于 clear 属性对“后面的”浮动元素不闻不问，因此，当clear:left有效的时候，clear:right必定无效，也就是此时clear:left 等同于设置clear:both；同样地，clear:right如果有效也是等同于设置clear:both。由此可见， clear:left和clear:right这两个声明就没有任何使用的价值，至少在CSS世界中是此，直接使用clear:both吧。
一般使用伪元素的方式清除浮动
.clear::after{
   content:'';
   display:table;//也可以是'block'，或者是'list-item'
   clear:both;
}
clear属性只有块级元素才有效的，而::after等伪元素默认都是内联水平，这就是借助伪元素清除浮动影响时需要设置display属性值的原因。

问题二十一：zoom:1 的清除浮动原理?

清除浮动，触发hasLayout；
zoom属性是IE浏览器的专有属性，它可以设置或检索对象的缩放比例。解决ie下比较奇葩的bug。譬如外边距（margin）
的重叠，浮动清除，触发ie的haslayout属性等。
来龙去脉大概如下：
当设置了zoom的值之后，所设置的元素就会就会扩大或者缩小，高度宽度就会重新计算了，这里一旦改变 zoom值时其实也会发生重新渲染，运用这个原理，也就解决了ie下子元素浮动时候父元素不随着自动扩大的问题。
zoom属性是IE浏览器的专有属性，火狐和老版本的webkit核心的浏览器都不支持这个属性。然而，zoom现在已经被逐步标准化，出现在CSS3.0规范草案中。
目前非ie由于不支持这个属性，它们又是通过什么属性来实现元素的缩放呢？可以通过css3里面的动画属性 scale进行缩放。

问题二十二：CSS 优化、提高性能的方法有哪些？

加载性能：

（1）css压缩：将写好的css进行打包压缩，可以减少很多的体积。
（2）css单一样式：当需要下边距和左边距的时候，很多时候选择:margin:top0bottom0;但margin- bottom:bot tom;margin-left:left;执行的效率更高。
（3）减少使用@import,而建议使用link，因为后者在页面加载时一起加载，前者是等待页面加载完成之后再进行加载。

选择器性能：

（1）关键选择器（keyselector）。选择器的最后面的部分为关键选择器（即用来匹配目标元素的部分）。 CSS选择符是从右到左进行匹配的。当使用后代选择器的时候，浏览器会遍历所有子元素来确定是否是指定的元素等等；
（2）如果规则拥有ID选择器作为其关键选择器，则不要为规则增加标签。过滤掉无关的规则（这样样式系统就不会浪费时间去匹配它们了）。
（3）避免使用通配规则，如*{}计算次数惊人！只对需要用到的元素进行选择。
（4）尽量少的去对标签进行选择，而是用class。
（5）尽量少的去使用后代选择器，降低选择器的权重值。后代选择器的开销是最高的，尽量将选择器的深度降到最低，最高不要超过三层，更多的使用类来关联每一个标签元素。
（6）了解哪些属性是可以通过继承而来的，然后避免对这些属性重复指定规则。
渲染性能：
（1）慎重使用高性能属性：浮动、定位。
（2）尽量减少页面重排、重绘。
（3）去除空规则：｛｝。空规则的产生原因一般来说是为了预留样式。去除这些空规则无疑能减少css文档体积。
（4）属性值为0时，不加单位。
（5）属性值为浮动小数0.**，可以省略小数点之前的0。
（6）标准化各种浏览器前缀：带浏览器前缀的在前。标准属性在后。
（7）不使用@import前缀，它会影响css的加载速度。
（8）选择器优化嵌套，尽量避免层级过深。
（9）css雪碧图，同一页面相近部分的小图标，方便使用，减少页面的请求次数，但是同时图片本身会变大，使用时，优劣考虑清楚，再使用。
（10）正确使用display的属性，由于display的作用，某些样式组合会无效，徒增样式体积的同时也影响解析性能。
（11）不滥用web字体。对于中文网站来说WebFonts可能很陌生，国外却很流行。webfonts通常体积庞大，而且一些浏
览器在下载webfonts时会阻塞页面渲染损伤性能。
可维护性、健壮性：
（1）将具有相同属性的样式抽离出来，整合并通过class在页面中进行使用，提高css的可维护性。
（2）样式与内容分离：将css代码定义到外部css中。

问题二十三：浏览器是怎样解析 CSS 选择器的？

样式系统从关键选择器开始匹配，然后左移查找规则选择器的祖先元素。只要选择器的子树一直在工作，样式系统就会持续左移，直到和规则匹配，或者是因为不匹配而放弃该规则。
试想一下，如果采用从左至右的方式读取CSS规则，那么大多数规则读到最后（最右）才会发现是不匹配的，这样做会费时耗能，最后有很多都是无用的；而如果采取从右向左的方式，那么只要发现最右边选择器不匹配，就可以直接舍弃了，避免了许多无效匹配。

问题二十四：在网页中应该使用奇数还是偶数的字体？为什么呢

（1）偶数字号相对更容易和web设计的其他部分构成比例关系。比如：当我用了14px的正文字号，我可能会在一些地方用14 ×0.5=7px的margin，在另一些地方用14×1.5=21px的标题字号。
（2）浏览器缘故，低版本的浏览器ie6会把奇数字体强制转化为偶数，即13px渲染为14px。
（3）系统差别，早期的Windows里，中易宋体点阵只有12和14、15、16px，唯独缺少13px。

问题二十五：margin 和 padding 分别适合什么场景使用？

margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔。
margin用于布局分开元素使元素与元素互不相干。
padding用于元素与内容之间的间隔，让内容（文字）与（包裹）元素之间有一段距离。
何时应当使用margin：
•需要在border外侧添加空白时。
•空白处不需要背景（色）时。
•上下相连的两个盒子之间的空白，需要相互抵消时。如15px+20px的margin，将得到20px的空白。
何时应当时用padding：
•需要在border内测添加空白时。
•空白处需要背景（色）时。
•上下相连的两个盒子之间的空白，希望等于两者之和时。如15px+20px的padding，将得到35px的空白。

问题二十六：抽离样式模块怎么写，说出思路，有无实践经验？

把常用的css样式单独做成css文件……通用的和业务相关的分离出来，通用的做成样式模块儿共享，业务相关的，放
进业务相关的库里面做成对应功能的模块儿。

问题二十七：为什么不建议使用统配符初始化 css 样式？

采用*{pading:0;margin:0;}这样的写法好处是写起来很简单，但是通配符，需要把所有的标签都遍历一遍，当网站较大时，样式比较多，这样写就大大的加强了网站运行的负载，会使网站加载的时候需要很长一段时间，因此一般大型的网站都有分层次的一套初始化样式。
出于性能的考虑，并不是所有标签都会有padding和margin，因此对常见的具有默认padding和margin的元素初始化即可，并不需使用通配符*来初始化。

问题二十八：对于 hasLayout 的理解？

hasLayout是IE特有的一个属性。很多的IE下的cssbug都与其息息相关。在IE中，一个元素要么自己对自身的内容进
行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。当一个元素的hasLayout属性值为true时，它负责对自己和可能的子孙元素进行尺寸计算和定位。虽然这意味着这个元素需要花更多的代价来维护自身和里面的内容，而不是依赖于祖先元素来完成这些工作。

问题二十九：全屏滚动的原理是什么？用到了 CSS 的哪些属性？（待深入实践）

原理：有点类似于轮播，整体的元素一直排列下去，假设有5个需要展示的全屏页面，那么高度是500%，只是展100%，容器及容器内的页面取当前可视区高度，同时容器的父级元素overflow属性值设为hidden，通过更改容器可视区的位置来实现全屏滚动效果。主要是响应鼠标事件，页面通过CSS的动画效果，进行移动。
overflow：hidden；transition：all 1000 ms ease；

问题三十：什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的 IE？（待深入了解）

响应式网站设计是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。页面头部必须有meta声明的viewport。

如何兼容IE？

问题三十一：怎么让 Chrome 支持小于 12px 的文字？（！！！！！！！！！！！！！）

在谷歌下css设置字体大小为12px及以下时，显示都是一样大小，都是默认12px。
（1）可以使用Webkit的内核的-webkit-text-size-adjust的私有CSS属性来解决，只要加了-webkit- text-size -adjust:none;字体大小就不受限制了。但是chrome更新到27版本之后就不可以用了。所以高版本chrome 谷歌浏览器已经不再支持-webkit-text-size-adjust样式，所以要使用时候慎用。
（2）还可以使用css3的transform缩放属性-webkit-transform:scale(0.5);
注意-webkit- transform:scale(0. 75);收缩的是整个元素的大小，这时候，如果是内联元素，必须要将内联元素转换成块元素，可以使用 display：block/ inline-block/...；
（3）使用图片：如果是内容固定不变情况下，使用将小于12px文字内容切出做图片，这样不影响兼容也不影响美观。

问题三十二：让页面里的字体变清晰，变细用 CSS 怎么做？

webkit内核的私有属性：-webkit-font-smoothing，用于字体抗锯齿，使用后字体看起来会更清晰舒服。
在MacOS测试环境下面设置-webkit-font-smoothing:antialiased;但是这个属性仅仅是面向MacOS，其他操作系统设置后无效。

问题三十三：设备像素、css 像素、设备独立像素、dpr、ppi 之间的区别？

设备像素指的是物理像素，一般手机的分辨率指的就是设备像素，一个设备的设备像素是不可变的。
css像素和设备独立像素是等价的，不管在何种分辨率的设备上，css像素的大小应该是一致的，css像素是一个相对单位，它是相对于设备像素的，一个css像素的大小取决于页面缩放程度和dpr的大小。
dpr指的是设备像素和设备独立像素的比值，一般的pc屏幕，dpr=1。在iphone4时，苹果推出了retina屏幕，它的dpr为2。屏幕的缩放会改变dpr的值。
ppi指的是每英寸的物理像素的密度，ppi越大，屏幕的分辨率越大。

问题三十四：layoutviewport、visualviewport 和 idealviewport 的区别？

第一个视口是布局视口，在移动端显示网页时，由于移动端的屏幕尺寸比较小，如果网页使用移动端的屏幕尺寸进行布局的话，那么整个页面的布局都会显示错乱。所以移动端浏览器提供了一个layoutviewport布局视口的概念，使用这个视口来对页面进行布局展示，一般layoutviewport的大小为980px，因此页面布局不会有太大的变化，我们可以通过拖动和缩放来查看到这个页面。
第二个视口指的是视觉视口，visualviewport指的是移动设备上我们可见的区域的视口大小，一般为屏幕的分辨率的大小。visualviewport和layoutviewport的关系，就像是我们通过窗户看外面的风景，视觉视口就是窗户，而外面的风景就是布局视口中的网页内容。
第三个视口是理想视口，由于layoutviewport一般比visualviewport要大，所以想要看到整个页面必须通过拖动和缩放才能实现。所以又提出了idealviewport的概念，idealviewport下用户不用缩放和滚动条就能够查看到整个页面，并且页面在不同分辨率下显示的内容大小相同。idealviewport其实就是通过修改layoutviewport的大小，让它等于设备的宽度，这个宽度可以理解为是设备独立像素，因此根据idealviewport设计的页面，在不同分辨率的屏幕下，显示应该相同。

问题三十五：position:ﬁxed;在 android 下无效怎么处理？

因为移动端浏览器默认的viewport叫做layoutviewport。在移动端显示时，因为layoutviewport的宽度大于移动端屏幕的宽度，所以页面会出现滚动条左右移动，fixed的元素是相对layoutviewport来固定位置的，而不是移动端屏幕来固定位置的
，所以会出现感觉fixed无效的情况。如果想实现fixed相对于屏幕的固定效果，我们需要改变的是viewport的大小为idealviewport，可以如下设置：
<metaname="viewport"content="width=device-width,initial-scale=1.0,maximum- scale=1.0,minimum-sca
le=1.0,user-scalable=no"/>

问题三十六：如果需要手动写动画，你认为最小时间间隔是多久，为什么？

多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60*1000ms＝16.7ms

问题三十七：如何让去除 inline-block 元素间间距？

移除空格、使用margin负值、使用font-size:0、letter-spacing、word-spacing

去除inline-block元素间间距的N中方法

问题三十八： overﬂow:scroll 时不能平滑滚动的问题怎么处理？

以下代码可解决这种卡顿的问题：-webkit-overflow-scrolling:touch;是因为这行代码启用了硬件加速特性，所以滑动很流
畅。

问题三十九：有一个高度自适应的 div，里面有两个 div，一个高度 100px，希望另一个填满剩下的高度。

（1）外层div使用position：relative；高度要求自适应的div使用 position:absolute;top:100px;bottom:0;
left:0;right:0;
（2）使用flex布局，设置主轴为竖轴，第二个div的flex-grow为1。

其他：三种方法

问题四十：png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过 webp？

（1）第一种是BMP格式，它是无损压缩的，支持索引色和直接色的点阵图。由于它基本上没有进行压缩，因此它的文件体积一般比较大。
（2）第二种是GIF格式，它是无损压缩的使用索引色的点阵图。由于使用了LZW压缩方法，因此文件的体积很小。并且GIF还支持动画和透明度。但因为它使用的是索引色，所以它适用于一些对颜色要求不高且需要文件体积小的场景。
（3）第三种是JPEG格式，它是有损压缩的使用直接色的点阵图。由于使用了直接色，色彩较为丰富，一般适用于来存储照片。但由于使用的是直接色，可能文件的体积相对于GIF格式来说更大。
（4）第四种是PNG-8格式，它是无损压缩的使用索引色的点阵图。它是GIF的一种很好的替代格式，它也支持透明度的调整，并且文件的体积相对于GIF格式更小。一般来说如果不是需要动画的情况，我们都可以使用PNG-8格式代替GIF 格式。
（5）第五种是PNG-24格式，它是无损压缩的使用直接色的点阵图。PNG-24的优点是它使用了压缩算法，所以它的体积比BMP 格式的文件要小得多，但是相对于其他的几种格式，还是要大一些。
（6）第六种格式是svg格式，它是矢量图，它记录的图片的绘制方式，因此对矢量图进行放大和缩小不会产生锯齿和失真。它一般适合于用来制作一些网站logo或者图标之类的图片。
（7）第七种格式是webp格式，它是支持有损和无损两种压缩方式的使用直接色的点阵图。使用webp格式的最大的优点是，在相同质量的文件下，它拥有更小的文件体积。因此它非常适合于网络图片的传输，因为图片体积的减少，意味着请求时间的减小，这样会提高用户的体验。这是谷歌开发的一种新的图片格式，目前在兼容性上还不是太好。

问题四十一：浏览器如何判断是否支持 webp 格式图片

（1）宽高判断法。通过创建image对象，将其src属性设置为webp格式的图片，然后在onload事件中获取图片的宽高，如
果能够获取，则说明浏览器支持webp格式图片。如果不能获取或者触发了onerror函数，那么就说明浏览器不支持webp格
式的图片。
（2）canvas判断方法。我们可以动态的创建一个canvas对象，通过canvas的toDataURL将设置为webp格式，然后判断
返回值中是否含有image/webp字段，如果包含则说明支持WebP，反之则不支持。

问题四十二：什么是 Cookie 隔离？（或者说：请求资源的时候不要让它带 cookie 怎么做）

网站向服务器请求的时候，会自动带上cookie这样增加表头信息量，使请求变慢。

如果静态文件都放在主域名下，那静态文件请求的时候都带有的cookie的数据提交给server的，非常浪费流量，所以不如隔离开，静态资源放CDN。
因为cookie有域的限制，因此不能跨域提交请求，故使用非主要域名的时候，请求头中就不会带有cookie数据，这样可以降低请求头的大小，降低请求时间，从而达到降低整体请求延时的目的。
同时这种方式不会将cookie传入WebServer，也减少了WebServer对cookie的处理分析环节，提高了 webserver的
http请求的解析速度。

问题四十二：style 标签写在 body 后与 body 前有什么区别？

页面加载自上而下当然是先加载样式。写在body标签后由于浏览器以逐行方式对HTML文档进行解析，当解析到写在尾部的样式表（外联或写在style标签）会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染，在 windows的IE下可能会出现FOUC现象（即样式失效导致的页面闪烁问题）

问题四十三：阐述一下 CSSSprites

将一个页面涉及到的所有图片都包含到一张大图中去，然后利用CSS的background-image，background- repeat，background -position的组合进行背景定位。利用CSSSprites能很好地减少网页的http请求，从而很好的提高页面的性能；CSSSprites 能减少图片的字节。
优点：
减少HTTP请求数，极大地提高页面加载速度
增加图片信息重复度，提高压缩比，减少图片大小
更换风格方便，只需在一张或几张图片上修改颜色或样式即可实现
缺点：
图片合并麻烦
维护麻烦，修改一个图片可能需要重新布局整个图片

问题四十四：使用 rem 布局的优缺点？

优点：
在屏幕分辨率千差万别的时代，只要将rem与屏幕分辨率关联起来就可以实现页面的整体缩放，使得在设备上的展现都统一起来了。
而且现在浏览器基本都已经支持rem了，兼容性也非常的好。
缺点：
（1）在奇葩的dpr设备上表现效果不太好，比如一些华为的高端机型用rem布局会出现错乱。
（2）使用iframe引用也会出现问题。
（3）rem在多屏幕尺寸适配上与当前两大平台的设计哲学不一致。即大屏的出现到底是为了看得又大又清楚，还是为了看的更多的问
题。

问题四十五：几种常见css布局

几种常见css布局

问题四十六：为什么 height:100%会无效？

对于普通文档流中的元素，百分比高度值要想起作用，其父级必须有一个可以生效的高度值。原因是如果包含块的高度没有显式指定（即高度由内容决定），并且该元素不是绝对定位，则计算值为auto，因为解释成了auto，所以无法参与计算。
使用绝对定位的元素会有计算值，即使祖先元素的height计算为auto也是如此。

问题四十七：margin:auto 的填充规则？

margin的'auto'可不是摆设，是具有强烈的计算意味的关键字，用来计算元素对应方向应该获得的剩余间距大小。但是触发mar gin:auto计算有一个前提条件，就是width或height为auto时，元素是具有对应方向的自动填充特性的。

（1）如果一侧定值，一侧auto，则auto为剩余空间大小。
（2）如果两侧均是auto，则平分剩余空间。

问题四十八：margin 无效的情形

（1）display计算值inline的非替换元素的垂直margin是无效的。对于内联替换元素，垂直margin有效，并且没有ma
rgin合并的问题。
（2）表格中的<tr>和<td>元素或者设置display计算值是table-cell或table-row的元素的margin都是无效的。
（3）绝对定位元素非定位方位的margin值“无效”。
（4）定高容器的子元素的margin-bottom或者宽度定死的子元素的margin-right的定位“失效”。

问题四十九：什么是基线和 x-height？

字母x的下边缘（线）就是我们的基线。
x-height指的就是小写字母x的高度，术语描述就是基线和等分线（meanline）（也称作中线，midline）之间的距离。
在CSS世界中，middle指的是基线往上1/2x-height高度。我们可以近似理解为字母x交叉点那个位置。
ex是CSS中的一个相对单位，指的是小写字母x的高度，没错，就是指x-height。ex的价值就在其副业上不受字体和字号影
响的内联元素的垂直居中对齐效果。内联元素默认是基线对齐的，而基线就是x的底部，而1ex就是一个x的高度。

问题五十：什么是层叠上下文？

层叠上下文，英文称作stackingcontext，是HTML中的一个三维的概念。如果一个元素含有层叠上下文，我们可以理解为这个元素在z轴上就“高人一等”。
层叠上下文元素有如下特性：
（1）层叠上下文的层叠水平要比普通元素高（原因后面会说明）。
（2）层叠上下文可以阻断元素的混合模式。
（3）层叠上下文可以嵌套，内部层叠上下文及其所有子元素均受制于外部的“层叠上下文”。
（4）每个层叠上下文和兄弟元素独立，也就是说，当进行层叠变化或渲染的时候，只需要考虑后代元素。
（5）每个层叠上下文是自成体系的，当元素发生层叠的时候，整个元素被认为是在父层叠上下文的层叠顺序中。
层叠上下文的创建：
（1）页面根元素天生具有层叠上下文，称为根层叠上下文。根层叠上下文指的是页面根元素，可以看成是 <html>元素。因此，页面中所有的元素一定处于至少一个“层叠结界”中。
（2）对于position值为relative/absolute以及Firefox/IE浏览器（不包括Chrome浏览器）下含有 position:fixed声明的定位元素，当其z-index值不是auto的时候，会创建层叠上下文。Chrome等 WebKit内核浏览器下，position:fixed元素天然层叠上下文元素，无须z-index为数值。根据我的测试，目前IE和Firefox仍是老套路。
（3）其他一些CSS3属性，比如元素的opacity值不是1。

问题五十一：什么是层叠水平？

层叠水平，英文称作stackinglevel，决定了同一个层叠上下文中元素在z轴上的显示顺序。
显而易见，所有的元素都有层叠水平，包括层叠上下文元素，也包括普通元素。然而，对普通元素的层叠水平探讨只局限在当前层叠上下文元素中。

问题五十二：元素的层叠顺序？

层叠顺序，英文称作 stackingorder，表示元素发生层叠时有着特定的垂直显示顺序。

问题五十二：层叠准则？

（1）谁大谁上：当具有明显的层叠水平标识的时候，如生效的z-index属性值，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个。
（2）后来居上：当元素的层叠水平一致、层叠顺序相同的时候，在DOM流中处于后面的元素会覆盖前面的元素。

问题五十三：隐藏元素的 background-image 到底加不加载？

回答：
-（1）元素的背景图片
-元素本身设置 display:none，会请求图片 -父级元素设置 display:none，不会请求图片 -样式没有元素使用，不会请求
-:hover 样式下，触发时请求
-（2）img 标签图片任何情况下都会请求图片
详细资料可以参考：
CSS控制前端图片HTTP请求的各种情况

问题五十四：.如何实现单行／多行文本溢出的省略（...）？

/*单行文本溢出*/ 
p{ 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
} 
/*多行文本溢出*/ 
p{ 
    position: relative; 
    line-height: 1.5em; 
    /*高度为需要显示的行数*行高，比如这里我们显示两行，则为3*/ height: 3em; 
    overflow: hidden; 
} 
p:after { 
    content: "..."; 
    position: absolute; 
    bottom: 0; 
    right: 0; 
    background-color: #fff; 
}

问题五十五：常见的元素隐藏方式？

-（1）使用 display:none;隐藏元素，渲染树不会包含该渲染对象，因此该元素不会在页面中占据位置，也不会响应绑定的监听事件。
-（2）使用 visibility:hidden;隐藏元素。元素在页面中仍占据空间，但是不会响应绑定的监听事件。
-（3）使用 opacity:0;将元素的透明度设置为 0，以此来实现元素的隐藏。元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件。
-（4）通过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏。
-（5）通过 z-index 负值，来使其他元素遮盖住该元素，以此来实现隐藏。
-（6）通过 clip/clip-path 元素裁剪的方法来实现元素的隐藏，这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。
-（7）通过 transform:scale(0,0)来将元素缩放为 0，以此来实现元素的隐藏。这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。

css隐藏元素的8中方法

问题五十六：css 实现上下固定中间自适应布局？

利用绝对定位实现
body { 
	padding: 0; 
	margin: 0; 
} 
.header { 
	position: absolute; 
	top: 0; 
	width: 100%; 
	height: 100px; 
	background: red; 
} 
.container { 
	position: absolute; 
	top: 100px; 
	bottom: 100px; 
	width: 100%; 
	background: green; 
} 
.footer { 
	position: absolute; 
	bottom: 0; 
	height: 100px; 
	width: 100%; 
	background: red; 
} 
利用flex布局实现html, 
body { 
	height: 100%; 
}
body { 
	display: flex; 
	padding: 0; 
	margin: 0; 
	flex-direction: column; 
} 
.header { 
	height: 100px; 
	background: red; 
} 
.container { 
	flex-grow: 1; 
	background: green; 
} 
.footer { 
	height: 100px; 
	background: red; 
}

css实现上下固定中间自适应布局方法

问题五十七：css 两栏布局的实现？

/*两栏布局一般指的是页面中一共两栏，左边固定，右边自适应的布局，一共有四种实现的方式。*/ 
/*以左边宽度固定为200px为例*/ 
/*（1）利用浮动，将左边元素宽度设置为200px，并且设置向左浮动。
将右边元素的margin-left设置为 200px，宽度设置为auto（默认为auto，撑满整个父元素）。*/ 
.outer { 
	height: 100px; 
} 
.left { 
	float: left; 
	height: 100px; 
	width: 200px; 
	background: tomato; 
} 
.right { 
	margin-left: 200px; 
	width: auto; 
	height: 100px; 
	background: gold; 
}
/*（2）第二种是利用flex布局，将左边元素的放大和缩小比例设置为0，
基础大小设置为200px。将右边的 元素的放大比例设置为1，缩小比例设置为1，基础大小设置为auto。*/ 
.outer { 
	display: flex; 
	height: 100px; 
} 
.left { 
	flex-shrink: 0; 
	flex-grow: 0; 
	flex-basis: 200px; 
	background: tomato; 
} 
.right { 
	flex: auto; 
	/*11auto*/ 
	background: gold; 
} 

/*（3）第三种是利用绝对定位布局的方式，将父级元素设置相对定位。
左边元素设置为absolute定位，并 且宽度设置为 
200px。将右边元素的margin-left的值设置为200px。*/ 
.outer { 
	position: relative; 
	height: 100px; 
} 
.left { 
	position: absolute; 
	width: 200px; 
	height: 100px; 
	background: tomato; 
} 
.right { 
	margin-left: 200px; 
	height: 100px; 
	background: gold; 
} 
/*（4）第四种还是利用绝对定位的方式，将父级元素设置为相对定位。
左边元素宽度设置为200px，右边元 素设置为绝对定位，左边定位为200px，其余方向定位为0。*/ 
.outer { 
	position: relative; 
	height: 100px; 
} 
.left { 
	width: 200px;
	height: 100px; 
	background: tomato;
}
.right { 
	position: absolute; top: 0; 
	right: 0; 
	bottom: 0; 
	left: 200px; 
	background: gold; 
} 
dom演示

回答：
两栏布局一般指的是页面中一共两栏，左边固定，右边自适应的布局，一共有四种实现的方式。以左边宽度固定为 200px 为例
-（1）利用浮动，将左边元素宽度设置为 200px，并且设置向左浮动。将右边元素的 margin-left 设置为 200px，宽度设置为 auto（默认为 auto，撑满整个父元素）。
-（2）第二种是利用 ﬂex 布局，将左边元素的放大和缩小比例设置为 0，基础大小设置为 200px。将右边的元素的放大比例设置为 1，缩小比例设置为 1，基础大小设置为 auto。
-（3）第三种是利用绝对定位布局的方式，将父级元素设置相对定位。左边元素设置为 absolute 定位，并且宽度设置为 200px。将右边元素的 margin-left 的值设置为 200px。
-（4）第四种还是利用绝对定位的方式，将父级元素设置为相对定位。左边元素宽度设置为 200px，右边元素设置为绝对定位，左边定位为 200px，其余方向定位为 0。

问题五十八：css 三栏布局的实现？

/*三栏布局一般指的是页面中一共有三栏，左右两栏宽度固定，中间自适应的布局，
一共有五种实现方式。 
这里以左边宽度固定为100px，右边宽度固定为200px为例。*/ 
/*（1）利用绝对定位的方式，左右两栏设置为绝对定位，中间设置对应方向大小的margin的值。*/ 
.outer { 
	position: relative; 
	height: 100px; 
} 
.left { 
	position: absolute; 
	width: 100px; 
	height: 100px; 
	background: tomato; 
} 
.right { 
	position: absolute;
	top: 0; 
	right: 0; 
	width: 200px; 
	height: 100px; 
	background: gold; 
}
.center { 
	margin-left: 100px; 
	margin-right: 200px; 
	height: 100px; 
	background: lightgreen; 
} 
/*（2）利用flex布局的方式，左右两栏的放大和缩小比例都设置为0，
基础大小设置为固定的大小，中间一 栏设置为auto*/ 
.outer { 
	display: flex; 
	height: 100px; 
} 
.left { 
	flex: 00100px; 
	background: tomato; 
} 
.right { 
	flex: 00200px; 
	background: gold; 
} 
.center { 
	flex: auto; 
	background: lightgreen; 
} 
/*（3）利用浮动的方式，左右两栏设置固定大小，并设置对应方向的浮动。
中间一栏设置左右两个方向的 margin值，注意这种方式，中间一栏必须放到最后。*/ 
	.outer { 
	height: 100px; 
} 
.left { 
	float: left; 
	width: 100px; 
	height: 100px; 
	background: tomato; 
} 
.right { 
	float: right; 
	width: 200px; 
	height: 100px; 
	background: gold; 
} 
.center { 
	height: 100px; 
	margin-left: 100px; 
	margin-right: 200px; 
	background: lightgreen; 
} 
/*（4）双飞翼布局，利用浮动和负边距来实现。父级元素设置左右的pedding，
三列均设置向左浮动，中间 一列放在最前面，宽度设置为父级元素的宽度，
因此后面两列都被挤到了下一行，通过设置margin负值将其 移动到上一行，
再利用相对定位，定位到两边。*/ 
.outer { 
	height: 100px; 
	padding-left: 100px; 
	padding-right: 200px; 
} 
.left { 
	position: relative; 
	left: -100px; 
	float: left; 
	margin-left: -100%; 
	width: 100px; 
	height: 100px; 
	background: tomato; 
} 
.right { 
	position: relative; 
	left: 200px; 
	float: right; 
	margin-left: -200px; 
	width: 200px; 
	height: 100px; 
	background: gold; 
} 
.center { 
	float: left; 
	width: 100%; 
	height: 100px; 
	background: lightgreen; 
} 
/*（5）双飞翼布局，双飞翼布局相对于圣杯布局来说，
左右位置的保留是通过中间列的margin值来实现的， 而不是通过父元 
素的pedding来实现的。本质上来说，也是通过浮动和外边距负值来实现的。*/ 
.outer { 
	height: 100px; 
} 
.left { 
	float: left; 
	margin-left: -100%; 
	width: 100px; 
	height: 100px; 
	background: tomato; 
}
.right { 
	float: left; 
	margin-left: -200px; 
	width: 200px; 
	height: 100px; 
	background: gold; 
} 
.wrapper { 
	float: left; 
	width: 100%; 
	height: 100px; 
	background: lightgreen; 
} 
.center { 
	margin-left: 100px; 
	margin-right: 200px; 
	height: 100px; 
} 
三栏布局dom演示

回答：

三栏布局一般指的是页面中一共有三栏，左右两栏宽度固定，中间自适应的布局，一共有五种实现方式。

这里以左边宽度固定为100px，右边宽度固定为200px为例。
（1）利用绝对定位的方式，左右两栏设置为绝对定位，中间设置对应方向大小的margin的值。
（2）利用flex布局的方式，左右两栏的放大和缩小比例都设置为0，基础大小设置为固定的大小，中间一栏设置为auto。
（3）利用浮动的方式，左右两栏设置固定大小，并设置对应方向的浮动。中间一栏设置左右两个方向的 margin值，注意这种方式，中间一栏必须放到最后。
（4）圣杯布局，利用浮动和负边距来实现。父级元素设置左右的pedding，三列均设置向左浮动，中间一列放在最前面，宽度设置为父级元素的宽度，因此后面两列都被挤到了下一行，通过设置margin负值将其移动到上一行，再利用相对定位，定位到两边。双飞翼布局中间列的宽度不能小于两边任意列的宽度，而双飞翼布局则不存在这个问题。
（5）双飞翼布局，双飞翼布局相对于圣杯布局来说，左右位置的保留是通过中间列的margin值来实现的，而不是通过父元素的pedding来实现的。本质上来说，也是通过浮动和外边距负值来实现的。

问题五十九：实现一个宽高自适应的正方形

/*1.第一种方式是利用vw来实现*/ 
.square { 
    width: 10%; 
    height: 10vw; 
    background: tomato; 
} 
/*2.第二种方式是利用元素的margin/padding百分比是相对父元素width的性质来实现*/ .square { 
   width: 20%; 
   height: 0; 
   padding-top: 20%; 
   background: orange; 
} 
/*3.第三种方式是利用子元素的margin-top的值来实现的*/ 
.square { 
    width: 30%; 
    overflow: hidden; 
    background: yellow; 
} 
.square::after { 
    content: ""; 
    display: block; 
    margin-top: 100%; 
}

自适应正方形dom演示

问题六十：实现一个三角形

/*三角形的实现原理是利用了元素边框连接处的等分原理。*/ 
.triangle { 
  width: 0; 
  height: 0; 
  border-width: 100px; 
  border-style: solid; 
  border-color: pink   transparent   transparent   transparent;
}

dom演示

问题六十一：一个自适应矩形，水平垂直居中，且宽高比为 2:1

/*实现原理参考自适应正方形和水平居中方式*/ 
.box { 
	position: absolute; 
	top: 0; 
	right: 0; 
	left: 0; 
	bottom: 0; 
	margin: auto; 
	width: 10%; 
	height: 0; 
	padding-top: 20%; 
	background: tomato; 
}

1planet

关注

4
点赞
踩
31

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML、CSS、JavaScript常见面试问题的总结（css篇）

CSS 面试知识点总结问题一：介绍一下标准的 CSS 的盒子模型？低版本 IE 的盒子模型有什么不同的？相关知识点：（1）有两种盒子模型：IE盒模型（border-box）、W3C标准盒模型（content-box）（2）盒模型：分为内容（content）、填充（padding）、边界（margin）、边框（border）四个部分IE盒模型和W3C标准盒模型的区别：（1）W3C标准盒模型：属性width，height只包含内容content，不包含border和padding（2）
复制链接

扫一扫