解決高度塌陷、定位問題
高度塌陷
父元素包含的子元素,子元素多高。父親沒指定,預設子元素高。
子元素設定浮動以後,子元素脫離文件流,此時子元素無法撐起父元素的高度,導致父元素的高度塌陷
我們可以將父元素的高度寫死,避免塌陷
元素重疊,子父一起動。
解決高度塌陷
面試 開啟BFC
特點
1 設定元素浮動 缺點寬度丟失 不推薦
2設定元素絕對定位 不推薦和1一樣
3 設定元素為inline-block 缺點寬度丟失 也不推薦
4將元素的overflow設定為一個非visible的值 推薦
ie6以下不執行BFC。
(但是還有背的屬性 haslayout(類似BFC))
(只是在ie裡面支援)zoom:1;後面代表放大倍數。1是預設不放大。
所以預設這二個同時寫。
ie6設定寬度了,在伺服器端就不會踏。
清除浮動
.box1{
width: 100px;
height: 100px;
background-color: yellow;
/*設定box1向左浮動*/
float: left;
}
.box2{
width: 200px;
height: 200px;
background-color: yellowgreen;
box1影響box2上移,為了不影響浮動對當前元素產生的影響。
clear來完成功能
可選值:
none,預設值,不清除浮動
left,清除左側浮動元素對當前元素的影響
right,清除右側浮動元素對當前元素的影響
both,清除兩側浮動元素對當前元素的影響
清除對他影響最大的那個元素的浮動
解決高度塌陷
可以直接在高度塌陷的父元素的最後,新增一個空白的div,由於這個div並沒有浮動,所以他是可以撐開父元素的高度的
.clear{
clear: both;
}
可以通過after偽類向元素的最後新增一個空白的塊元素,然後對其清除浮動最推薦
after內聯元素。偽類
.clearfix:after{
content: "";
/*轉換為一個塊元素*/
display: block;
/*清除兩側的浮動*/
clear: both;
}
/*在ie6中不支援after偽類處理*/
.clearfix{
zoom: 1;
}
相對定位
相對定位元素,位置還有,不脫離文件流。所以塊還是快,內聯還是內聯。position:relative。會提升一個層級。
相對自身的位置定位。
left: 100px;
top: 200px;
絕對定位。
position:absolute。
脫離文件流。
相對於離他最近開啟定位的祖先元素。都沒開就是瀏覽器左上角。
會提升一個層級。
內聯變塊,寬高有效,塊變被內容撐開。
父元素開相對
子元素相對於父元素開絕對。
relative(必須有)
固定定位
static:預設值,元素沒有開啟定位
relative:開啟元素的相對定位
absolute:開啟元素的絕對定位
fixed:開啟元素的固定定位(也是絕對定位的一種)
固定定位也是一種絕對定位,它的大部分特點都和絕對定位一樣
不同的是:
固定定位永遠相對00
當滾動條動,他也不走。
fixed
![11576306-80a4521f241fcb75.png](https://upload-images.jianshu.io/upload_images/11576306-80a4521f241fcb75.png)
demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>homework</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
font: 12px/1 字型
}
.outer{
width: 300px ;
/*height:471px ;*/
/*background-color: #bfa;*/
margin: 0 auto;
}
.title{
border-top: 2px #019e8b solid;
height:36px ;
background-color: #f5f5f5;
line-height: 36px;
padding: 0px 22px 0px 16px;
}
.title a{
float: right;
color: red
}
.title h3{
font: 16px/36px '微軟雅黑'
/*改掉預設的行高*/
}
.content h3{
margin-top: 15px;
margin-bottom: 15px;
}
.content{
border: 1px solid #deddd9;
/*高考內容撐開*/
padding: 0px 28px 0px 20px
}
.content li{
margin-bottom: 15px;
}
.content a{
color: black;
text-decoration: none;
font-size:12px;
}
.content a:hover{
color: red;
text-decoration:underline;
}
.content ul{
list-style: none;
border-bottom: 1px dashed #deddd9;
}
.content .red-font{
color: red;
font-weight: bold;
}
.content .right{
float: right;
}
.content .no-border{
border: none;
}
</style>
</head>
<body>
<div class="outer">
<div class="title">
<a href="#">18年面授開班計劃</a>
<h3>近期開班</h3>
</div>
<div class="content">
<h3><a href="#">人工智慧+python-高薪就業班</a></h3>
<ul>
<li>
<a class='right' href="#"><span class="red-font">預約報名</span></a>
<a href="#">開班時間: <span class="red-font">2018-04-26</span></a>
</li>
<li>
<a class='right' href="#"><span class="red-font">無座名額爆滿</span></a>
<a href="#">開班時間: <span class="red-font">2018-04-26</span></a>
</li>
<li>
<a class='right' href="#"><span >開班盛況</span></a>
<a href="#">開班時間: <span >2018-04-26</span></a>
</li>
<li>
<a class='right' href="#"><span >開班盛況</span></a>
<a href="#">開班時間: <span ">2018-04-26</span></a>
</li>
<li>
<a class='right' href="#"><span >開班盛況</span></a>
<a href="#">開班時間: <span >2018-04-26</span></a>
</li>
</ul>
<h3><a href="#">Android開發+測試-高薪就業班</a></h3>
<ul>
<li>
<a class='right' href="#"><span class="red-font">預約報名</span></a>
<a href="#">開班時間: <span class="red-font">2018-04-26</span></a>
</li>
<li>
<a class='right' href="#"><span >開班盛況</span></a>
<a href="#">開班時間: <span >2018-04-26</span></a>
</li>
<li>
<a class='right' href="#"><span >開班盛況</span></a>
<a href="#">開班時間: <span ">2018-04-26</span></a>
</li>
<li>
<a class='right' href="#"><span >開班盛況</span></a>
<a href="#">開班時間: <span >2018-04-26</span></a>
</li>
</ul>
<h3><a href="#">大資料軟體開發-青芒工作室</a></h3>
<ul class="no-border">
<li>
<a class='right' href="#"><span class="red-font">預約報名</span></a>
<a href="#">開班時間: <span class="red-font">2018-04-26</span></a>
</li>
<li>
<a class='right' href="#"><span >開班盛況</span></a>
<a href="#">開班時間: <span ">2018-04-26</span></a>
</li>
<li>
<a class='right' href="#"><span >開班盛況</span></a>
<a href="#">開班時間: <span >2018-04-26</span></a>
</li>
</ul>
</div>
</div>
</body>
</html>
相關文章
- 解決高度塌陷問題
- css高度塌陷問題解決方法CSS
- 高度塌陷 解決高度塌陷 導航條 清除浮動 相對定位
- HTML5基礎加強css樣式篇(float補充,清除浮動解決高度塌陷問題,定位補充)(一)HTMLCSS
- 淺談CSS中浮動float帶來的高度塌陷問題及4種解決方案CSS
- CSS元素高度塌陷的幾種常見解決辦法!CSS
- 磁碟問題定位與解決
- 父元素沒有被撐開塌陷問題解決方案
- 盒子模型的外邊距塌陷和合並問題及解決方案模型
- 解決margin塌陷和margin合併
- 解決「問題」,不要解決問題
- 真正解決iframe高度自適應問題
- 安卓開發——WebView+Recyclerview文章詳情頁,解決高度問題安卓WebView
- 該怎麼解決運維定位服務故障問題?運維
- 三種方法解決浮動元素父容器高度自適應問題
- web前端陣列塌陷的解決辦法Web前端陣列
- Android鎖屏黑屏後連續定位問題解決方案Android
- 實戰 | Hive 資料傾斜問題定位排查及解決Hive
- HHMySQL?中定位?DDL?被阻塞的問題及解決方案xmwMySql
- JBuilder Editor中游標不能正確定位問題的解決 (轉)UI
- 解決Android通過BitmapFactory獲取圖片寬高度相反的問題Android
- Ubuntu出現“E: 無法定位軟體包問題”解決方法Ubuntu
- 解決問題
- 解決Flutter的ListView巢狀ListView滑動衝突以及無限高度問題FlutterView巢狀
- 發現問題,解決問題
- 有效解決移動端虛擬鍵盤影響fixed定位問題
- 利用PhantomJS進行網頁截圖,完美解決擷取高度的問題JS網頁
- yum問題解決
- sqlitedabaseislocked問題解決SQLite
- dump 解決問題
- 定位和居中問題
- JVM問題定位工具JVM
- CSS解決未知高度垂直居中CSS
- 提問題比解決問題更重要
- Android高德地圖定位SDK 返回資訊中只有經緯度問題解決Android地圖
- SERVICE問題解決方法
- qeephp 解決跨越問題PHP
- bg配置問題解決