Web前端開發精品課讀書筆記
[toc]
HTML與CSS進階教程
小知識
- 最新HTML標準文檔說明簡化, 大小寫不敏感, 屬性可以不加引號,部分屬性屬性值可以忽略.
- div和span
- id和class的使用:選擇器的使用
- 瀏覽器的小標題的使用:
<head>中使用<title></title><link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico"的方式使用.
語義化
- 標題語義化
- 圖片語義化
alt title.-
figure figcaption代替<div><img .. /><span></span></div>方式實現 圖片+ 圖注的方式, 更好的語義化.
-
- 表格語義化
- 表單語義化
<label for ..>表達,給相應的<input type = "checkbox" ..>, 增加標簽. - 使用
fieldset和legend標簽. 后者是表單組標簽, 實現類似"書簽"效果. - 其他標簽.
<br /> <strong><em><del><ins><img>分別表達換行, 加強, 斜行,刪除線,插入線,圖片等方式. 其中<img>是否使用背景圖片替代, 看是否要當做內容被索引, 被查找, 如果不需要, 就用背景圖片.
CSS進階
基礎支持
-
單位:
px % em rem分別代表像素,百分比,相對于當前元素大小,相對于"根元素"大小-
%-
width height font-size分別對應父元素相同屬性值進行計算 -
line-height百分比相對于父元素的font-size計算. -
vertical-align相對于當前元素line-height計算.
-
-
-
特性
- 繼承性. 對于
<a>元素有默認特性,會影響繼承產生的效果.
- 繼承性. 對于
-
選擇器
-
M N {}后代選擇器,包括孫子所有的后代 -
M>N {}子代選擇器,只包括兒子輩的選擇器 -
M~N {}兄弟選擇器. 同級的N元素 -
M+N {}相鄰選擇器. 同級的N元素
-
書寫規范
命名規范
- 必要時采用父級class前綴法,
column column-title column-content這種這方式. - 用駝峰命名
topMain,中劃線法,如上.
書寫規范
優先級順序:
- 布局,文檔流
display position float clear - 自身盒子屬性
width height margin boder padding overflow - 文本描述屬性
font line-height text-align text-indent vertial-align - 裝飾屬性
color background-color opacity cursor - 其他屬性
content list-style quotes
注釋
- 采用
/* */方式, 如果不想被壓縮,使用/*! 版權所有 */保留注釋不被壓縮,不然壓縮CSS時就會干掉這些.
CSS Reset
- 使用
* {marging:0 padding:0}完成頁面默認樣式的清除,這種效率不過, 有css reset樣式清除表. 不過高級設計是不清楚樣式的.
CSS盒子模型
-
conent內容區可以使用overflow:hidden方式來指明溢出怎么辦. -
border:none對比border:0不需要渲染,不占用內存.但是IE6 7 不支持border:none,沒有舊瀏覽器,就不作兼容. -
padding用于有背景圖的, 設置文字偏移
外邊距疊加
- 只有
margin-top margin-bottom之間會發生疊加,而margin-left margin-right不會 - 只有
block inline-block會發生, 因為inline元素margin-top margin-bottom屬性設置無效. - 同級元素,底和頂疊加; 父子元素, 頂和頂,底和底疊加; 如果沒有子元素或文字的元素如
<br /><hr />空元素, 會讓與其接壤的所有元素發生外邊距疊加.
負margin技術
- 普通文檔流下:
margin-top margin-left為負數會讓自身移動去覆蓋其他位置;margin-bottom margin-right為負數會讓后續元素移動,覆蓋原有元素 - 浮動元素:注意流動的方向即可.
- 相應技巧:
- 圖文混排,水平底部不對齊:
vertical-align:text-bottom改變默認的baseline-bottom方式外,margin{0 3px -3px 0}方式也可以. - 自適應兩列布局:
- 垂直居中. 設置父元素
position:relative, 設置子元素position:absolute;top:50%;left:50%;margin-left:width值一半的負值; margin-top:height值一半的負值. 萬能的方法,適用于block inline inline-block三種元素. - tab選項卡可以
margin-top:-1px消除下邊框顯示問題. - 子元素為
float:left;``float:right浮動, 而父元素沒有設置高度height會導致父元素高度坍陷. 對父元素div設置overflow:hidden清除浮動,可以使高度不會坍陷.
- 圖文混排,水平底部不對齊:
display屬性
塊元素和行內元素
塊元素
行內元素
-
strong em s u a span代表強調,斜杠,刪除線,下劃線,超鏈接,文檔內的行級元素. - 不可包含塊元素,造成無法預知的后果, 可以包括其他行元素.
-
無法定義
height width高度和寬度. - 可定義
margin-left margin-right,無法定義margin-top margin-bottom.
display 改變屬性
inline-block可以定義width height屬性, 可以與其他行內元素在同一行, 包括img input2種.
display:none和visibility:hidden
- 前者不會占據位置,后者占據位置而不顯示. 而慎用前者,因為搜索引擎會忽略.
display:table-cell
- 定義垂直和居中對齊. 對父元素設置
display:table-cell,然后對父元素,子元素設置vertical-align:center垂直居中. - 自適應的等高布局, 會自適應高度撐開并由最高的盒子決定, 等高
```lasso`
<div ... style= "display:table-row">
<div style="display:table-cell;"> <img /><div>
<div style="display:table-cell;"><span></span></div>
</div>
- **自動平均** 劃分元素
父元素: {display:table;}
子元素: {display:table-cell;}
#### 去除`inline-block`元素之間間距
語法:
父元素 {font-size:0;}
## 文本效果
- 大小寫, 首行縮進,文本大小寫,文本水平垂直對齊,行高,字距,詞距.
### `text-indent`首行縮進
- 正常用法, 首行縮進`2em`, 高級用法設置`<h1>`元素背景元素, 相應文本設置為`text-indent:-9999px`不顯示, 對搜索引擎也友好.
### `text-align`設置
- 可以設置居中,左, 右, 兩端對齊等.
- 對文本, `inline inline-block`元素生效. 所以對`<img>`元素也生效. 可以對`<div display:inline-block></div` 完成設置生效.優雅辦法如下
- `{text-align:center} {margin: 0 auto;}`區別. 前者生效以說,父元素中定義, 后者當前元素定義. 后者只對塊元素生效.
### `line-height`設置
- 技巧1: 設置單行文字居中對齊. 方法: 設置`height line-height`值相同.
- `em %`取值,參考父元素`font-size`屬性設置行號.
- 數字. **CSS唯一一個用數字無單位設置單位** 代表相對于當前元素`font-size`乘以這個數字.
### `vertical-align`定義周圍元素對當前元素的定位方式. 參考行盒子. 頂線,中線,基線,底線. 4大線.
#### 取值方式
- `vertical-align:-2px`參考當前元素基線向下偏移 `2px`
- `vertical-align:50%`. 如果當前元素繼承`line-height:20px`, 那么等同于`vertical-align:10px`,當前元素向上偏移`10px`
- 關鍵字: `top middle baseline bottom`
#### 應用技巧
- `inline inline-block`元素,**周圍元素**對**當前元素**垂直對齊方式.
- 塊元素, 不生效.
- `table-cell`元素生效,但是屬性需要定義在**當前元素**上.
## 表單效果
### `radio checkbox`垂直方向不對齊不美觀的問題
- 使用`{vertical-align:-2px}`等方式微調, 既可達到滿意效果.
### `text-area`效果
- 固定大小, 禁止拖動,瀏覽器兼容同樣外觀
{width:100px; height:80px; overflow:auto; resize:nono}
### 表單對齊
- 清除`p`浮動. `p {overflow:hidden;}`
- `form` 寬度固定. 左欄固定寬度和若干右欄. 左欄`text-align:right`右對齊
- 右欄所有盒子長度相等.
- 左欄+右欄所有盒子長度 = 行寬
## 浮動布局
### 浮動會讓元素變成`block`元素, 可以定義`width height margin padding`屬性了. 會脫離正常文檔流, 后續的元素會不缺. 例如`<img>`元素右邊部分會讓后續的文字填充出來.
### 浮動影響
- 對自身影響. 轉換成塊元素`block` 同上.
- 對父元素影響. 如果父元素沒有高度或高度不夠, 會造成塌陷. 解決問題: 定義高度大于子元素, 或者也定位為浮動. 或清除浮動.
- 對兄弟元素影響. 都是浮動就一起浮動. 如果不是就會脫離文檔流, 而覆蓋后續元素占據的位置
- 對子元素影響. 自適應包裹子元素.
### 清除浮動 避免浮動影響,如覆蓋
- `clear:both` 對浮動元素后續元素應用, 譬如增加一個空`<div>`元素
- `overflow:hidden` 對父元素使用, 會導致顯示不全的問題.
- `.clearfix{*zoom:1;} .clearfix::after{clear:both;content:'';display:block;height:0;visibility:hidden;}` 清楚浮動不會有問題.
## 定位布局
- `static relative absolute fixed`四大布局. 前二者遵循正常文檔流, 后二者脫離文檔流布局.
#### 重要技巧
- 對父元素,祖先元素定義`position:relative`, 然后當前元素定義`position:absolute`定位, `top bottom left right`屬性來定位.
- `position:absolute`對導致元素變為`block`元素, 而且相對于往上追溯,第一個`relative absolute fixed`定位來實行定位.
- `{z-index:1 inherit auto}` 相應堆疊順序. 除了定位`static`時不生效, 所有布局均生效.
## CSS圖形
### 三角形
- `{border-width:20px; border-style:solid; border-color:red transparent transparent transparent;}` 三角形就出來了.
- 如果需要邊框的, 需要2個配合. 內三角要小1px, 具體略
### 圓角
- `border-radius:1px 1px 1px 1px`
### 圓 橢圓(略)
## 性能優化
- 四大發: 簡寫 工具壓縮 選擇器
### 簡寫
border: 1px solid red;
border-bottom:none; //定義另外三條,而除去這條
background:url(baidu.com) no-repeat 80px 40px . 代表定位的80 40
font:"微軟雅黑" 12px/1.5em bold //font-size和line-height值之間需要加入/,這點需要注意.
color:#000 == #000000
- 結尾分號;可不留, url()引號可不留,屬性為0可無單位,0.開頭可省略,利用組合選擇器合并,差異部分單獨定義,利用繼承父元素定義多個而子元素不用再定義.
### 工具壓縮
- YUI等
### 選擇器
- 選擇器從右往左進行. 理論上,更精確的寫在右邊.
- 少用后代`div span`選擇器, 可以多用`div>span`子選擇器替代. 同樣的`~ +`兄弟和相鄰選擇器必要時使用.
## CSS技巧
### 水平居中
- 文本, `inline inline-block`元素設置水平居中沒有問題.
- 塊元素.使用`margin:0 auto`水平居中. 需要注意的是如果本身沒有寬度,塊元素會默認占全部, 所以有時候`width:80%`來完成顯示 , 并不是全部不居中.
### 垂直居中
#### 文本垂直居中
- 單行文本: 設置`line-height height`相同
- 多行文本: `父元素{display:table-cell; vertical-align:middle;} 子元素{display:inline-block}` 把所有的文字用`span`包括起來然后使用`inline-`方式完成垂直居中
#### 元素垂直居中
- 塊元素. 萬能方法,使用了`position:absolute`所以會把元素都變成`block`元素, 所以其他元素如`inline inline-block table-cell`等都可以使用萬能方式. 注意如果水平, 垂直居中單獨可控, 去掉`left margin-left` 和 `top margin-top`單獨設置即可.
父元素{display:relative}
子元素{display:absolute; top:50%; left:50%; margin-top:'height值的一半'; margin-left:'widht一半的值'}
- 行內元素
父元素{display:table-cell; vertical-align:middle;}
子元素{vertical-align:middle;}
#### CSS Sprite
- 合并小圖標成一個大的圖標.
- ICON Font技術. 訪問阿里小圖標和文字一樣簡單.
### BFC IFC
- 好復雜. 不嚴謹做法: block,inline-block創建BFC, 而table等參與BFC. 這個以后再理解.
#### 用法
- A,B兩元素外邊距疊加. 此時對B括起來`<div style="overflow:hidden">B?</div>`創建一個BFC, 避免外邊距疊加.
- 父元素塌陷一樣的問題. 給父元素增加`overflow:hidden`之后讓子元素在一個BFC內了,高度就會參考浮動元素而進行計算.
- 自適應兩欄布局, 清除浮動. `#content{overflow:hidden}`同樣讓環繞在圖片周圍的文字,自己創立BFC, 從而實現兩欄布局而不是環繞布局.