邊框圓角?
1）
（左上角、右上角、右下角、左上角）
2）border-radius: 50%; --------圓形
3）圖片圓形顯示：(盒子圓形顯示，圖片為方形，溢出)
border-radius: 50%;
Overflow:hidden:
[if !supportLists]2、[endif]輪廓、陰影
輪廓：是不占空間的邊框，設(shè)置輪廓不會影響元素的布局（outline）
陰影：box-shadow用來設(shè)置元素的陰影，和輪廓一樣，陰影也不會影響頁面的布局
1） box-shadow 值：
inset內(nèi)部陰影
第一個值，陰影的水平偏移量：正值向右移動，負值向左移動
第二個值，陰影的垂直偏移量：正值向下移動，負值向上移動
第三個值，陰影的模糊半徑
第四個值，陰影的顏色
2）用 “，”號隔開，可設(shè)置多個陰影：
浮動：float
?1)浮動可以使元素向左或向右移動
可選值：
none默認值，不浮動
left向左浮動
right向右浮動 ??
2)浮動的特點:
1.設(shè)置浮動以后，元素會向頁面的左側(cè)或右側(cè)移動
2.設(shè)置浮動以后，元素會完全脫離文檔流，不再占據(jù)文檔流中的位置，所以它下邊的元素會自動上移
3.浮動元素不會超過其上沒有浮動的塊元素（兄弟元素），也不會超出父元素。
4.浮動元素的默認位置不會超過其上的其他的浮動元素，最多一邊齊 ?????????
3)元素脫離文檔流以后的特點：
1.默認寬度被內(nèi)容撐開
2.默認高度被內(nèi)容撐開
3.塊元素不會獨占一行。
4.元素不會在文檔流中再占據(jù)位置。 ??
行內(nèi)元素浮動以后也會脫離文檔流，脫離文檔流以后行內(nèi)元素自動變成塊元素，特點和塊元素一樣
4）文字不會被浮動元素所覆蓋，而是環(huán)繞在浮動元素的四周，從而我們可以利用浮動來實現(xiàn)一個文字環(huán)繞圖片的效果。
]布局
?豎著：直接寫；橫著：浮動。
1)
???=========網(wǎng)頁的頭部
??????????????=========網(wǎng)頁的主體
?????<nav> </nav>
?????<aside></aside>
?????<section></section>
</main> ?????
?????=========網(wǎng)頁的底部
[if !supportLists]2)?[endif]公共的樣式提取出來：為、<main> 、<footer>設(shè)置類名w ，寫公共樣式
5、高度塌陷
1）
高度塌陷，塊元素的高度默認情況下是被子元素撐開的，如果子元素浮動，將會完全脫離文檔流，脫離文檔流子元素無法撐起父元素高度，將會導(dǎo)致父元素高度丟失，父元素一旦丟失頁面的其他元素位置也會移動，導(dǎo)致布局的混亂。
[if !supportLists]2）?[endif]BFC
[if !supportLists]1>?[endif]BFC（Block Format Context）
-塊級格式化環(huán)境
- BFC是元素的一個隱藏的屬性，一旦元素開了BFC它將會開啟一個獨立的布局的區(qū)域，這個區(qū)域會獨立布局，不會受到其他外部元素的影響。
這個布局區(qū)域?qū)哂幸恍┨厥獾男再|(zhì)：
1.開啟了BFC的元素子元素的垂直外邊距不會傳遞給父元素
2.開啟了BFC的元素，不會被浮動的元素所覆蓋（d1、d2垂直排列，d1浮動，d2上移，被d1覆蓋。d2開啟BFC ，挨著d1向左排列）
3.開啟了BFC的元素可以包含浮動的子元素 ???????????
3> ?BFC無法直接開啟，需要通過一些屬性來開啟BFC
1.設(shè)置元素浮動可以開啟BFC
2.將元素設(shè)置為行內(nèi)塊元素
3.可以將元素的overflow設(shè)置為一個非visible的（影響最?。?/p>
4>我們可以通過?overflow:hidden來開啟元素的bfc，從而解決高度塌陷的went
3)清除浮動：clear用來清除浮動元素對當前元素的影響
可選值：
none默認值 不清除
left清除左側(cè)浮動元素對當前元素的影響
right清除右側(cè)浮動元素對當前元素的影響
both清除兩側(cè)中對當前元素影響最大的那一側(cè)
[if !supportLists]3）?[endif]解決高度塌陷和垂直相鄰?fù)膺吘嗾郫B問題?
1解決高度塌陷：
開啟父元素BFC，overflow: hidden;
使用clearfix:
???.clearfix::after{
content: “”;
????????dispaly:block;
????????clear:both;
2解決高度塌陷和垂直相鄰?fù)膺吘嗾郫B問題
?.clearfix::before, .clear::after{
Content: ‘?’:
Display :table;
Clear :both;
}
?
