前端基础的HTML/css面试问题

如何理解HTML 语言化

• 让人更容易读懂（增加 代码可读性）
• 让搜索引擎更容易读懂（SEO）

块状元素&内联元素

• display：block / table；有div h1 h2 table ul ol p 等
• display：inline / inline-block；有 span img input button 等

盒模型宽度计算

• offsetWidth = （内容宽度 + 内边矩 + 边框），无外边框
• box-sizing：border-box；

margin纵向重叠问题

• 相邻元素的 margin-top 和 margin-bottom 会发生重叠
• 空白内容的 < p ></ p > 也会重叠

margin负值问题

• margin-top 和margin-left 负值，元素向上、向左移动
• margin-right 负值，右侧元素左移，自身不收影响
• margin-bottom 负值，下方元素上移，自身不受影响

BFC理解与应用

• 一块独立渲染区域，内部元素的渲染不会影响边界以外的元素
• 形成BFC的条件 ：overflow、float、position 等
• BFC的常见应用，清除浮动 clear：both

float布局：圣杯布局和双飞翼布局的技术总结

• 使用float布局
• 两侧使用margin负值，以便和中间内容横向重叠
• 防止中间内容被两侧覆盖，一个用padding一个用margin
  圣杯布局

<style type="text/css">
	* {margin: 0;padding: 0;}
	.column {
		float: left;
	}
	.container {
		padding-left: 200px; 
		padding-right: 150px;
	}
	#content {
		background: #b1adad;
		width: 100%;
	}
	#left {
		/*相对自身定位*/
		position: relative;
		background: #d61212;
		width: 200px;
		margin-left: -100%;
		right: 200px;
	}
	#right {
		background: #ddd019;
		width: 150px;
		margin-right: -150px;
	}
</style>
<div class="container">
		<div id="content" class="column">conent</div>
		<div id="left" class="column">left</div>
		<div id="right" class="column">right</div>
</div>

代码效果

双飞翼布局（个人觉得双飞翼更简单理解）
使用的margin给两侧留白,二者实现的效果是一样的

<style>
.column {
		float: left;
		min-height: 100px;
	}
.container {
		margin: 0 150px 0 200px;
	}
#content {
		background: #b1adad;
		width: 100%;
	}
#left {
		background: #d61212;
		width: 200px;
		margin-left: -100%;
	}
#right {
		background: #ddd019;
		width: 150px;
		margin-left: -150px;
	}
</style>
<div class="container">
		<div id="content" class="column">conent</div>
		<div id="left" class="column">left</div>
		<div id="right" class="column">right</div>
</div>

flex布局

常用语法：

• display：flex（弹性布局）
  属性：
  flex-direction用在父容器上，定义子元素的排列方向
  flex-direction：排列方式，默认横向（row，且起点在左边）
  flex-direction：row-reverse（横向排，起点在右边）
  flex-direction：column（竖着排，起点在上面column-reverse，起点在下面）

• justify-content（用在父元素上，定义子元素的对齐方式）
  属性：
  flex-start：开始对齐（左对齐）
  flex-end：结束对齐（右对齐）
  center：居中对齐
  space-between：两端对齐，子元素之间间隔相同
  space-around：子元素之间间隔相同，且与父元素间隔1/2距离

• align-items：（用在父元素上，定义子元素在交叉轴上的对齐方式，交叉轴是和主轴垂直的轴）
  属性：
  flex-start：交叉轴起点对齐
  flex-end：交叉轴终点对齐
  center：交叉轴中心对齐
  baseline：了解
  stretch：了解

• align-self：（用在子元素上，定义元素在交叉轴上的对齐方式，交叉轴是和主轴垂直的轴）
  其属性和align-items一模一样，只是align-items用在父元素上，align-self用在子元素上

<style>
.box{
		width: 200px;
		height: 200px;
		border: 2px solid #ccc;
		border-radius: 10px;
		padding: 20px;
		margin: 50px auto;
		display: flex; /* 布局 */
		justify-content: space-between; /* 两端对齐 */
	}
	.item{
		/* 背景色、大小、边框等 */
		display: block;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background-color: #666;
	}
	.item:nth-child(2) {
		align-self: center; /* 第二项居中对齐 */
	}
	.item:nth-child(3) {
		align-self: flex-end; /* 第三项尾部对齐 */
	}
</style>
<div class="box">
		<span class="item"></span>
		<span class="item"></span>
		<span class="item"></span>
</div>

代码效果

## CSS-定位

relative和absolute定位

• relative：依据其在普通流中的定位，也就是自身进行定位
• absolute：依据最近一层定位元素进行定位（如爷元素有relative定位，那么- absolute相对于爷元素进行定位，如果是父元素，则依据父元素进行定位）（定位元素包括absolute、relative、fixed，如果祖先元素都没有前面那几种定位，那就相对body定位）

居中对齐的实现方式：
水平居中

• inline元素（text-align：center）
• block元素（margin：auto）
• absolute元素：left:50% + margin-left： 负值（为自身宽度的一半）【必须提前知道元素的宽度】

垂直居中

• inline元素：line-height的值等于height的值
• absolute元素：top:50% + margin-top： 负值（为自身高度的一半）【必须提前知道元素的高度】
• absolute元素：transform：translate（-50%，-50%）【要结合position：absolute；left：50%；top：50%；】【缺点：低版本要考虑浏览器的兼容性问题】
• absolute元素：left，right，top，right = 0 + margin：auto

line-height如何继承

• 写具体数值，如30px , 则继承该值
• 写比例， 如 2 / 1.5 ，则继承该比例
• 写百分比， 如 200% ，则继承计算出来的值

rme是一个长度单位

• rem ，相对长度单位，相对于根元素，常用于响应式布局
• em ，相对长度单位，相对于父元素，不常用
• px ， 绝对长度单位，最常用

响应式布局的常用方案

• media-query ，根据不同的屏幕宽度设置根元素font-size
• rem，基于根元素的相对单位