css第04天
一、其他樣式
1、圓角邊框
在 CSS3 中，新增了圓角邊框樣式，這樣我們的盒子就可以變圓角了。
border-radius 屬性用于設置元素的外邊框圓角。
語法：
border-radius:length;
- 參數值可以為數值或百分比的形式
- 如果是正方形，想要設置為一個圓，把數值修改為高度或者寬度的一半即可，或者直接寫為 50%，如果是個矩形，設置為高度的一半就可以做
- 該屬性是一個簡寫屬性，可以跟四個值，分別代表左上角、右上角、右下角、左下角
- 分開寫：border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和border-bottom-left-radius
- 兼容性 ie9+ 瀏覽器支持, 但是不會影響頁面布局,可以放心使用
2、盒子陰影
CSS3 中新增了盒子陰影，我們可以使用 box-shadow 屬性為盒子添加陰影。
語法：
box-shadow: h-shadow v-shadow blur spread color inset;
注意：
1.默認的是外陰影(outset),但是不可以寫這個單詞，否則導致陰影無效
2.盒子陰影不占用空間，不會影響其他盒子排列。
3、文字陰影
在 CSS3 中，我們可以使用 text-shadow 屬性將陰影應用于文本。
語法：
text-shadow: h-shadow v-shadow blur color;
二、浮動
1、傳統網頁布局的三種方式
? CSS 提供了三種傳統布局方式(簡單說,就是盒子如何進行排列順序)：
-
普通流（標準流）
-
浮動
-
定位
這三種布局方式都是用來擺放盒子的，盒子擺放到合適位置，布局自然就完成了。
注意：實際開發中，一個頁面基本都包含了這三種布局方式（后面移動端學習新的布局方式） 。
2、標準流（普通流/文檔流）
所謂的標準流: 就是標簽按照規定好默認方式排列
- 塊級元素會獨占一行，從上向下順序排列。常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table
- 行內元素會按照順序，從左到右順序排列，碰到父元素邊緣則自動換行。常用元素：span、a、i、em 等
以上都是標準流布局，我們前面學習的就是標準流，標準流是最基本的布局方式。
3、為什么需要浮動？
? 總結： 有很多的布局效果，標準流沒有辦法完成，此時就可以利用浮動完成布局。 因為浮動可以改變元素標簽默認的排列方式.
? 浮動最典型的應用：可以讓多個塊級元素一行內排列顯示。
? 網頁布局第一準則：多個塊級元素縱向排列找標準流，多個塊級元素橫向排列找浮動。
4、什么是浮動？
? float 屬性用于創建浮動框，將其移動到一邊，直到左邊緣或右邊緣觸及包含塊或另一個浮動框的邊緣。
語法：
選擇器 { float: 屬性值; }
5、浮動特性(重難點)
加了浮動之后的元素,會具有很多特性,需要我們掌握的.
1、浮動元素會脫離標準流(脫標：浮動的盒子不再保留原先的位置)
2、浮動的元素會一行內顯示并且元素頂部對齊
注意：
? 浮動的元素是互相貼靠在一起的（不會有縫隙），如果父級寬度裝不下這些浮動的盒子，多出的盒子會另起一行對齊。
3、浮動的元素會具有行內塊元素的特性
任何元素都可以浮動。不管原先是什么模式的元素，添加浮動之后具有行內塊元素相似的特性。
? 浮動元素的大小根據內容來決定
? 浮動的盒子中間是沒有縫隙的
6、浮動元素經常和標準流父級搭配使用
為了約束浮動元素位置, 我們網頁布局一般采取的策略是:
? 先用標準流父元素排列上下位置, 之后內部子元素采取浮動排列左右位置. 符合網頁布局第一準側
三、常見網頁布局
浮動布局注意點
1、浮動和標準流的父盒子搭配。
先用標準流的父元素排列上下位置, 之后內部子元素采取浮動排列左右位置
2、一個元素浮動了，理論上其余的兄弟元素也要浮動。
一個盒子里面有多個子盒子，如果其中一個盒子浮動了，其他兄弟也應該浮動，以防止引起問題。
浮動的盒子只會影響浮動盒子后面的標準流,不會影響前面的標準流.
四、清除浮動
1、為什么需要清除浮動？
? 由于父級盒子很多情況下，不方便給高度，但是子盒子浮動又不占有位置，最后父級盒子高度為 0 時，就會影響下面的標準流盒子。
2、清除浮動本質
清除浮動的本質是清除浮動元素造成的影響：浮動的子標簽無法撐開父盒子的高度
注意：
- 如果父盒子本身有高度，則不需要清除浮動
- 清除浮動之后，父級就會根據浮動的子盒子自動檢測高度。
- 父級有了高度，就不會影響下面的標準流了
3、清除浮動樣式
語法：
選擇器{clear:屬性值;}
我們實際工作中， 幾乎只用 clear: both;
清除浮動的策略是: 閉合浮動.
4、清除浮動的多種方式
4.1、額外標簽法
額外標簽法也稱為隔墻法，是 W3C 推薦的做法。
使用方式：
? 額外標簽法會在浮動元素末尾添加一個空的標簽。
例如 <div style="clear:both"></div>，或者其他標簽（如<br />等）。
? 優點： 通俗易懂，書寫方便
? 缺點： 添加許多無意義的標簽，結構化較差
? 注意： 要求這個新的空標簽必須是塊級元素。
總結:
? 1、清除浮動本質是?
? 清除浮動的本質是清除浮動元素脫離標準流造成的影響
? 2、清除浮動策略是?
? 閉合浮動. 只讓浮動在父盒子內部影響,不影響父盒子外面的其他盒子.
? 3、額外標簽法?
? 隔墻法, 就是在最后一個浮動的子元素后面添加一個額外標簽, 添加 清除浮動樣式.
? 實際工作可能會遇到,但是不常用
4.2、父級添加 overflow 屬性
可以給父級添加 overflow 屬性，將其屬性值設置為 hidden、 auto 或 scroll 。
例如：
overflow:hidden | auto | scroll;
優點：代碼簡潔
缺點：無法顯示溢出的部分
注意：是給父元素添加代碼
4.3、父級添加after偽元素
:after 方式是額外標簽法的升級版。給父元素添加：
.clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { /* IE6、7 專有 */ *zoom: 1;}
優點：沒有增加標簽，結構更簡單
缺點：照顧低版本瀏覽器
代表網站： 百度、淘寶網、網易等
4.4、父級添加雙偽元素
給父元素添加
.clearfix:before,.clearfix:after {content:"";display:table; }.clearfix:after {clear:both;}.clearfix {*zoom:1;}
優點：代碼更簡潔
缺點：照顧低版本瀏覽器
代表網站：小米、騰訊等
總結
為什么需要清除浮動？
- 父級沒高度。
- 子盒子浮動了。
- 影響下面布局了，我們就應該清除浮動了。
五、PS 切圖
1、圖層切圖
最簡單的切圖方式：右擊圖層 → 導出 → 切片。
2、切片切圖
2.1、利用切片選中圖片
利用切片工具手動劃出
2.2、導出選中的圖片
文件菜單 → 存儲為 web 設備所用格式 → 選擇我們要的圖片格式 → 存儲 。
3、PS插件切圖
? Cutterman 是一款運行在 Photoshop 中的插件，能夠自動將你需要的圖層進行輸出，以替代傳統的手工 “導出 web 所用格式” 以及使用切片工具進行挨個切圖的繁瑣流程。
官網：http://www.cutterman.cn/zh/cutterman
注意：Cutterman 插件要求你的 PS 必須是完整版，不能是綠色版，所以大家需要安裝完整版本。
Python3 接口自動化測試，測試結果發送郵件)
