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.發送 -- 回車