css乱炖-------布局（flex实现） #11

777720 · 2018-03-15T03:16:51Z

最近看了一篇文章，布局的概念讲的还是很清楚，但是里面使用的布局方式让我眼前一亮，同样是实现两栏和三栏的布局，他使用的技术就是普通的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>

The text was updated successfully, but these errors were encountered:

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

css乱炖-------布局（flex实现） #11

css乱炖-------布局（flex实现） #11

777720 commented Mar 15, 2018

css乱炖-------布局（flex实现） #11

css乱炖-------布局（flex实现） #11

Comments

777720 commented Mar 15, 2018

两栏布局