前端面试知识点总结——CSS篇

1、水平居中和垂直居中

1. 绝对定位，利用负margin

#out{
   	width: 500px;
   	height: 500px;
   	border: black 2px solid;
}
#in{
   	width: 100px;
   	height: 100px;
   	/*方法一：50% 50% 负margin*/
   	top:50%;
   	left:50%;
   	margin:-50px -50px;
}

2. 绝对定位，margin:auto

 #in{
		width: 100px;
		height: 100px;
		/*方法二：margin auto*/
		top: 0;
        left: 0;
        bottom: 0;
        right: 0;
}

3. Transform

#in{
   	width: 100px;
   	height: 100px;
   	/*方法三：transform*/
   	top: 50%;
   	left: 50%;
   	transform:translate(-50%,-50%);
}

4. calc 运算符前后要加空格

 #in{
		width: 100px;
		height: 100px;
		 /*方法四：calc 运算符前后要加空格*/
        top: calc(50% - 50px);
        left: calc(50% - 50px);
}

5. flex布局

 #out{
        width: 500px;
        height: 500px;
        border: black 2px solid;
        /*position: relative;*/
        /*方法五：flex布局*/
        display: flex;
        align-items: center;//水平居中
        justify-content: center;//垂直居中
    }

6、table布局

#out{
        width: 500px;
        height: 500px;
        border: black 2px solid;
        /*position: relative;*/
        /*方法五：table布局*/
        /*（内部div设置display:inline-block即可）*/
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }

7、grid布局

#out{
        width: 500px;
        height: 500px;
        border: black 2px solid;
        /*position: relative;*/
        /*方法五：grid布局*/
        /*（内部div设置display:inline-block即可）*/
        text-align: center;
        display: grid;
        align-items:center;
    }

2、三栏布局：高度已知，左右固定，中间自适应

1. float

<style>
        .float .left {
            float: left;
            width: 300px;
            background: green;
        }
        .float .center {
            background: yellow;
        }
        .float .right {
            width: 300px;
            float: right;
            background: red;
        }
    </style>

2. absolute

<style>
        .absolute article > div {
            position: absolute;
        }
        .absolute .left {
            left: 0;
            width: 300px;
            background: green;
        }
        .absolute .center {
            left: 300px;
            right: 300px;
            background: yellow;
        }
        .absolute .right {  
            width: 300px;
            right: 0;
            background: red;
        }
    </style>

3. margin

<style>
        .absolute .center {
            width:100%;
            float:left;
        }
        .absolute .main {
            margin: 0 100px;
            background:yellow;
        }
        .absolute .left {
            float:left;
            width: 300px;
            margin-left: -100%;
            background: green;
        }
        
        .absolute .right {  
            width: 300px;
            float:right;
            margin: -300px;
            background: red;
        }
    </style>

4. flex

<style>
        .flex {
            margin-top: 110px;
        }
        .flex .left-center-right {
            display: flex;
        }
        .flex .left {
            width: 300px;
            background: green;
        }
        .flex .center {
            flex:1;
            background: yellow;
        }
        .flex .right {
            width: 300px;
            background: red;
        }
    </style>

5. table

<style>
        .table .left-center-right {
            width: 100%;
            height: 100px;
            display: table;
        }
        .table .left-center-right div {
            display: table-cell;
        }
        .table .left {
            width: 300px;
            background: green;
        }
        .table .center {
            background: yellow;
        }
        .table .right {
            width: 300px;
            background: red;
        }
    </style>

6.grid

<style>
        .grid .left-center-right {
            display: grid;
            width: 100%;
            grid-template-rows : 100px;
            grid-template-columns : 300px auto 300px;
        }
        .grid .left {
            background: green;
        }
        .grid .center {
            background: yellow;
        }
        .grid .right {
            background: red;
        }
    </style>

3、盒子模型

CSS盒模型是什么
盒子模型包括：content、padding、margin、border

标准模型和IE模型的区别
标准盒模型的宽高为content的宽高
IE盒模型（怪异盒模型）的宽高包括border

CSS如何设置这两种盒子模型
box-sizing:content-box(标准盒模型)
box-sizing:border-box(IE盒模型)

4、Flex弹性盒布局

当布局涉及到不定宽度，分布对齐的场景时，就要优先考虑弹性盒布局。

容器的属性
flex-direction：决定主轴的方向（即项目的排列方向）
flex-wrap：定义如果一条轴线排不下，如何换行。
flex-flow：flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
justify-content：定义了项目在主轴上的对齐方式。
align-items：定义项目在交叉轴上如何对齐。
align-content：定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

详细教程，建议阅读阮一峰老师的Flex布局教程

5、CSS选择器

标签选择器、id选择器（#xxx）、类选择器(…)、相邻选择器(h1+p)、子选择器(ul>li)、后代选择器(li a)、通配符选择器(*)、属性选择器(a[rel=“xxx”])、伪类选择器(a:hover,li:nth-child)

