引子:
开始的时候我想先要解决一个问题,怎么设置一个div盒子撑满整个屏幕?
看下面的html代码:
<body>
<div id="father-body">
<div class="item1"></div>
</div>
</body>
实现方法一:
html, body,#father-body{
height:100%;
width:100%;
background-color:#123456;
}
这里主要解释下%
(百分号)在CSS中使用的问题。%
主要是在父级元素或者是祖先元素定义了固定的width
和height
的时候才可以使用(或者说使用的时候才会有效果)。
实现方法二:
#father-body{
position:fixed;
width:100%;
height:100%;
background-color:#123456;
}
这里为#father-body
设置position属性,触发自身的BFC。当对自身使用width
和 height
的时候才可以生效。
position的fixed值的含义:
对象脱离常规流,使用
top
,right
,bottom
,left
等属性以窗口为参考点进行定位,当出现滚动条时,对象不会随着滚动。
position属性的几个值的概念:
1.相对定位
有了以上的定义,来看一段代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.item1, .item2, .item3{
width:300px;
height: