HTML 布局

布局
使用块元素搭建网页结构,改变默认文档流的方式，让其在一行中显示多列。【让块在一行中显示】

<div>
	<div></div>
	<div></div>
	<div></div>
</div>
<ul>
	<li></li>
	<li></li>
	<li></li>
</ul>

浮动布局
	float
		float:left/right
		可以使块元素脱离当前的文档流
			1) 宽度如果没有手动指定那么就由内容决定
			2) 多个浮动元素在一个浮动流中并排显示，如果一排放不下就会自动换行
			3) 浮动元素失去了对父元素的支撑

	clear
		clear:left/right/both
		清理左边/右边/左右两边的浮动元素，一般使用这个特性强制子元素换行，达到支撑父元素的目的

	一行多列：
		全部浮动
		ul>li{
			float:left
		}
	一行两列
		方法一：
			两列都浮动
			.left {float:left }
			.right {float:right; }
		方法二：
			一列浮动，一列添加margin-left
			.left {float:left; width:200px}
			.right {margin-left:220px;}

	overflow
	overflow-x
	overflow-y
		auto/none/visible/scroll
	当父元素的宽/高固定，子元素的宽/高超过了父元素就可以使用这个特性


	display
		block/inline/inline-block/...
		块/行内/行内块
		行内块
			可以与其他行内元素共享一行空间
			可以指定宽高

定位布局
	position 
		static		静态（默认） 	非定位元素

		relative 	定位元素（相对定位）
			参照点：原先所在的位置
			特性：不脱离文档流（宽度默认为为100%，原来在文档流的位置不会被抢占），但是可以覆盖在其他元素上


		absolute 	定位元素（绝对定位）
			参照点：距离它最近的父定位元素，如果没有，参照视口
			特性：脱离文档流（宽度由内容决定，原来在文档流的位置被其他元素抢占）


		fixed 		定位元素（固定定位）
	只能定位元素才能使用定位属性
		top 、left、bottom、right
伸缩盒

1.display: inline 将块级元素转换成行内元素
block 将行内元素转换成块级元素
inline-block 将元素转换成行内块级元素

2.浮动
脱离文档流
不会遮挡行内元素，会遮挡块级元素
不能上下浮动，只能左右浮动
不能使用 margin: 0 auto;

清除浮动：父子级 给父级加overflow:hidden;
				 使用::after伪元素
					content: "";
		            display: block;
		            clear: both;

		  兄弟级 添加空元素并给空元素设置clear:both

停止浮动：  遇到其他浮动元素的时候
		 	遇到父级的边框时候

3.定位
static：静态布局，默认的
absolute： 绝对定位。left，right，top，bottom
根据浏览器的左上角进行定位
脱离文档流
不保留定位前的空间
若父级元素有定位属性，则根据父级元素的左上角

relative：相对定位
		  相对元素本身位置进行定位(若相对本身向上或者向左的话要设置负值)
		  不脱离文档流
		  保留定位空间

fixed： 固定定位
		和绝对定位基本一致，也会脱离文档流
		不会根据滚动条的滚动而滚动		 

面试题目

一年半前端工作经验试水杭州：我是如何拿下网易、阿里和滴滴 offer 的