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
	關注公眾號搜索最新的

小黃鴨代碼調試法

在你電腦旁邊放一只小黃鴨.遇到問題的時候,把問題和它說一遍.可能就會解決了.

旁觀者清.把你的代碼思路/流程和對方說了一遍 -- 自自然的把內容過了一遍 -- 可能就有了思路.問題解決了

你程序出現了個問題,bug/功能未實現 --> 提問
	二價亞鐵.我的程序要做XXX. 但是現在在準備XXX的時候.  一拍大腿-- 我想到是什么情況了.沒事了

阿里圖標

免費將圖標以字體的形式加載頁面

	使用步驟：
	1.  打開阿里圖標官網：https://www.iconfont.cn/
	2.  注冊/登錄
	3.  選擇需要的圖標加入購物車
	4.  下載代碼

flex布局(彈性盒模型)

http://c.biancheng.net/css3/flex.html

flex是當前較為主流的布局方式 --> 它布局起來更方便,可以取代float --> float一開始不是用來布局用的,有一些小缺陷

用flex布局的元素稱為flex容器.  它里的內容稱為容器項目/flex項目   父級:容器  子級:項目

flex布局原理: 就是通過兩條軸.把網頁分割成一行行/一列列
	flex主軸是從左往右. 副軸從上往下. 默認情況下是左右水平布局

flex的使用三要素:
	1.主軸的方向(你是要左右水平布局 / 上下垂直布局)
	2.主軸的對齊方式
	3.副軸的對齊方式

flex的使用:
	display: flex;

display樣式說明
	設置主軸方向(決定左右/上下布局): flex-direction
		row;   # 行,默認屬性.從左往右
		column;  #列,從上往下
		row-reverse;  # 行反轉. 從右往左
		column-reverse;  #列反轉.從下往上

	設置主軸對齊方式: justify-content
		flex-start;   # 默認,按照起點對齊.左/上
		flex-end;   # 終點對齊.右/下
		space-around;  #  均分布局
		space-between;  # 兩端對齊

	設置副軸對齊方向: align-items
		center;   # 居中
		flex-start;  # 靠起點
		flex-end;    # 靠終點

	設置換行(如果主軸裝不下內容):  flex-wrap
		no-wrap;  # 縮放不換行
		wrap;   # 換行

	flex項目屬性:
		order: 項目的順序.數值越小,排序越靠前.默認為0

百度壁紙背景

over

拓展

qq消息轟炸器 :  好玩.拓展用的. 
	需要用到一個叫pywin32的模塊
pip install pywin32 --default-timeout=100 -i https://pypi.tuna.tsinghua.edu.cn/simple

1.使用時.只能打開一個窗口
2.對特殊QQ不起作用(企業QQ)
3.該原理.對微信不起作用

盡量正常用pyc敲py代碼

編程源自于生活 -- 消息轟炸器.先不要管代碼

正常情況下,我想給一個人發消息應該怎么做:
	1.找到要發送的人(聊天窗口)
	2.準備發送的內容
	3.發送 -- 回車