Web前端第三章(清華 2019 2 18)

2021-09-11 06:39:09 字數 1803 閱讀 9267

float 父元素圍住浮動的子元素

1. 父元素設定為overflow

2. 父元素也浮動

3. 新增乙個空的 末元素 clear-both

4. clearfix規則:

.clearfix::after

布局:微博:左中右三欄 固定寬度

div:overflow

p1 p2 p3:float-left

google drive:左中右 中欄自適應

div:overflow

p1 p3 p2: p1 float-left p2 float-right

p3:magin-left magin-right width:auto

定位:relative 層級高於static

z-index

absolute 類似於float 脫離div

位置相對于父元素的定位元素位置若都為static 則相對於坐上開始

fixed 類似於absolute 但是相對於瀏覽器適口 滾動保持不動

css下拉列表?

固定垂直居中按鈕:

fixed top:50% magin-top:-1/2height

[拓]彈出視窗?

order:顯示順序 -1靠前 預設0

flexbox:(container)

display:flex

flex-direction(主軸方向):row從左往右(預設)     row-reverse:從右往左

column從上往下 column-reverse:從下往上

flex-wrap:自動換行

no-wrap:預設不換行 會壓縮在一行

wrap:換行

flex-flow: flex-direction&& flex-wrap組合

justify-content:

flex-start 預設

center flex-end space-between 均勻放置 space-around 均勻 但沒有頂格 分散到兩側

align-content:

stretch 預設 撐大

flex-start 單行 center 側軸居中 flex-end

flex-item:

stretch 自動伸展為每一行高度(增量大小相同) 設定的不伸展

flex-start 對齊每一行上邊緣

flex-start 對齊每一行下邊緣

baseline 基線對齊

align-items:定義了各flex item在所在line中沿側軸對齊的方式

item:

order 預設0 小的靠前

align-self 自身對齊方式 auto繼承

flex-grow:1(增長因子) 搶占剩餘空間

flex-basis(主軸上item的基礎大小) 強於width,height

flex:1 1 200px 增長因子 縮減因子 基礎大小

居中布局方式:

1. 彈性盒子 container justify-content:center align-items:center

2. 普通 container absolute

div relative top 50% left 50% margin-left:-1/2width margin-top:-1/2height

autoprefixer css online (新增廠商字首 flex-box)

grid 網格布局

跨越兩行 第二行clear-both

跨越兩列 設定寬度

bootstrap3 grid

第三章 web設計原則

程式設計師的修煉從優秀帶卓越 第三章 web設計原則 的評判標準 載入的速度要快 這到底是什麼東西 給我看乙個例子 清清楚楚的告訴我要做什麼,並且掃除障礙 擁抱你的受眾,即使意味著要把其他受眾排除在外,你不可能滿足所有的使用者 追求簡單 不要設計太多按鈕,不要堆砌無效的需求,少即使多,像谷歌瀏覽器 ...

第三章 堆疊

1.基礎知識 堆疊可以實現很多的應用,遞迴的問題轉化成非遞迴形式,在本質上也是堆疊的問題.它是一種 filo 操作的資料結構,一般也有兩種儲存方式 陣列跟鍊錶實現形式,這裡我給出了鍊錶形式的堆疊模板,裡面包括了基本的堆疊所有的操作,還有兩個比較著名的應用例子,時間倉促,精力比較有限,關於迷宮老鼠還沒...

第三章 曙光

第三章 曙光 第二場校園招聘開始了。其實,洋對這個公司的不是很了解。因為前幾天突然在bbs上面看到了這個公司的招聘資訊,洋覺得這個公司不錯,就上網投了簡歷。接下來的乙個多小時,讓洋很震撼!想不到這個公司這個厲害,而且無論從哪方面來說,絕對不比之前的那個公司差。想不到自己的乙個不經意的決定到了這個大的...