流式布局中，body設(shè)置了寬度、最大寬度擎析、最小寬度。一般子塊級元素不設(shè)置寬度都會繼承body的寬度钱骂，但是當子元素設(shè)置為固定定位時position:fixed叔锐，元素寬度則根據(jù)內(nèi)容決定寬度挪鹏，所以要記得給固定定位元素加上寬度见秽。因為fixed父元素是html，所以也要給固定定位加上最大最小寬度讨盒，否則固定定位元素隨著html無線擴大和縮小解取。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scale=1.0,maximum-scale=1.0,minimum-scele=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>固定定位</title>
<style>
body {
margin: 0 auto;
width: 100%;
min-width: 324px;
max-width: 640px;
}
.header {
position: fixed;
height: 35px;
background-color: pink;
}
</style>
</head>
<body>
<div class="header">
1213
</div>
</body>
</html>
效果如圖
image.png
給.header加上寬度100%
.header {
position: fixed;
height: 35px;
background-color: pink;
width: 100%;
}
結(jié)果如下：
image.png
給.header再加上最大最小寬度
.header {
position: fixed;
height: 35px;
background-color: pink;
width: 100%;
min-width: 324px;
max-width: 640px;
}
結(jié)果如下：
image.png
