css第四天
border-radius 屬性用於設定元素的外邊框圓角
border-radius:length; # radius：半徑
引數值可以為數值或百分比的形式
如果是正方形，想要設定為乙個圓，把數值修改為高度或者寬度的一半即可，或者直接寫為50%
該屬性是乙個簡寫屬性，可以跟四個值，分別代表左上角、右上角、右下角、左下角
分開寫：border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和border-bottom-left-radius
box-shadow 為盒子新增陰影
語法： box-shadow: h-shadow v-shadow blur spread color inset;
注意：預設的是**影（outset）,但是不可以寫這個單詞，否則造成陰影無效；盒子陰影不占用空間，不會影響其他盒子排列
text-shadow：h-shadow（水平陰影的位置，允許負值） v-shadow（垂直陰影的位置，允許負值） blur（模糊的距離） color（陰影的顏色）;
css提供了三種傳統布局方式：普通流、浮動、定位
所謂的標準流: 就是標籤按照規定好預設方式排列
（1）塊級元素會獨佔一行，從上向下順序排列。常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table
（2）行內元素會按照順序，從左到右順序排列，碰到父元素邊緣則自動換行。常用元素：span、a、i、em 等
標準流是最基本的布局方式
浮動最典型的應用：可以讓多個塊級元素一行內排列顯示
網頁布局第一準則：多個塊級元素縱向排列找標準流，多個塊級元素橫向排列找浮動
（1）float屬性用於建立浮動框，將其移動到一邊，直到左邊緣或右邊緣觸及包含塊或另乙個浮動框的邊緣
簡單理解：
第乙個浮動的元素，會貼著瀏覽器（父元素）的邊緣顯示（左浮動貼著瀏覽器左側邊緣，右浮動貼右）
同乙個方向浮動的多個元素，非第乙個浮動的元素，會挨著上乙個浮動的元素顯示
（2）語法：
選擇器
屬性值 描述
none 元素不浮動（預設值）
left 元素向左浮動
right 元素向右浮動
5.1.脫標
浮動元素會脫離標準流(脫標：浮動的盒子不再保留原先的位置)
浮動可以理解為讓某個div元素脫離標準流，漂浮在標準流之上，和標準流不是乙個層次。
5.2.一行顯示
（1）浮動的元素會一行內顯示並且元素頂部對齊
（2）如果多個盒子都設定了浮動，則它們會按照屬性值一行內顯示並且頂端對齊排列
注意：浮動的元素是互相貼靠在一起的（不會有縫隙），如果父級寬度裝不下這些浮動的盒子，多出的盒子會另起一行對齊
5.3.浮動元素-行內塊
（1）浮動的元素會具有行內塊元素的特性
（2）任何元素都可以浮動。不管原先是什麼模式的元素，新增浮動之後具有行內塊元素相似的特性。
（3）如果塊級盒子沒有設定寬度，預設寬度和父級一樣寬，但是新增浮動後，它的大小根據內容來決定
（4）浮動的盒子中間是沒有縫隙的，是緊挨著一起的
（5）行內元素同理
為了約束浮動元素位置, 我們網頁布局一般採取的策略是：先用標準流父元素排列上下位置, 之後內部子元素採取浮動排列左右位置. 符合網頁布局第一準則
（1）浮動和標準流的父盒子搭配
先用標準流的父元素排列上下位置, 之後內部子元素採取浮動排列左右位置
（2）乙個元素浮動了，理論上其餘的兄弟元素也要浮動
乙個盒子裡面有多個子盒子，如果其中乙個盒子浮動了，其他兄弟也應該浮動，以防止引起問題。
浮動的盒子只會影響浮動盒子後面的標準流,不會影響前面的標準流
（1）由於父級盒子很多情況下，不方便給高度，但是子盒子浮動又不占有位置，最後父級盒子高度為 0 時，就會影響下面的標準流盒子
（2）由於浮動元素不再占用原文件流的位置，所以它會對後面的元素排版產生影響
（3）父元素如果沒有主動設定大小，只能被標準流的子元素撐開
清除浮動的本質是清除浮動元素造成的影響：浮動的子標籤無法撐開父盒子的高度
注意：（1）如果父盒子本身有高度，則不需要清除浮動
（2）清除浮動之後，父級就會根據浮動的子盒子自動檢測高度
（3）父級有了高度，就不會影響下面的標準流了
語法：選擇器
屬性值 描述
left 不允許左側有浮動元素（清除左側浮動的影響）
right 不允許右側有浮動元素（清除右側浮動的影響）
both 同時清除左右兩側浮動的影響
實際工作中，幾乎只用clear：both；
清除浮動的策略是: 閉合浮動
（1）清除浮動是被浮動影響的元素（不是設定浮動的元素）去清除，利用clear:both去清除浮動，並不能解決設定浮動的元素產生的高度坍塌的問題
（2）閉合浮動是包含浮動元素的父元素去閉合浮動，從而達到避免浮動帶來影響的效果
所以我們要做的其實是閉合浮動而不是清除浮動
理解：清除浮動：是給被影響的元素，新增**解決問題
閉合浮動：是給產生問題的父元素，新增**解決問題
5.1.額外標籤法
"clear:both"
>
<
/div>或者其他標籤（如< br />等）。
優點： 通俗易懂，書寫方便
缺點： 新增許多無意義的標籤，結構化較差
注意：要求這個新的空標籤必須是塊級元素
（3）總結：
1）清除浮動本質是？
清除浮動的本質是清除浮動元素脫離標準流造成的影響
2）清除浮動策略是？
閉合浮動。只讓浮動在盒子內部影響，不影響父盒子外面的其他盒子
3）額外標籤法？
隔牆法，就是在最後乙個浮動的子元素後面新增乙個額外標籤，新增清除浮動樣式
4）問題：為啥新增了額外標籤就可以解決浮動產生的問題？
分析：首先需要知道現在的問題是啥？因為兒子都浮動了，所以爹沒有高度
正常來說，爹沒有主動設定高度，會根據標準流兒子的大小來撐開（爹檢測兒子的寬高了）
但是現在的兒子都不是正常兒子，都飄了，所以爹就沒辦法檢測兒子的大小
所以，現在我們只需要再次讓爹開始檢測兒子的寬高就行了，那麼只要兒子中有乙個正常的兒子，他就會重新檢測，這時候也會發現那些飄起來的兒子。
5.2.父級新增overflow屬性
（1）可以給父級新增overflow屬性，將其屬性值設定為hidden、auto或scroll
例如：overflow:hidden | auto | scroll;
缺點：無法顯示溢位的部分
子不教,父之過，注意是給父元素新增**
（3）問題：為啥overflow：hidden可以解決浮動問題？
分析：overflow：hidden是溢位隱藏，就是超出父元素的部分會隱藏，那麼這個屬性一旦新增，父元素就需要知道哪部分溢位了，意味著就會檢測一遍兒子的大小，這時候就會發現有飄起來的兒子
5.3.父級新增after偽元素
:after 方式是額外標籤法的公升級版。
給父元素新增：
.clearfix:after
.clearfix
給父元素新增：
.clearfix:before,
.clearfix:after
.clearfix:after
.clearfix
1.父級沒高度
2.子盒子浮動了
3.影響下面布局了，我們就應該清除浮動了
前端第四天
盒子在父級水平居中 margin 0 auto 文字樣式操作 color red text align center font 900 30px 200px stsong 微軟雅黑 reset操作 清除預設樣式 html,body,h1,h6,p,ul 高階選擇器 每乙個選擇器位都可以替換為任意基礎...
前端 第四天學習
第四天知識總結 1 樣式表 內部樣式表 外部樣式表 內聯樣式表 2 樣式表的權重 內聯樣式表的權重最大！內部和外部樣式的權重，和書寫的前後順序有關！放在後面的會把放在前面的樣式覆蓋掉,覆蓋的只是相同屬性的樣式，不同屬性的樣式會繼續執行。3 css選擇符 css語法 選擇符 選擇符 選擇符就是給標籤起...
學習前端第四天
三十六 css的產生 cascading style sheets 層疊樣式表 隨著html的成長，為了滿足頁面設計的要求，html新增了很多顯示的功能，但是隨著這些功能的增加，html變得越來越雜亂，而且html頁面也越來越臃腫，於是css便誕生了，它的版本有2.0和3.0的版本，css3因為有相...