2020---css面试题

4、CSS选择器

4.1   css兼容性问题

5、BFC

6、清除浮动的方法

①给设置了浮动的元素的父级加高。

②给设置了浮动的元素的父级设置overflow：hidden。如果需要兼容IE，在添加一个zoom：1

③给需要清除浮动的元素设置clear：both；

④在最后一个子元素的后面加一个空的div，给它样式属性 clear:both（不推荐）

⑤伪类清除：.clearfix：after{content：""；clear：both；display：block；}

.clearfix{zoom：1}

<div class="container clearfix">
	<div class="box"></div>
</div>	
<div class="main "></div>

.box{
	width:100px;
	height:100px;
	background:yellow;
	float: left;
}
.main{
	width:150px;
	height: 150px;
	background:red;
}
.clearfix:after{
	content: "";
	clear: both;
	display: block;
}
.clearfix{
	zoom:1;
}
复制代码

7、层叠上下文

通元素设置position属性为非static值并设置z-index属性为具体数值，产生层叠上下文。

8、常见页面布局

⑴静态布局：最传统、原始的Web布局设计。网页最外层容器(outer)有固定的大小,所有的内容以该容器为标准,超出宽高的部分用滚动条(overflow:scroll)来实现滚动查阅。

优点：采用的是css2之前的写法,不存在浏览器兼容性。布局简单。

缺点：但是移动端不可以使用pc端的页面,两个页面的布局不一致,移动端需要自己另外设计一个布局并使用不同域名呈现。

⑵流式布局：流式布局也叫百分比布局。随着屏幕的改变，页面的布局没有发生大的变化，可以进行适配调整，这个正好与自适应布局相补。

优点：元素的宽高用百分比做单位，元素宽高按屏幕分辨率调整，布局不发生变化。

缺点：屏幕尺度跨度过大的情况下，页面不能正常显示。

⑶弹性布局：弹性布局是CSS3引入的强大的布局方式，弹性盒模型：display：flex；

优点：简单、方便、快速

缺点：CSS3新特性,浏览器兼容性非常头疼。而且手机浏览器对flex的支持也不是很理想。

⑷响应式布局：采用自适应布局和流式布局的综合方式，为不同屏幕分辨率范围创建流式布局。利用媒体查询可以检测到屏幕的尺寸(主要检测宽度)，并设置不同的CSS样式，就可以实现响应式的布局。

9、CSS预处理，后处理

CSS预处理器：用一种编程语言，为CSS增加了一些编程的特性，最终编译出css文件。比如sass、less、stylus。

优点：语言级逻辑处理，动态特性，改善项目结构

缺点：采用特殊语法，框架耦合度高，复杂度高

实现原理：

CSS后处理器：堆css进行处理，并最终生成css的预处理器，属于广义上的css预处理器，最典型的就是css压缩工具(clean-css)，流行的Autoprefixer，以Clean I Use上的浏览器支持数据为基础，自动处理兼容性问题

优点：使用 CSS 语法，容易进行模块化，贴近 CSS 的未来标准

缺点：逻辑处理能力有限

实现原理：

10、CSS3的新特性

新增一：rgba（简单不做解释）；

新增二：弹性布局flex（上面第二题）；

新增三：媒体查询；

新增四：渐变色；

新增五：动画animation，使用@keyframes定义，使用的元素animation：名字 时间；

@keyframes changeWidth{
    0%{width:100px}
    100%{width:800px}
}
div{
    width:100px;
    height:100px;
    background:red;
    animation:changeWidth 10s forwards;
}复制代码

animation的6个值：

第三个值：

第五个值：

第六个值：

11、display有哪些值

//原来
<span>1</span>
<span>2</span>
<span>3</span>

//改变
<span>1</span><span>2</span><span>3</span>复制代码

<metaname="viewport" content="width=device-width,initial-scale=1.0">复制代码

14、CSS实现宽度自适应100%，宽高16：9的比例的矩形

*{    
   margin:0;    
   padding:0;
}
.wrap{    
    width:20%;
}
.box{    
    kground:pink;
}
.box p{    
    width:100%;    
    height:100%;    
    position: absolute;    
    color:#666;
}复制代码

