前端面试题（CSS篇）

ゞ浴缸里的玫瑰 2022-02-01 11:57 278阅读 0赞

## CSS篇 ##

**1、介绍一下标准CSS的盒模型？低版本IE的盒子模型有什么不同的？**  
**IE盒子模型**、**W3C盒子模型**  
盒模型：内容（`content`）、填充（`padding`）、边界（`margin`）、边框（`border`）  
区别：IE 的`content`部分把`border`和`padding`计算了进去；  
在CSS3中引入了`box-sizing`属性，它可以允许改变默认的CSS盒模型对元素宽高的计算方式，共包括两个选项  
`content-box`：标准盒模型，CSS定义的宽高只包含`content`的宽高  
`border-box`：IE模型，CSS定义的宽高包括了`content`，`padding`和`border`

**2、CSS选择符有哪些？哪些属性可以继承？**  
id选择器（`#myid`）  
类选择器（`.myclassname`）  
标签选择器（`div, h1, p`）  
相邻选择器（`h1+p`）  
子选择器（`ul>li`）  
后代选择器（`li a`）  
通配符选择器（`*`）  
属性选择器（`a[rel="external"]`）  
伪类选择器（`a:hover, li:nth-child`）  
可继承的样式：`font-size font-family color, ul li dl dd dt;`  
不可继承的样式：`border padding margin width height;`

**4、CSS3新增伪类有哪些？**  
`p:first-of-type` 选择属于其父元素的首个`<p>`元素的每个`<p>`元素  
`p:last-of-type` 选择属于其父元素的最后`<p>`元素的每个`<p>`元素  
`p:only-of-type` 选择属于其父元素的唯一子元素的每个`<p>`元素  
`p:only-child` 选择属于其父元素的唯一子元素的每个`<p>`元素  
`p:nth-child(2)` 选择属于其父元素的第二个子元素的每个`<p>`元素  
`:after` 在元素之前添加内容，也可以用来做清除浮动  
`:before` 在元素之后添加内容  
`:disabled` 控制表单控件的禁用状态  
`:checked` 单选框或复选框被选中

**5、如何居中div**

*  负margin方法  
    CSS代码

.container {
    	width: 500px;
    	height: 400px;
    	border: 2px solid #cfc;
    	position: relative;
    }
    .inner {
    	width:480px;
    	height: 380px;
    	background-color: limegreen;
    	position: absolute;
    	top: 50%;
    	left: 50%;
    	margin-top: -190px; /*height的一半*/
    	margin-left: -240px; /*width的一半*/ 
    }

HTML代码

这里，我们首先用`top:50%`和`left:50%`让`inner`的坐标原点（左上角）移动到`container`的中心，然后再利用负`margin`让它往左偏移自身宽的一半，再往上偏移自身高的一半，这样`inner`的中心点就跟`container`的中心点对齐了。

*  table-cell方法  
    CSS代码：

div{    
         width: 300px; 
         height: 300px; 
         border: 3px solid #555; 
         display: table-cell; 
         vertical-align: middle; 
         text-align: center; 
    }
    img{
         vertical-align: middle; 
    }

HTML代码：

通过将盒子转换为`table`元素，`table`元素本身是可以通过属性来控制位置，`div`上面的`vertical-align: middle`是控制垂直方向上的居中的，而`text-align: center`是控制水平方向的

*  弹性盒子法  
    CSS代码：

.container{
    	width: 300px; 
        height: 200px; 
        border: 3px solid #546461; 
        display: -webkit-flex; 
        display: flex; 
        -webkit-align-items: center; 
        align-items: center; 
        -webkit-justify-content: center; 
        justify-content: center;  
    } 
    .inner{
        border: 3px solid #458761; 
        padding: 20px;  
    }

HTML代码：

<div class="container"> 
         <div class="inner"> 
             我在容器中水平垂直居中 
         </div> 
    </div>

`align-items`控制**垂直方向的居中**，`justify-content`控制**水平方向的居中**。这是`CSS3`的新方法

*  位移方法  
    位移方法和`margin`定位方法一样，只不过吧`margin`改成了位移不需要计算一半是多少，直接 `transform:translate(-50%,--50%)`

**6、display有哪些值？说明他们的作用**  
`block` 象块类型元素一样显示。  
`none` 缺省值。象行内元素类型一样显示。  
`inline-block` 象行内元素一样显示，但其内容象块类型元素一样显示。  
`list-item` 象块类型元素一样显示，并添加样式列表标记。  
`table` 此元素会作为块级表格来显示  
`inherit` 规定应该从父元素继承 display 属性的值

**7，position的值relative和absolute定位原点是？**  
`absolute` 生成绝对定位的元素，相对于值不为 `static`的第一个**父元素**进行定位。  
`fixed` （老IE不支持） 生成绝对定位的元素，相对于**浏览器窗口**进行定位。  
`relative` 生成相对定位的元素，相对于其**正常位置**进行定位。  
`static` 默认值。**没有定位**，元素出现在正常的流中（忽略 `top, bottom, left, right z-index` 声明）。  
`inherit` 规定从**父元素继承 `position`** 属性的值。

**8，CSS3有哪些新特性？**  
新增各种CSS选择器 （`: not(.input`)：所有 `class` 不是“`input`”的节点）  
圆角 （`border-radius:8px`）  
多列布局 （`multi-column layout`）  
阴影和反射 （`Shadow\Reflect`）  
文字特效 （`text-shadow`）  
文字渲染 （`Text-decoration`）  
线性渐变 （`gradient`）  
旋转 （`transform`）  
增加了旋转,缩放,定位,倾斜,动画，多背景

transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation:

**9，用纯CSS创建一个三角形的原理是什么？**  
把上、左、右三条边隐藏掉（颜色设为 `transparent`）

#demo {
       width: 0;
       height: 0;
       border-width: 20px;
       border-style: solid;
       border-color: transparent transparent red transparent;
    }

**10，一个满屏 品 字布局 如何设计?**  
简单的方式：  
上面的`div`宽`100%`，  
下面的两个`div`分别宽`50%`，  
然后用`float`或者`inline`使其不换行即可

**11，li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？**  
行框的排列会受到中间空白（回车\\空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了。

**16，请解释一下为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式**  
浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。  
1.使用空标签清除浮动。  
这种方法是在所有浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增加了无意义标签。  
2.使用`overflow`。  
给包含浮动元素的父标签添加css属性 `overflow:auto; zoom:1; zoom:1`用于兼容IE6。  
3.使用after伪对象清除浮动。  
该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置 `height:0`，否则该元素会比实际高出若干像素；

**17、CSS优化、提高性能的方法有哪些？**  
将样式表放到页面顶部  
不使用CSS表达式  
不使用`@import`  
不使用IE的`Filter`

**18、png、jpg、gif 这些图片格式解释一下，分别什么时候用？**  
GIF： 8位像素，256色，无损压缩 ，支持简单动画，支持boolean透明，适合简单动画  
JPEG：颜色限于256 ，有损压缩，可控制压缩质量，不支持透明 适合照片  
PNG：有PNG8和truecolor PNG PNG8类似GIF颜色上限为256，文件小，支持alpha透明度，无动画、适合图标、背景、按钮

**19、display: none;与visibility: hidden;的区别**  
`display:none;`会让元素完全从渲染树中消失，渲染的时候不占据任何空间  
`visibility: hidden;`不会让元素从渲染树消失，渲染师元素继续占据空间，只是内容不可见