今日學習
1.CSS布局三種機制
2.CSS浮動
3.CSS浮動特點
4.CSS清除浮動
擴展css3屬性圓角邊框
矩形 -- 包含正方形和長方形。
正方形變成圓 ---- -:寬高的一半(50%)。
矩形變成橢圓 ---- -值:高度的一半。
.radius {
width: 200px;
height: 120px;
background-color: pink;
/* 四個值遵循順時針，從上左角開始數 */
border-radius: 0px 40px 0 40px;
}
?
3. 可以設置不同的圓角:
<div class="radius">div>
/*圓形的大頭貼*/
img {
width: 100px;
height: 100px;
border-radius: 50%;
}
?
<img src="./img.jpg" alt="">盒子陰影
box-:水平陰影 垂直陰影 模糊距離（虛實） 陰影尺寸（影子大小） 陰影顏色 內/外陰影(默認網頁為什么要用浮動，但是不要寫這個值)；
注意：水平陰影和垂直陰影是必須書寫，不能省略。
雙陰影的寫法，如下：
div {
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, .6),
8px 10px 9px -3px yellow;
}
?
<div>div>文字陰影
text-:水平（必須）垂直（必須） 模糊距離 陰影顏色。
文字也可以雙陰影，基本不用
text-shadow: 5px 2px 3px rgb(100, 12, 88), 6px 6px 5px rgb(90, 100, 0);css布局三種機制
三種機制 -- 普通流（標準流） 浮動 定位
普通流
為什么需要浮動
網頁布局要求，標準流不能滿足我們的需要了，因此我們需要浮動來完成網頁布局。
舉例子：
前面學過行內塊，行內塊可以一排顯示；但是中間會有縫隙，所以不能滿足我們的開發需求。
認識浮動
選擇器{float:屬性值;} 值：none(沒有)left(左浮動)right(右浮動)
注意：標準流占有位置。
浮動的特點（重點！）
權重復習：
*和繼承 0000
標簽 0001
類選擇器(偽類) 0010
ID選擇器 0100
行內樣式 1000
！important 無窮大浮動排版注意點浮動與兄弟盒子的關系（重點）
標準流--占有位置浮動--- 不占位置(脫標)
浮動只會影響當前的或者是后面的標準流盒子，不會影響前面的標準流。
浮動元素與父盒子的關系(重點)清除浮動（理解）
如果子盒子是標流，因為標流占有位置，所以父親能檢測到高度。
子盒子浮動了，不占有位置，又因為父親高度為零；所以父親檢測不到高度。
清除浮動的本質
清除前面的盒子設置浮動后，帶給后面盒子的影響。
額外標簽法（不推薦使用）
缺點：結構容易亂。
給浮動元素的父親添加屬性方法（也不是很推薦）
:;
缺點：內容增多的時候導致內容被剪貼掉網頁為什么要用浮動，無法顯示需要溢出的內容。
after偽元素清除浮動（推薦）
.clearfix:after {
/* 使用偽元素必須添加content屬性 */
content: "";
/* 因為偽元素是行內元素，所以需要轉換成塊元素 */
display: block;
/* 兼容 */
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/* IE6、7 專有 */
*zoom: 1;
}雙偽元素清除浮動(推薦)
.clearfix::before,
.clearfix::after {
/* 要想使用偽元素，必須寫上content屬性 */
content: "";
/* 這里寫成block也是沒有問題的，為什么使用table,這是老的寫法，兼容老版本瀏覽器 */
display: table;
}
.clearfix::after {
clear: both;
}
.clearfix {
*zoom: 1;
}什么時候清除浮動？
1.父親沒有高度。
2.子盒子又浮動。
3.因為浮動影響了后面的布局。