面试 - CSS基础

重绘与回流

重绘(Repaint)：重绘是当节点需要更改外观而不会影响布局的,比如改变background-color就叫称为重绘

回流(Reflow)：回流是布局或者几何属性需要改变就称为回流。

回流必定会发生重绘,重绘不一定会引发回流。回流所需的成本比重绘高的多,改变父节点里的子节点很可能会导致父节点的一系列回流。

导致回流的操作：

改变盒子大小、改变字体、添加或删除样式、字改变、定位或者浮动、盒模型添加删除标签、获取盒子宽高。

减少回流的操作：

使用css3的transform、减少display的使用、Css选择符从右往左匹配查找，避免节点层级过多

什么叫优雅降级和渐进增强？两者有什么区别？

优雅降级: 是指一开始就构建完整的 功能，然后再针对低版本浏览器进行兼容
**渐进增强:**是指针对低版本浏览器构建页面 ，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进并追加功能 ，以达到更好的用户体验
两者的区别如下
( 1 ）优雅降级从复杂的现状开始，并试图减少用户体验的供给。
( 2）渐进增强则从一个非常基础并且能够起作用的版本开始，并不断扩元，以适应未来环境的需要.
( 3 ）降级（功能衰减）意味着往回看，而渐进增强则意味着朝前看 同时保证其根基处于安全地带。

谈谈盒子模型？

在标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

IE盒子模型中，width 和 height 指的是内容区域+border+padding的宽度和高度。

谈谈你对 BFC 、IFC、 GFC、FFC规范的理解。

BFC（格式化上下文），一个创建了新的BFC的盒子是独立布局的，盒子内元素的布局不会影响盒子外面的元素。在同一个BFC中的两个相邻的盒子在垂直方向会发生margin重叠的问题。BFC是值浏览器中创建了一个独立的渲染区域，该区域内所有元素的布局不会影响到区域外元素的布局，这个渲染区域只对块级元素起作用

IFC( Inline Formatting Context ）指内联格式化上下文 IFC 的线柜（ line box ) 高度由其包含行内元素中最高的实际高度计算而来（不受竖直方向的 padding margin的影响） IFC 中的线框一般左右都贴紧整个 IFC ，但是会被 float 元素扰乱 同一个 IFC
的多个线柜高度不同 IFC 中是不可能有块级元素的，当插入块级元素时（如在 中插入div ，会产生两个匿名块，两者 div 分隔开，即产生两个 IFC 每个 IFC 对外表现为块级元素，与 div 垂直排列。
**GFC **( GridLayout Formatting Context ）指网格布局格式化上下文，即当把一个元素的 display 值设为 grid 的时候 ，此元素将会获得 个独立的渲染区域 可以通过在网格容器（ grid container ）上定义网格定义行（ grid definition row ）和网格定义列（ grid
definition column ），在网格项目（ grid item 定义网格行（ grid row ）和网格列（ grid column ）来为每一个网格项目定义位置和空间。
**FFC **(Flex Formatting Context ）指自适应格式化上下文，即 sp la 值为 flex in line-flex 的元素将会生成自适应容器。伸缩容器中的每 个子元素都是 个伸缩单元伸缩单元可以是任意数量的 伸缩羊元内和伸缩容器外的 切元素都不受影响 简单地说， exbox 定义了伸 缩容器 内伸缩单元的布局。

常见的盒子垂直居中的方法有哪些请举例3种？

① 利用定位子绝父相定位的方式来实现

#container{
    width:500px;
    height:500px;
    position:relative;
}
#center{
    width:100px;
    hight:100px;
     position: absolute;
     top: 50%;
     left: 50%;
    margin-top:-50px;
    margin-left:-50px;
    
}

② 利用Css3的transform，可以轻松的在未知元素的高宽的情况下实现元素的垂直居中。

#container{
    position:relative;
}
#center{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

③ ** flex**

#container{
    display:flex;
    justify-content:center;
    align-items: center;
}

#center{

}

清除浮动的方法有哪些？

