1：網頁的布局方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
*{padding: 0px;margin: 0px;}
.box1
{
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.box2
{
width: 100px;
height: 100px;
background-color: blue;
float: right;
margin-right: 100px;
}
</style>
</head>
<body>
<span class="box1"></span>
<span class="box2"></span>
</body>
</html>
注意一下：
float特點: 1:浮動的元素能讓行內元素設定寬高. 2:記住,浮動的元素能使用內外邊距. 3:浮動中不區分行內/塊級/行內塊級元素的.都可以設定寬高. 4:浮動元素是一種水平排版的東西. 5:浮動跟行內塊級元素很像. 6:float只能水平排版. 缺點: 1:浮動中沒有居中對齊,沒有.只有左對齊 右對齊. 2:但是不能使用margin: 0 auto;使用這樣無效. 什么是水平排版? 行內元素/行內塊級元素 什么是垂直排版? 塊級元素
效果：
2：浮動元素的脫標
代碼示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
*{padding: 0px;margin: 0px;}
.box1
{
float: left;
width: 100px;
height: 100px;
background-color: red;
}
.box2
{
width: 150px;
height: 150px;
background-color: blue;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
注意一下.
什么是脫標?
1:如果一個元素設定浮動之后,他就脫離標準流了(脫標).像是浮動起來了.他會蓋住沒浮動的元素.
效果：
浮動元素排序規則
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
*{padding: 0px;margin: 0px;}
.box1
{
float: left;
width: 50px;
height: 50px;
background-color: red;
}
.box2
{
width: 100px;
height: 100px;
background-color: pink;
}
.box3
{
float: left;
width: 150px;
height: 150px;
background-color: yellow;
}
.box4
{
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
</body>
</html>
注意一下:
相同方向上的浮動元素, 先浮動的元素會顯示在前面, 后浮動的元素會顯示在后面
不同方向上的浮動元素, 左浮動會找左浮動, 右浮動會找右浮動
難點：
浮動元素浮動之后的位置, 由浮動元素浮動之前在標準流中的位置來確定
什么意思？
如果這個設定浮動的元素在第一行,浮動之后也會在第一行.(只不過是以浮動的形式而已)
效果：
浮動元素貼靠現象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
*{padding: 0px;margin: 0px;}
.father
{
width: 400px;
height: 400px;
background-color: yellow;
}
.box1
{
float: left;
width: 50px;
height: 300px;
background-color: red;
}
.box2{
float: left;
width: 50px;
height: 100px;
background-color: green;
}
.box3{
float: left;
width: 250px;
height: 100px;
background-color: blue;
}
/*.box4
{
float: left;
width: 500px;
height: 500px;
background-color: black;
}*/
</style>
</head>
<body>
<div class="father">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</div>
</body>
</html>
注意一下：
什么是浮動元素貼靠現象?
1.如果父元素的寬度能夠顯示所有浮動元素, 那么浮動的元素會并排顯示
2.如果父元素的寬度不能顯示所有浮動元素, 那么會從最后一個元素·開始往前貼靠
3.如果貼靠了前面所有浮動元素之后都不能顯示, 最侄訓貼靠到父元素的左邊或者右邊，
效果：
浮動元素字圍現象：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>62-浮動元素字圍現象</title>
<style>
div{
float: left;
width: 100px;
height: 100px;
/*background-color: red;*/
border: 1px solid #000;
}
p{
width: 500px;
height: 500px;
background-color: yellow;
}
img{
float: left;
}
</style>
</head>
<body>
<!--<div></div>-->
<img src="images/girl.jpg" alt="">
<p>1999年-2002年范冰冰一共出演了《青春出動》、《小李飛刀》、《秦始皇》、《中關村風云》、《少年包青天2》《塵埃落定》等十七部電視劇[12] ，以及《河東獅吼》等三部電影[13] ，
2003年在由梁羽生小說改編的電視劇《萍蹤俠影》中飾演女主角云蕾，同年在馮小剛執導的賀歲檔電影《手機》中飾演女主角武月[14] ，
2004年憑借電影《手機》獲得第27屆大眾電影百花獎最佳女主角獎，同時《手機》也獲得大眾電影百花獎最佳故事片獎，[2] 9月，出演根據古龍小說改編的古裝劇《小魚兒與花無缺》，飾演女主角鐵心蘭[15] ，同年出演《大唐芙蓉園》中的楊玉環等五部電視劇，以及電影《千機變2》和《情癲大圣》[16] ，
2005年發行首張個人專輯《剛剛開始》，這張處女大碟由圈內多位音樂人聯袂制作，包含了多種風格迥異的音樂元素，[3] 同年主演由張之亮執導的古裝片《墨攻》，飾演女主角逸悅，[17]
2006年出演電視劇《封神榜之鳳鳴岐山》，飾演女主角蘇妲己，之后接連拍攝《蘋果》、《導火線》、《心中有鬼》等六部電影[18] ，
2007年2月，主演的電影《蘋果》入圍第57屆柏林國際電影節主
范冰冰
范冰冰(23張)
競賽單元，導演李玉，女主演范冰冰，男主演佟大為共同出席本屆電影節，[19] 6月，范冰冰與華誼約滿，自組作業室，投資拍攝民國劇《胭脂雪》，并首次擔當制片人，同時飾演女主角文玉禾[20] ，10月，憑借電影《蘋果》獲得第四屆歐亞國際電影節最佳女演員獎，[21] 同年出演《合約情人》、《精舞門》、《新宿事件》等五部電影[22] ，同年憑借電影《心中有鬼》獲得第44屆臺灣電影金馬獎最佳女配角[4] ，</p>
</body>
</html>
注意一下,
1.什么是浮動元素字圍現象?
浮動元素不會擋住沒有浮動元素中的文字, 沒有浮動的文字會自動給浮動的元素讓位置,這個就是浮動元素字圍現象
效果：
浮動元素高度問題
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>64-浮動元素高度問題</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
border: 1px solid #000;
}
p{
float: left;
width: 50px;
height: 50px;
background-color: red;
}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
</html>
注意一下,
在浮動流中浮動的元素是不可以撐起父元素的高度的
效果：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/200671.html
標籤：其他
上一篇：Redis高可用—資料持久化
下一篇：CSS偽類