6、CSS3中新增的伪类

p:first-of-type 选择属于其父元素的首个元素
p:last-of-type 选择属于其父元素的最后元素
p:only-of-type 选择属于其父元素唯一的元素
p:only-child 选择属于其父元素的唯一子元素
p:nth-child(2) 选择属于其父元素的第二个子元素
:enabled :disabled 表单控件的禁用状态。
:checked 单选框或复选框被选中

7、CSS优先级计算

important Infinity
行间样式 1000
id 100
class/属性/伪类 10
标签选择器/伪元素 1
通配 0

8、display:none和visibility:hidden的区别

display: none隐藏后的元素不占据任何空间，而visibility: hidden隐藏后的元素空间依旧保留

1、visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。这个和display: none有着质的区别

2、visibility: hidden不会影响计数器的计数，如图所示，visibility: hidden虽然让一个元素不见了，但是其计数器仍在运行。这和display: none完全不一样。

9、几种隐藏元素的方法

1、display:none ：改变元素显示方式为不显示元素
2、visibility:hidden ：这个属性只是简单地隐藏某个元素，但是元素占有地空间仍然存在。
3、opacity:0：CSS3属性设置为0，可以是这个元素完全透明。
4、background:transparent：背景透明显示
5、position:absolute：设置一个很大地left负值定位，使元素定位在可见区域之外。
6、filter:blur(0)：CSS3属性，将一个元素的模糊度设置为0，从而使这个元素“消失”在页面中。
7、height:0：将元素的高度设置为0，并消除边框

10、font属性设置

• 大小：font-size-large（特大）、xx-small(极小)，一般中文用不到，只要用数值就可以，单位px，pt。
• 样式：font-style:italic（斜体）、oblique（偏斜体）、normal（正常）。
• 粗细：font-weight：lighter（细体）、bold（粗体）、normal（正常）
• 行高：line-height：normal（正常），单位：px、pt、em。
• 变体：font-variant：small-caps（小型大写字母）、normal（正常）。
• 常用字体（font-family）：Courier New、Courier、monospace、Times等。
• 大小写：text-transform:uppercase；（大写）、lowercase（小写）、capitalize；（首字母大写）、none（无）。
• 修饰：text-decoration:underline；（下划线）、line-through（删除线）、overline（上划线）、blink（闪烁）。

11、position的定位属性

1、static（静态定位）：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

2、relative（相对定位）：生成相对定位的元素，通过top,bottom,left,right的设置相对于其正常（原先本身）位置进行定位。可通过z-index进行层次分级。元素位置变换以后，不会脱离文档流。

3、absolute（绝对定位）：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。可通过z-index进行层次分级，会脱离文档流。

4、fixed（固定定位）：生成绝对定位的元素，相对于浏览器窗口进行定位，且不随滚动条滚动。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。可通过z-index进行层次分级。

5、z-index属性：只有设置了position为relative、absolute、fixed之一的元素才可以使用z-index或者位移属性。z-index大的再上面其中0>auto。

12、图像的预加载和懒加载

1、图片预加载：预加载就是页面打开，图片加载完成后，有限显示图片。
2、图片懒加载：延迟加载就是有限显示别的内容，其他内容加载完成后，再加载图片。
区别：两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。

13、如何清除一个网页元素的浮动

网页中，经常用浮动的div来布局，但是会出现父元素因为字元素浮动引起内部高度为0的问题。为了解决这个问题，需要清除浮动。清除浮动的属性设置，方法如下：

• clear：/left/right/none/inherit：元素某个方向上不能有浮动元素。

• clear：左右两侧不允许浮动

  • 给浮动元素下方添加一个空的div，给出一系列声明{clear:both;height:0;overflow:hidden}.
  • 给浮动元素的父级设置高度：高度塌陷是因为浮动元素的父级高度是自适应导致的，那么给它设置适当的高度就可以解决这个问题。缺点：在浮动元素的父级高度不确定的时候不适用。
  • 以浮制浮：就是给浮动元素的父级也添加浮动。缺点就是需要给每个浮动元素的父级添加浮动，浮动多了容易出现问题。
  • 给父级添加overflow:hidden清浮动方法。

14、全局函数eval()

定义和用法：eval()函数可计算某个字符串，并执行其中的JavaScript代码，返回通过计算string得到的值（无值则返回undefined）。eval()只接受原始字符串作为参数，如果string参数不是原始字符串，那么该方法将不做任何改变的返回。
如果参数中没有合法的表达式和语句，则会抛出SyntaxError异常。
如果非法调用eval()，则会抛出SyntaxError异常。
如果传递给eval()的JavaScript代码生成了一个异常，eval()将把该异常传递给调用者。