flex布局

上节复习

选择器进阶: 	伪类选择器:  当满足特定条件时,激活对应的样式 		元素:hover{}  当鼠标经过元素时,激活样式 	伪元素选择器:  创建一个虚假的元素.不能被选中.不存在网页dom中(安全性/性能) 		元素::before{content:'内容'} 在元素前面添加内容 		元素::after{content:'内容'} 在元素后面添加内容 	结构选择器:  选择一个结构中的指定元素 		元素:nth-child(n){} --> 选择指定序号的子元素 		元素:first-child{} --> 选择第一个子元素 		元素:last-child{} --> 选择最后一个元素  表单(form) 	写一些提供用户进行交互的窗口 -- 输入框,勾选框,确认框,提交按钮  	工具: 		input  -- 输入框 		textarea -- 多行输入框 		button -- 按钮 		select -- 下拉框 		option -- 下拉框里的选项  	input有很多种类型 		text -- 文字 		password -- 密码 		radio -- 单选框(根据name属性判断) 		checkbox -- 多选框 		file -- 文件 		submit -- 提交 		reset -- 重置 		 		# 浮动布局与定位布局 学习编程的诀窍 -- 多敲多练 

布局方式

传统布局方式: 	1.文档流布局: 网页元素从上往下,从左往右进行布局. 主要用块元素布局,块元素独占一行 --> 通过margin padding display line-height 	2.浮动布局: 让一个元素可以在父级元素的区域内,向左/右浮动.一直到边界/其他浮动元素为止 	3.定位布局: 让一个元素在一个指定的位置显示 		绝对定位:  基于父级坐标进行移动 		相对定位:  基于本身进行移动  目前比较新,比较主流的布局方式为flex(弹性盒模型) 	flex--> 把内容基于两条轴进行分割排版 

浮动篇(float)

浮动一开始是用来实现一些图文环绕效果. 后续延伸出了布局的功能 --> 浮动用来做水平布局也很方便 (以前的水平布局方式是通过把块元素转为行内块.但这样会有缺陷: 1.性能比较差 2.如果盒子内容超出了宽高,排版会崩塌)  基本上所有标签都可以添加float样式. float主要两个属性: 	1.left  向左浮动 	2.right 向右浮动  tips: 	1.元素在浮动时会从原来的布局范围脱离.在文档中不在占位 	2.浮动会一直到边界/遇到其他浮动元素为止 	3.清除浮动: 		如果父级元素没有设置高度,盒子会随着内容延伸. 如果给里面的元素设置了浮动,它就会脱离原来的位置.这种情况下父级不会撑大 		解决方式就是给父级元素设置溢出处理: 			overflow: hidden; 

定位篇(position)

通过定位来指定元素在网页中出现的位置 理论上来说可以用定位实现一个网页的所有布局 -- 不推荐.性能低  绝对定位(absolute): 让元素基于父级,在一个指定的位置出现.  让一个标签,出现在距离父级上下左右XX的位置 	- 绝对定位在移动后会脱离文档流.在文档中不再占位 	- 绝对定位的参照对象是基于父级进行移动.如果没有专门父级.默认父级为body(整个网页)  相对定位(relative): 让元素基于自身位置.在原来位置的基础上进行移动.在原来位置里向上下左右移动XX 	- 不会脱离文档流.移动后不影响其他的元素.只是自身位置改变 	- 不会改变元素的性质 	- 比较适合小范围的移动  定位的四个方向: 	top: ↑ 	right: → 	bottom: ↓ 	left: ← 单独写个定位样式是没用的.要结合四个方向来设置距离  父相子绝: 	父元素为相对定位,子元素为绝对定位. 子元素会根据移动后的父元素来显示.  z-index: 	当元素产生上下堆叠的时候.通过z-index调整位置.值越大,越靠上 

拓展补充:

内存: 	运行内存. 程序在运行的时候都是放在内存里运行的.如果你要运行的软件很多,那对内存的要求也就越大. 		一般内存:8g  16g  32g 	如果你的电脑8g不到. 要么升级加个内存条 / 或者换了吧  	主流16g  起步8g  	程序数据是保存在硬盘里. 要运行时会取出来放到内存里运行.再通过cpu去处理 --> 运行软件速度 硬盘/内存/cpu  电脑产商: 	一线: 联想 戴尔 华硕 惠普 苹果 	二线: 小米 华为 宏碁 微星 机械革命 	三线: 神舟 雷神 机械师 火影 一般情况下来说优先买一线(价格会稍微高点). 但是相对来说, 品控/品质性能/售后  主流机型: 	联想: 游戏本拯救者  轻薄本 小新 / thinkbook / thinkpad     个人推荐thinkbook (thinkbook14plus r7核显版) 游戏本: 	天选3  暗影精灵 暗影骑士  蛟龙  极光pro  -->   购买平台: 	购买时机: 6.18   (双11对于pc来说优惠不是特别大.清库存) 	平台: 		京东 -- 价格贵点 / 售后好点 		pdd -- 价格便宜点 / 售后较差 / 翻车率较大  购买电脑后.请参考这个流程来.最好录制开箱视频.避免纠纷 	https://www.bilibili.com/video/BV1QR4y1E7Br?share_source=copy_web 	https://www.bilibili.com/video/BV1X64y1t7aM?share_source=copy_web  视频博主推荐 	嗨我是熊猫:https://space.bilibili.com/479927880 	小石:https://space.bilibili.com/154058118 	中正评测:https://space.bilibili.com/178047796 	笔吧评测室:https://space.bilibili.com/367877  要买笔记本电脑: 	https://mp.weixin.qq.com/s/Q7ZcKNRvUCuAhaAzk17rwg 	关注