CSS基本功：页面布局

最新推荐文章于 2021-08-29 17:09:26 发布

猫小叔

最新推荐文章于 2021-08-29 17:09:26 发布

阅读量615

点赞数

分类专栏：前端知识点文章标签： CSS基本功布局 CSS+DIV

本文链接：https://blog.csdn.net/tt_Litingting/article/details/72822035

版权

前端知识点专栏收录该内容

5 篇文章 0 订阅

订阅专栏

页面的布局应该是CSS的基础核心了，一列定宽，一列自适应；两列定宽、两列自适应、一列定宽一列自适应；三列定宽、三列自适应、左右定宽中间自适应等都测量着一个前端开发人员的基本功。
页面的布局总的来说，就是div是几列，是固定的宽度还是自适应的（随着屏幕的大小宽度发生改变）。
##单列页面布局

<body>
   <div class="one">hello</div>
</body>

1.单列定宽居中：

//css部分
div.one{
        width: 200px;
        height: 300px;
        border: 2px solid black;
        background-color: red;
        margin: 0 auto;//div水平居中显示
    }

运行结果如下：
这里写图片描述
2.单列自适应

div.one{
        width: 20%;
        height: 220px;
        border: 2px solid black;
        background-color: red;
    }

显示结果：这里写图片描述

##两列页面布局

 <div class="left">我是左边</div>
 <div class="right">我是右边</div>

1.两列定宽

//CSS部分：
.left{
        width: 200px;
        height: 220px;
        border: 2px solid black;
        background-color: red;
        float: left;
        }
.right{
        width: 200px;
        height: 220px;
        border: 2px solid black;
        background-color: yellow;
        float: left;
        }

运行结果显示：这里写图片描述

*：上面这样的布局可能出现这样的情况，随着整个屏幕的缩小，left和right这两个的宽度是固定不会变化，但是可能会right会被挤到下面去。如果想避免这样的情况，就将left和right放到一个div里，并给这个外面这个div设置个最小的宽度（max-width）,这样右边的div就不会掉下去。

2.两列自适应

 .left{
            width: 30%;
            height: 220px;
            border: 2px solid black;
            background-color: red;
            float: left;
            }
        .right{  
            width: 50%;
            height: 220px;
            border: 2px solid black;
            background-color: yellow;
            float: left;
        }

运行后的效果：
这里写图片描述

3.一列定宽一列自适应

 .left{
            width: 100px;
            height: 220px;
            border: 2px solid black;
            background-color: red;
            float: left;
            }
        .right{
            width: 50%;
            height: 220px;
            border: 2px solid black;
            background-color: yellow;
            float: left;
        }

运行后的效果：
这里写图片描述

##三列页面布局
定宽和自适应都和单列和两列一样，这里展示左右定宽中间自适应的代码。

  <div class="left">我是左边,我的宽度是定宽的</div>
  <div class="middle">我是中间，我是自适应</div>
  <div class="right">我是右边，我得宽度是固定的</div>
	
	//CSS部分：
		.left{
            position: absolute;
            width: 100px;
            height: 220px;
            border: 2px solid black;
            background-color: red;
            float: left;
            left: 0;
            }
        .middle{
            width: auto;
            margin-left: 100px;
            margin-right: 100px;
            border: 2px solid black;
            background-color: pink;
        }
        .right{
            width: 100px;
           height: 220px;
            border: 2px solid black;
            background-color: yellow;
            position: absolute;
            right: 0;
            top: 0;
        }

运行结果显示：
这里写图片描述

这里写图片描述

*最后补充一下，如何让两列或多列等高？比如上面这个例子左右设置的高度一样，中间明显显得格格不如，那给中间也设置高度？NO？这里考虑下根据最高的那一列来定高度，我们就不把高度定死了。

利用负的大的外边距和正的内边距相抵消。
margin-bottom:-2000px;
padding-bottom:2000px;

 <div class="content">
            <div class="left">我是左边,我的宽度是定宽的<br/>我是最高的<br/>我要求中间和右边和我一样高</div>
            <div class="middle">我是中间，我是自适应</div>
        </div>
  //CSS部分：
   .left{
            width: 100px;
            border: 2px solid black;
            background-color: red;
            float: left;
            padding-bottom:2000px;
            margin-bottom:-2000px;
            }
        .middle{
            width: auto;
            margin-left: 100px;
            margin-right: 100px;
            border: 2px solid black;
            background-color: pink;
            padding-bottom:2000px;
            margin-bottom:-2000px;
        }
        .content{
            overflow: hidden;
            width: 100%;
        }

这里写图片描述 .
这样不用设置高度，可以让两列的高度根据最高的一列来定。

猫小叔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基本功：页面布局

页面的布局应该是CSS的基础核心了，一列定宽，一列自适应；两列定宽、两列自适应、一列定宽一列自适应；三列定宽、三列自适应、左右定宽中间自适应等都测量着一个前端开发人员的基本功。页面的布局总的来说，就是div是几列，是固定的宽度还是自适应的（随着屏幕的大小宽度发生改变）。单列页面布局<body> <div class="one">hello</div></body>1.单列定宽居中：//c
复制链接

扫一扫