最近看了一篇文章，布局的概念讲的还是很清楚，但是里面使用的布局方式让我眼前一亮，同样是实现两栏和三栏的布局，他使用的技术就是普通的float和position定位，用了挺少的代码就实现了学了很久的布局。这个是连接 CSS布局说——可能是最全的 。
position的一些属性
上篇文章没讲清楚几个点，就是position的几个属性。
- relative
- absolute
absolute
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
如果一个元素，它的position值是absolute的话，它在计算定位点的时候，首先会去向上找它的父级元素，直到找到父级元素的position值不是static的，从这个元素的区域内开始计算定位点。如果没有找到。那就去body为计算点。
relative
生成相对定位的元素，相对于其正常位置进行定位。
所谓的正常元素，就是它的父级。。。。。它和absolute的区别就是，它就直接找它的父级定位。
relative
生成绝对定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
这个尼玛就相对于视窗，就是浏览器的窗口进行定位了。。。。很gay。它就算被包在relative的div中，超出这个区域也会显示，就相当于和它所有的父级都没什么关系了，只受浏览器的窗口控制。
sticky
这个是css3新增的属性，他就是relative和fixed的结合体， 它有fixed的特性，但是他可以被限定在父级元素的区域框内。
<!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>
</style>
</head>
<body>
<div style="position: relative; height: 500px; width: 500px; background-color:antiquewhite; margin-bottom: 500px">
<div style="position: sticky; height: 50px; width: 50px;background-color:red; top: 20px" ></div>
</div>
</body>
</html>
用flex实现布局
虽然说链接里的文章用的布局方式可以说是很简单了，但是因为有移动端的存在，这样的布局就不太适用了，而flex布局就很适合移动端，所以，我们如果一开始就使用flex的布局不就好了？
两栏布局
<!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>两栏布局</title>
<style>
.cointainer {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.leftLayout {
width: 200px;
height: 600px;
background: red;
text-align: center;
line-height: 600px;
color: #fff;
}
.content {
width:100%;
height: 600px;
background: yellow;
text-align: center;
line-height: 600px;
}
</style>
</head>
<body>
<div class="cointainer">
<div class="leftLayout">侧边栏</div>
<div class="content">内容</div>
</div>
</body>
</html>
三栏布局
<!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>两栏布局</title>
<style>
.cointainer {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.leftLayout {
width: 200px;
height: 600px;
background: red;
text-align: center;
line-height: 600px;
color: #fff;
}
.content {
width:80%;
height: 600px;
background: yellow;
text-align: center;
line-height: 600px;
}
.asideLayout {
width:20%;
height: 600px;
background:green;
text-align: center;
line-height: 600px;
}
</style>
</head>
<body>
<div class="cointainer">
<div class="leftLayout">侧边栏</div>
<div class="content">内容</div>
<div class="asideLayout">第三栏</div>
</div>
</body>
</html>
网友评论