CSS布局

---

浮动

float：left/right/both
设置浮动后，脱离正常文档流，不会覆盖文字，文字形成环绕效果。其高度不会加到父元素上（需要将一个元素放置在主容器末尾，对其使用clear属性，将其拓展到浮动元素下方，即可实现父元素背景包含浮动元素的效果）
clear：该元素某边不允许出现浮动元素

.clearfix::before
.clearfix::after{
	display:table;
	content:" "; //防止外边距折叠
}
.clearfix::after{
	clear:both; //伪元素清除所有浮动
}

浮动陷阱

如图，1,2号媒体盒子存在高度差，导致3号盒子无法另起一行排列，解决方法：在奇数媒体盒子上添加clear：left

.media:nth-child(odd){
	clear:left;
}
//nth-child选择器选择奇数盒子

BFC(块级格式化上下文)

BFC本身属于环绕文档流一部分，但其将内部内容与外部上下文分隔开，BFC中内容不会与外部的元素相互影响

创建BFC的属性
float：left，right
overflow：hidden，auto，scroll
display：inline-block，table-cell，flex
position：absolute，fixed

FLexbox

display:flex
该元素变成了一个弹性容器，直接子元素变成弹性子元素。子元素默认从左到右依次排列，弹性容器填满宽度（子元素不一定），弹性子元素高度相等，高度由其内容决定。

弹性容器属性

弹性方向：
flex-direction：column/row-reverse/column-reverse，改变主轴方向，副轴随主轴改变

弹性子元素属性

flex：1 1 0%（默认值）（grow，shrink，basis）

flex-basis
定义元素大小的基准值，包括px，em，百分比
flex-grow
在flex-basis确定后，弹性子元素的值不一定填满弹性容器的宽度，多余出来的空白部分会根据flex-grow（成长因子） 分配给每个弹性子元素
flex-shrink
在flex-basis确定后，若子元素的值超过了弹性容器的宽度，flex-shrink会根据子元素的值进行收缩至不再溢出

网格布局

display:grid
作用于两级的DOM结构，100%填充可用宽度，

.grid{
	display:grid;
	grid-template-columns:1fr 1fr 1fr; //定义等宽的三列
	grid-template-rows:1fr 1fr; //定义等高的两行
	grid-gap:0.5em;//单元格之间加入间隔
}

repeat（）函数

repeat（2，2fr，1fr） 等价于 2fr 1fr 2fr 1fr

网格线编号

.main{
	grid-column：1/2；
	grid-row：3/5；
}
// 将main元素放置于第一列第三行

网格线代替语法：

//命名的网格线
.grid{
	display:grid;
	grid-template-columns:[start] 2fr [center] 1fr [end]; 
	// 将三列网格线分别命名为start，center，end
}
//命名网格区域
.containr{
	display：grid；
	gird-template-areas：”title title“
									   “nav nav”
									   “main aside1”
									   “main aside2”；									   
	grid-template-columns:2fr 1fr; 		//定义相同大小的网格区域
	grid-template-rows:repeat（4，auto）;
}

相较于flex的优点：
flexbox可以通过wrap换行，但下一行元素无法和上一行元素对齐，grid可以保证二维的对齐

隐式网格

若网格元素放在声明的网格轨道之外，会创建隐式网格，直到包含该元素

.portfolio{
	display:gird;
	grid-template-columns:repeat（auto-fill，minmax(200px,1fr)）;
	// auto-fill 尽可能多的生成轨道 
	//minmax限制了最大最小值，最小宽200px，上限为1fr
	//auto-fit 将非空轨道拓展，填满可用空间
	grid-auto-rows：1fr；
	//将隐式轨道大小设为1fr
	//grid-auto-flow：column dense 
	//自动布局算法 自动紧凑的按列填满空白 可用于实现照片墙

object-fit属性：

fill：自动缩放，以填满盒子；
cover：扩展，以填满盒子，部分被剪裁；
contain：缩放，完整的填满盒子，但出现空白

特性查询：
当某浏览器支持某样式时，该样式才生效

@support（display：grid）{
 	...
 }

网格布局的对齐

align-items：网格项目元素在单元格中的垂直呈现方式，是垂直拉伸显示，还是上中下对齐
justify-items：网格项目元素在单元格中的水平呈现方式，是水平拉伸显示，还是左中右对齐
align-self，justify-self作用于单个元素

定位和层叠上下文

固定定位（让元素相对于视口定位）

position：fixed；固定元素脱离文档流，不再影响其他元素的位置

.modal{
	position:fixed;
	top:3em;
	bottom:3em;
	right:20%;
	left:20%;
	//通过 top，bottom，right，left设置主体定位
	rgba（0，0，0，0.5）//第四个值 设置透明度
	}

绝对定位（相对于最近的祖先定位元素）

.modal{
	position:absolute;
	top:3em;
	right:3em;
	}

若祖先元素未定位。绝对定位元素会基于初始包含块定位

相对定位

position：relative 开启相对定位
1.不设置偏移量时，元素不会发生变化
2.相对于元素在文档流中原来的位置进行定位（不会脱离文档流，但提升一个层级）

z-index

浏览器绘制元素时，会先绘制所有非定位的元素，再绘制定位元素（定位元素间层叠关系不改变），这会导致定位元素和源码的层叠关系不一。z-index可以控制层叠顺序，控制x-y-z坐标系中的深度方向，拥有较高的z-index出现在较低的z-index前面，负数的z-index元素出现在静态元素之后。

.modal-backdrop{
	position:fixed;
	top:0;
	right:0;
	bottom:0;
	left:0;
	z-index:1;
	//将蒙版拉到没有设置z-index的元素之前

！！！！ z-index只在定位元素上生效，不能用于控制静态元素，给定位元素加入z-index可创建层叠上下文

层叠上下文（决定元素的前后出现顺序）

一个层叠上下文包含一个元素，或由浏览器一起绘制的一组元素。其中一个元素作为层叠上下文的根，给一个定位元素加上z-index的时候，它会变成一个新的层叠上下文的根，所有后代元素属于层叠上下文的一部分。

所有层叠上下文内的元素会按照以下顺序，从后往前叠放：
层叠上下文的根
z-index为负的定位元素（及其子元素）
非定位元素
z-index为auto的定位元素（及其子元素）
z-index为正的定位元素（及其子元素）

粘性定位（相对，固定定位的结合）

元素随页面滚动，当达到屏幕特定位置时，若用户继续滚动，该元素会锁定在该位置（侧边栏导航）。该元素不会超出父元素的范围。

.affix{
	position:sticky;
	top:1em;
}

响应式设计

响应式设计三大原则:

• 移动优先，先构建移动版布局再实现桌面布局
• @media原则（媒体查询），为不同大小的视口定制样式
• 流式布局，允许容器根据视口宽度缩放尺寸

meta标签：

<meta name = "viewport"
content = "width=device-width,initial-scake=1">
//为移动端响应式设计添加视口标签

媒体查询（遵循选择器优先级与源码顺序）：

@media(min-width:560px){
	.titile>h1{
		font-size:2.25rem;
	}
}
//当视口宽度大于560px时，会给标题设置2.25rem的字号

断点：
特殊临界值，当屏幕尺寸达到这个值时，网页样式会发生改变

.title{
	...
}
//移动端样式，对所有断点均生效
@media(min-width:35em){
	.titile{
		...
	}
}
//中等屏幕断点，覆盖移动端样式
@media(min-width:50em){
	.titile{
		...
	}
}
//大屏幕断点，覆盖中小屏幕的样式