首页 > 其他 > 详细

.container的应用

时间:2019-05-30 20:21:43      阅读:109      评论:0      收藏:0      [点我收藏+]

container的使用让网页的布局变得更加便利
<div class="container"></div>

.container
{
    width: 1200px;
    margin: 0 auto;
}

  container属性设置了上下外边距为0,左右自动,在整个页面中布置了一个自动左右居中的区域,根据页面布局的需要,所有适合这样布局的部分,都可以嵌套在container下面,作为container的子级。

  container可以根据子级的内容,自动调整布局,针对整个页面进行设置。

  

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>container</title>
    <link rel="stylesheet" href="container.css">
</head>
<body>
    <div class="root">
        <div class="content">
            <div class="container">
                <div class="part0">
                    <div class="part1">内容1</div>
                    <div class="part2">内容2</div>
                </div>
            </div>
            <div class="part3">内容3</div>
        </div>
    </div>
</body>
</html>

   

body
{
    margin: 0;
    padding: 0;
}
.container
{
    width: 600px;
    margin: 0 auto;
}
.content
{
    background: #ff6700;
    position: relative;
    width: 50%;
}
.part0
{
    padding:50px 0;
    display: flex;
    justify-content: space-between;
}
.part1
{
    background: #0395e1;
    width: 200px;
    height: 100px;
}
.part2
{
    background: #83c44e;
    width: 200px;
    height: 100px;
}
.part3
{
    background: deeppink;
    width: 400px;
    height: 50px;
}

 

 上面的代码得到下面的页面:

技术分享图片

      上面能看出,内容1和内容2都是在container内部,整体自动对齐,内容3 不在container内,位置默认在页面最左侧。

  因此,根据页面布置的需求,合理的利用container布局,会节省很多时间

  

 

.container的应用

原文:https://www.cnblogs.com/zhangcheng001/p/10951321.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!