css常考面试题总结

布局

• 浏览器盒模型：content-box、padding-box、border-box

• margin纵向重叠：相邻块级元素的margin-top和margin-bottom会发生重叠，取较大的那个。空内容的块级元素，也会发生重叠，但是会被忽略（高度为0）

• margin负值：margin-top和margin-left负值，元素向上、向左移动；margin-right负值，该元素右侧元素左移（可理解为内容坍塌），自身不受影响；margin-bottom负值，该元素下方元素上移，自身不受影响。

• BFC：块级格式化上下文；形成BFC的条件：

  • float不是none
  • position是abs或fixed
  • overflow不是visible
  • display是flex、inline-block等

  BFC常用于清除浮动

• clearfix：用于清除浮动，一般设置于伪元素，例子如下：

<style>
.clearfix::after {
	display: block;
	content: "";
	clear: both;
}
</style>

• 圣杯布局和双飞翼布局：通过float进行布局，使用margin负值进行两侧元素的移动，相对来说双飞翼布局实现起来容易些，具体代码如下：
  • 圣杯布局

<style type="text/css">
	body {
		min-width: 550px;
	}

	#header {
		text-align: center;
		background-color: #f1f1f1;
	}

	#container {
		/* 留出空位 */
		padding-left: 200px;
		padding-right: 150px;
	}

	#container .column {
		float: left;
	}

	#center {
		background-color: #ccc;
		width: 100%;
	}

	#left {
		position: relative;
		width: 200px;
		background: yellow;
		margin-left: -100%;
		right: 200px;
	}

	#right {
		position: relative;
		background-color: red;
		width: 150px;
		margin-left: -150px;
		left: 150px;
	}

	#footer {
		text-align: center;
		background-color: #f1f1f1;
	}

	.clearfix::after {
		content: "";
		display: block;
		clear: both;
	}

</style>

 <div id="header">this is header</div>
 <div id="container" class="clearfix">
 	<div id="center" class="column">this is center</div>
 	<div id="left" class="column">this is left</div>
 	<div id="right" class="column">this is right</div>
 </div>
 <div id="footer">this is footer</div>

• 双飞翼布局

   <style type="text/css">
   	body {
   		min-width: 550px;
   	}
   	.col {
   		float: left;
   	}

   	#main {
   		width: 100%;
   		height: 200px;
   		background-color: #ccc;
   	}

   	#main-wrap {
   		margin-left: 190px;
   		margin-right: 190px;
   	}

   	#left {
   		width: 190px;
   		height: 200px;
   		background-color: #0000FF;
   		margin-left: -100%;
   	}
   	#right {
   		width: 190px;
   		height: 200px;
   		background-color: #FF0000;
   		margin-left: -190px;
   	}
   </style>

<div id="main" class="col">
   <div id="main-wrap">
   	this is main
   </div>
</div>
<div id="left" class="col">
   this is left
</div>
<div id="right" class="col">
   this is right
</div>

定位

• abs、fixed、relative定位依据：abs相对于最近一层的定位父级，若无则为body；fixed相对于body定位；relative相对于自身定位给
• 居中对齐实现方式：
  • 水平居中：
  1. inline元素： text-align: center
  2. block元素：margin: auto
  3. abs元素：left 50% + margin-left 自身长度负值/2
  • 垂直居中
  1. inline元素：line-height为自身高度
  2. abs元素：top 50% + margin-top 自身高度负值/2
  3. abs元素：top 50% + transform(-50%, -50%)
  4. abs元素：top、left、bottom、right均为0，margin: auto

响应式

• rem：rem是个长度单位，设置在根元素html，可对html元素进行媒体查询设置不同屏幕宽度下的font-size实现响应式
• vw/vh：用于取代rem实现不同屏幕大小的设备响应式布局，更加精细，1vw即屏幕宽度的1%

图文样式

• line-height继承：

  1. 30px：直接继承
  2. 1.5：继承比例，实际上line-height = 1.5 * 自身font-size
  3. 200%：计算比例之后继承 ，实际上line-height = 2 * 继承的font-size

• css三角形：通过设置边框长度和颜色，举个例子：

	<style>
        .triangle {
            width: 0;
            height: 0;
            border: 30px solid transparent;
            border-top-color: teal;
        }
    </style>
    <div class="triangle"></div>