为什么要清除浮动，因为浮动的盒子脱离标准流，如果父盒子没有设置高度的话，下面的盒子就会撑上来。

1.额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）（不推荐）

2.父级添加overflow属性（父元素添加overflow:hidden）（不推荐）

3.使用after伪元素清除浮动（推荐使用）

    .clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
    }
    .clearfix{
        *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
｝

4.使用before和after双伪元素清除浮动

 .clearfix:after,.clearfix:before{
        content: "";
        display: table;
    }
    .clearfix:after{
        clear: both;
    }
    .clearfix{
        *zoom: 1;
    }

设备像素、css 像素、设备独立像素、dpr、ppi 之间的区别？

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

em rem px pt vw vh

• px
• 像素 Pixels，是一种绝对单位，是一个虚拟长度单位，是计算机系统的数字化图像长度单位。像素是相对于显示器屏幕分辨率而言的，使用该单位的元素，不会因为其它元素的尺寸变化而变化。
• pt
  即磅 Points，是一种绝对单位，是物理长度单位，等于 1/72 寸
• em
  相对单位，参考基准为父节点字体的大小（表示相对于父元素的字体大小）
• rem
  即 root em，和 em 一样，它也是相对长度单位，以 body 的 font-szie 为基准值进行计算；
• vh/vw
  视口百分比（viewport-percentage lengths，其中包含了 vh、vw、vmin 和 vmax 四个单位，这四个单位都是相对长度单位;
  vh：基于可视区域的高度百分比，如：height: 10vh；
  vw：基于可视区域的宽度百分比，如：width: 10vw；
  vmin 和 vmax：二者都是从宽度或高度重选择最大或最小的百分比；
• 百分比 %
  百分比也是常用的长度单位，它始终相对于父元素对应的属性，即和父级的属性一一对应。如：width: 100% 等于父级宽度的 100%,但不包含父级的 padding；font-size: 120% 等于父级字号的 120%。

常见的元素隐藏方式？

• display:none; 页面中不占位，不会响应绑定的监听事件;
• visibility:hidden; 页面中占位，不会响应绑定的监听事件;
• opacity:0; 页面中占位，会响应绑定的监听事件;
• 使用定位移除可视区域内;
• z-index 负值;
• 通过 clip/clip-path 元素裁剪的方法实现，页面中占位，不会响应绑定的监听事件;
• transform:scale(0,0); 页面中占位，不会响应绑定的监听事件;

定位 position

• static 静态定位（不脱标，并且不能进行z-index分层）
• HTML文档元素的默认值，不受top、bottom、left、right属性影响；
• relative相对定位（不脱标，可以使用z-index进行分层）
  相对自身位置定位。
• absolute绝对定位（脱标，可以使用z-index 进行分层）
• 它的起始位置为最近的position值不是static的父元素，若没有则是以HTML为准，由top、bottom、left、right确定最终位置；
• fixed固定定位（脱标）
  它的起始起始位置相对于视口且是固定位置不随滚动条的滑动而滚动；
• sticky粘性定位（脱标）
  它的相对偏移是相对于父标签而言，设置top等值只会在父标签中sticky；

说一说png、jpg、gif 、svg等图片格式，有没有了解过 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格式的最大的优点是，在相同质量的文件下，它拥有更小的文件体积。因此它非常适合于网络图片的传输，因为图片体积的减少，意味着请求时间的减小，
  这样会提高用户的体验。这是谷歌开发的一种新的图片格式，目前在兼容性上还不是太好。

怎么让 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**，其他操作系统设置后无效。

画一条 0.5px 的线

1. 采用meta viewport的方式
2. 采用border-image的方式
3. 采用transform:scale()的方式

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

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

伪类用于当已有的元素处于某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过:hover来描述这个元素的状态。
伪元素用于创建一些不在文档树中的元素，并为其添加样式。它们允许我们为元素的某些部分设置样式。比如说，我们可以通过::before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。

如何实现单行／多行文本溢出的省略？

/*单行文本溢出*/
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;
}