CSS布局

最新推荐文章于 2022-06-22 10:46:09 发布

daisy_Hawen

最新推荐文章于 2022-06-22 10:46:09 发布

阅读量559

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/sinat_25127047/article/details/76997876

版权

css 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

CSS的定位机制：

普通流、浮动和绝对定位；

普通流： 所谓普通流就是正常的布局，我们在页面中写了一个又一个的盒子，如果是块级元素，就每一块占一行，这样依次排列下来；如果是行类元素，那么就是一个一个的排列，直到一行占不下了，就排第二行。
浮动： 浮动就脱离了普通流的布局方式，它会主动去找一个框的边缘，然后去靠；
绝对定位： 绝对定位也是脱离了普通流的布局，它相对于最近的一个父元素进行定位；也可以设置z-index，这样绝对定位就可以理解成为平面有很多楼层，每个楼层有自己的盒子。

1.两栏布局：

左侧固定，右侧自适应；
方案一：
用css实现：
html如下

<div class="container">
        <div id='box1'></div>
        <div id='box2'>
            main main main main main main
        </div>
    </div>

这里写图片描述

误区一：

只设置左侧盒子float

 .container {
            position: relative;
        }

        #box1,
        #box2 {
            border: 1px solid black;
        }

        #box1 {
            height: 200px;
            width: 200px;
            float: left;
        }

        #box2 {
            height: 200px; 
        }

看起来好像是实现了，但是后面的盒子宽度为100％；
这里写图片描述
解释：因为box1设置了浮动就不在文档流中了，第二个盒子仍然在文档流中，其实它就占据box1的位置；

误区二

第二个盒子设置 float:left;

  #box1 {
            height: 200px;
            width: 200px;
            float: left;
        }

        #box2 {
            height: 200px;
            float: left;
        }

这里写图片描述
这样第二个盒子的宽度不是自适应的；

正确方式一：给box2设置overflow:hidden;

  #box1 {
            height: 200px;
            width: 200px;
            float: left;
        }

  #box2 {
            height: 200px;
            overflow: hidden;
        }

这里写图片描述
解释：将box2设置overflow:hidden/auto之后，它自己就成为一个BFC了；（一个独立的盒子，盒子里面的东西不受外面的影响）

其实这里我还是不是很能理解，可不可以说box2和box1在同一层次了

2.两栏布局(nav在左边)：

方法二

给content添加一个盒子center
设置center的 width:100%; 浮动:float:left;
设置主盒子center的margin-right:100px; 给aside留出距离；
然后设置aside盒子的margin-left:-100px(就是这个盒子的宽度)；

   <style>
        #main {
            /*position: relative;*/
            overflow: auto;
        }

        #box1,
        #box2 {
            border: 1px solid black;
        }

        .center {
            height: 200px;
            width: 100%;
            float: left;
        }

        #box1 {
            height: 200px;
            background: green;
            margin-right: 100px;
        }

        #main .aside {
            height: 200px;
            width: 100px;
            background: blue;
            float: left;
            margin-left: -100px;
        }
    </style>
</head>

<body>
    <!--两栏布局-->
    <div id="main">
        <div class="center">
            <div id='box1'>
                main main main main main main
            </div>
        </div>
        <div class='aside'></div>
    </div>
</body>

效果图：
这里写图片描述

方法三：flex

3.两栏布局(div交换)：

 <div class="container">
        <div class="box2">这是第2个盒子</div>
        <div class="box1">这是第1个盒子</div>
 </div>

第一个盒子和第二盒子的顺序是反的，如何实现第一个盒子在前面（固定宽度），第二个盒子在后面（自适应布局）
这里写图片描述

方案一：

第一个盒子采用position:absolute ，设置left:0；top:0;
第二个盒子如果不设置的话，就会和第一个盒子重合了，那么第二个盒子设置margin-left:(第一个盒子的宽度)；将第一个盒子的位置留出来就可以了。

css代码如下：

        .box2,
        .box1 {
            height: 100px;
            border: 1px solid red;
        }

        .container {
            position: relative;
        }

        .box1 {
        //需要固定宽度的盒子
            position: absolute;
            left: 0px;
            top: 0px;
            width: 200px;
        }

        .box2 {
        //自适应宽度的盒子
            margin-left: 200px;
        }

方案二：

采用float方法

daisy_Hawen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS布局

CSS的定位机制：普通流、浮动和绝对定位；普通流：所谓普通流就是正常的布局，我们在页面中写了一个又一个的盒子，如果是块级元素，就每一块占一行，这样依次排列下来；如果是行类元素，那么就是一个一个的排列，直到一行占不下了，就排第二行。浮动：浮动就脱离了普通流的布局方式，它会主动去找一个框的边缘，然后去靠；绝对定位：绝对定位也是脱离了普通流的布局，它相对于最近的一个父元素进行定位；也可以设置
复制链接

扫一扫