目錄
一:浮動float
1.什么是浮動？
在 CSS 中，任何元素都可以浮動。
浮動元素會生成一個塊級框，而不論它本身是何種元素
2.浮動的作用
只要是設計到頁面的布局一般都是用浮動來提升規划好
3.浮動有兩個特點
- 浮動的框可以向左或者右移動，直到它的外邊緣碰到包含框或者另一個浮動框的邊框為止
- 由於浮動的框不在文檔的普通流中，所以文檔的普通流中的塊框表現得像浮動框不存在一樣
4.float格式
float: ;
三種取值
left : 向左浮動
right : 向右浮動
none : 默認值，不浮動
二:代碼實現左右浮動邊框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>荷官發牌</title>
<style>
/*貼合邊框*/
body {
margin: 0;
}
#d1 {
/*寬度*/
width: 20%;
/*高度*/
height: 2000px;
/*背景顏色*/
background-color: red;
float: left; /*往左浮動*/
}
#d2 {
/*寬度*/
width: 80%;
/*高度*/
height: 2000px;
/*背景顏色*/
background-color: blue;
float: right; /*往右移動*/
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>
</html>
三:浮動造成父標簽塌陷問題(清除浮動)
- 浮動帶來的影響
1.浮動會造成父標簽的影響
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>荷官發票</title>
<style>
body {
/*與邊框對其*/
margin: 0;
}
#d1 {
/*上下左右一致邊框 指定邊框顏色*/
border: 3px solid black;
}
#d2 {
/*高度*/
height: 100px;
/*寬度*/
width: 100px;
/*背景顏色*/
background-color: red;
/*向左浮動*/
float: left;
}
#d3 {
/*高度*/
height: 100px;
/*寬度*/
width: 100px;
/*背景顏色*/
background-color: greenyellow;
/*向左浮動*/
float: left;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2"></div>
<div id="d3"></div>
</div>
</body>
</html>
三:清除浮動的副作用（父標簽塌陷問題）
- 解決浮動帶來的影響
1.自己加一個div設置高度（再寫一個div撐場面(不可取)）
#d4 {
/*高度*/
height: 100px;
}
2.利用clear屬性（可以使用）
#d4 {
/*該標簽的左邊(地面和空中)不能有浮動元素*/
clear: left;
3.通用的解決浮動帶來的影響方法(通用解決策略(推薦使用):只要父標簽塌陷就使用)
在寫html頁面之前 先提前寫好處理浮動帶來的影響的 css代碼
.clearfix:after {
/*空的內容獨占一行*/
content: '';
display: block;
/*左右兩側都不能有浮動*/
clear: both;
}
之后只要標簽出現了塌陷的問題就給該塌陷的div標簽加一個class=“clearfix”屬性即可
- 該方法的解決方式是通用的 到哪都是一樣 並且名字就叫clearfix
瀏覽器默認都是文本優先展示
四:overflow溢出屬性
| 值 | 描述 |
|---|---|
| visible | 默認值。內容不會被修剪，會呈現在元素框之外。 |
| hidden | 內容會被修剪，並且其余內容是不可見的。 |
| scroll | 內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。 |
| auto | 如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容。 |
| inherit | 規定應該從父元素繼承 overflow 屬性的值。 |
- overflow（水平和垂直均設置）
- overflow-x（設置水平方向）
- overflow-y（設置垂直方向）
1.當代碼出現溢出時
2.解決代碼溢出
- 代碼溢出解決方式
/*overflow: visible; !*默認就是可見 溢出還是展示*!*/
/*overflow: hidden; !*溢出部分直接隱藏*!*/
/*overflow: scroll; !*下拉框滾動*!*/
/*overflow: auto; !*滾動顯示 當寬度比較小有下側滑動*!*/
- 代碼解決方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
/*高度*/
height: 100px;
/*寬度*/
width: 100px;
/*左右上下框一致*/
border: 3px solid red;
/*overflow: visible; !*默認就是可見 溢出還是展示*!*/
/*overflow: hidden; !*溢出部分直接隱藏*!*/
/*overflow: scroll; !*下拉框滾動*!*/
/*overflow: auto; !*滾動顯示 當寬度比較小有下側滑動*!*/
}
</style>
</head>
<body>
<p>時間會給我們答案,那就讓時間來給我們答案吧!!!時間會給我們答案,那就讓時間來給我們答案吧!!!時間會給我們答案,那就讓時間來給我們答案吧!!!時間會給我們答案,那就讓時間來給我們答案吧!!!時間會給我們答案,那就讓時間來給我們答案吧!!!時間會給我們答案,那就讓時間來給我們答案吧!!!時間會給我們答案,那就讓時間來給我們答案吧!!!時間會給我們答案,那就讓時間來給我們答案吧!!!時間會給我們答案,那就讓時間來給我們答案吧!!!時間會給我們答案,那就讓時間來給我們答案吧!!!時間會給我們答案,那就讓時間來給我們答案吧!!!時間會給我們答案,那就讓時間來給我們答案吧!!!</p>
</body>
</html>
五:代碼溢出的應用場景
1.實現個人頭像
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
/*與邊框對其*/
margin: 0;
/*背景顏色*/
background-color: #4e4e4e;
}
#d1 {
/*高度*/
height: 200px;
/*寬度*/
width: 200px;
/*畫一個圈*/
border-radius: 50%;
/*邊框一致*/
border: 5px solid white;
/*調位置*/
margin: 0 auto;
}
</style>
</head>
<body>
<div id="d1">
<img src="https://img1.baidu.com/it/u=695902172,1418263097&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=751" alt="">
</div>
</body>
</html>
2.解決設置頭像照片溢出問題
解決設置頭像照片溢出問題與比列大小問題
/*溢出位置隱藏*/
overflow: hidden;
}
#d1>img {
/*讓img標簽占#d1的百分之百*/
width: 100%;
}
3.圓形頭像示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
/*與邊框對其*/
margin: 0;
/*背景顏色*/
background-color: #4e4e4e;
}
#d1 {
/*高度*/
height: 100px;
/*寬度*/
width: 100px;
/*畫一個圈*/
border-radius: 50%;
/*邊框一致*/
border: 5px solid white;
/*調位置*/
margin: 0 auto;
/*溢出位置隱藏*/
overflow: hidden;
}
#d1>img {
/*讓img標簽占#d1的百分之百*/
width: 100%;
}
</style>
</head>
<body>
<div id="d1">
<img src="https://img0.baidu.com/it/u=2705683877,4119372584&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="">
</div>
</body>
</html>
