收藏
批改狀態(tài)：合格
老師批語：很多項目都是需要定位來實現(xiàn)的
一、如何消除子元素浮動造成父元素高度折疊的影響
如下為子元素浮動時的影響
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
.parent {
width: 200px;
border: dashed 2px blue;
}
.box {
width: 100px;
height: 100px;
float: left;
background-color: green;
}
</style>
</head>
<body>
<div class="parent">
<div class="box">我是子盒子</div>
</div>
</body>
</html>點擊 "運行實例" 按鈕查看在線實例
如果要消除此影響只需要在父盒子上添加overflow: hidden; 即可。如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
.parent {
width: 200px;
border: dashed 2px blue;
overflow: hidden;
}
.box {
width: 100px;
height: 100px;
float: left;
background-color: green;
}
</style>
</head>
<body>
<div class="parent">
<div class="box">我是子盒子</div>
</div>
</body>
</html>點擊 "運行實例" 按鈕查看在線實例
二、三列布局的實現(xiàn)原理( 絕對定位實現(xiàn), 浮動定位實現(xiàn))
絕對定位實現(xiàn)如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
.wrap {
width: 1000px;
margin: 0 auto;
}
.header {
background-color: green;
height: 100px;
}
.main {
margin: 5px auto;
position: relative;
}
.footer {
background-color: red;
height: 100px;
}
.left {
background-color: blue;
width: 200px;
height: 300px;
position: absolute;
left: 0;
top: 0;
}
.right {
background-color: pink;
width: 200px;
height: 300px;
position: absolute;
right: 0;
top: 0;
}
.content {
height: 300px;
background-color: aqua;
margin-left: 200px;
margin-right: 200px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="header">頭部</div>
<div class="main">
<div class="left">左側</div>
<div class="content">內(nèi)容</div>
<div class="right">右側</div>
</div>
<div class="footer">底部</div>
</div>
</body>
</html點擊 "運行實例" 按鈕查看在線實例
浮動定位實現(xiàn)如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
.wrap {
width: 1000px;
margin: 0 auto;
}
.header {
background-color: green;
height: 100px;
}
.main {
margin: 5px auto;
overflow: hidden;
}
.footer {
background-color: red;
height: 100px;
}
.left {
background-color: blue;
width: 200px;
height: 300px;
float: left;
}
.right {
background-color: pink;
width: 200px;
height: 300px;
float: right;
}
.content {
width: 600px;
height: 300px;
background-color: aqua;
float: left;
}
</style>
</head>
<body>
<div class="wrap">
<div class="header">頭部</div>
<div class="main">
<div class="left">左側</div>
<div class="content">內(nèi)容</div>
<div class="right">右側</div>
</div>
<div class="footer">底部</div>
</div>
</body>
</html點擊 "運行實例" 按鈕查看在線實例
總結：
1、消除子元素浮動造成父元素高度折疊的影響最佳方法是在父元素中添加overflow：hidden;
2、定位position：分為static靜態(tài)定位（默認），relative相對定位，absolute絕對定位，fixed固定定位；relative相對定位不會脫離文檔流，是相對原來位置偏移；absolute絕對定位會脫離文檔流，如果上級元素有設置定位屬性，則以最靠近該元素且設置了定位屬性的上級為參照進行定位，否則則以body為參照進行定位。
3、浮動可以實現(xiàn)特殊布局，比如三列布局，overflow：hidden，可以消除浮動對后面元素的影響。
4、定位可以實現(xiàn)遮罩、QQ客服、三列布局等；
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號