<div class="wrap">    <div class="box">        <p>13</p>    </div></div>复制代码

16、画三角形

div{
    width:0;
    height:0;
    border-top:50px solid transparent;
    border-left:50px solid transparent;
    border-right:50px solid transparent;
    border-bottom:50px solid red;
}复制代码

注：上述三角形为正三角形，如果想要倒三角形，那么将border-top的值设为50px solid red，其余的属性值相同。

17、1像素边框问题

为什么会有1像素边框问题：在开发中，在移动端css里面写了1px，实际看起来比1px粗。这就关系到物理像素和逻辑像素的问题了，开发中UI设计师要求的1px是指设备的物理像素1px，而css里记录的像素是逻辑像素，它们之间存在一个比例关系，可以用window.devicePixelRadio来获取，也可以用媒体查询的-webkit-min-device-pixel-ratio来获取，比例的多少与设备相关。iphone的devicePixelRatio == 2，而我们设置的border：1px 描述的是设备的独立像素，所以被放大到物理像素2px显示，在iphone上就显的比较粗。

解决方案：

⑴媒体查询利用设备像素比缩放，设置小数像素。

.box{border:1px solid #333}
@media screen and (-webkit-min-device-pixel-ratio:2){
    .box{border:1px solid #333}
}
@media screen and (-webkit-min-device-pixel-radio:3){
    .border{border:0.333333px solid #333}
}复制代码

⑵设置border-image方案

缺点：需要制作图片，圆角可能会出现模糊。

.border-image-1px{
    border-width:1px 0px;
    -webkit-border-image:url("border.png")2 0 strech;
    border-image:url("border.png")2 0 stretch;
}复制代码

⑶box-shadow方案

优点是没有圆角问题。缺点是颜色不好控制。

.box{
    -webkit-box-shadow:0 1px 1px -1px rgba(0,0,0,.5);
}复制代码

参数：水平阴影位置，垂直阴影位置，模糊距离，阴影尺寸，阴影颜色，将外部阴影改为内部阴影。

⑷transform：scale(0.5)方案（推荐）：

以上的方案，思想其实都是将1px缩小为0.5px来展示，然而0.5px并不是所有的设备或浏览器都支持。其实1像素问题的产生基本发生在设置边框或分割线的时候，场景并不覆盖全局样式，因此，直接缩放需要设置的元素，才是我们真正需求的。transform就可以实现。

①设置height：1px，根据媒体查询结合transform缩放为相应的尺寸

.box{
    height:1px;
    background:#333;
    -webkit-transform:scaleY(0.5);
    -webkit-transform-origin:0 0;
    overflow:hidden;
}复制代码

②用: :after和: :before，设置border-bottom：1px solid #000；，然后缩放-webkit-transform：scaleY(0.5)；可以实现两根边线的需求；

.box::after{
    content:"";
    width:100%;
    border-bottom:1px solid #000;
    transform:scaleY(0.5);
}复制代码

③用: :after设置border：1px solid #000；width：200%；height：200%；然后缩放scaleY(0.5)；优点可以实现圆角京东就是这么实现的，缺点是按钮添加active比较麻烦。

.div::after {
    content: '';
    width: 200%;
    height: 200%;
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid #bfbfbf;
    border-radius: 4px;
    -webkit-transform: scale(0.5,0.5);
    transform: scale(0.5,0.5);
    -webkit-transform-origin: top left;
}复制代码

18，H5性特性

CSS3 新特性

:last-child /* 选择元素最后一个孩子 */
:first-child /* 选择元素第一个孩子 */
:nth-child(1) /* 按照第几个孩子给它设置样式 */
:nth-child(even) /* 按照偶数 */
:nth-child(odd)  /* 按照奇数 */
:disabled /* 选择每个禁用的E元素 */
:checked /* 选择每个被选中的E元素 */
:not(selector) /* 选择非 selector 元素的每个元素 */
::selection /* 选择被用户选取的元素部分 */

Ⅰ.多余隐藏加省略号