CSS布局

最新推荐文章于 2022-12-02 20:20:38 发布
最新推荐文章于 2022-12-02 20:20:38 发布
阅读量144 收藏
点赞数
分类专栏： CSS 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44187211/article/details/125435399
版权
本文详细介绍了使用CSS实现两栏和三栏布局的多种方法，包括浮动、绝对定位、flex布局和网格布局。对于两栏布局，重点讲解了如何使一栏宽度固定，另一栏自适应。对于三栏布局，探讨了左右两栏固定，中间栏自适应的实现方式。同时，提到了在高度未知情况下的布局适应性分析。
摘要由CSDN通过智能技术生成

一、两列布局

一般两栏布局指的是左边一栏宽度固定，右边一栏宽度自适应

1、利用浮动。

        （1）左边设置固定宽度，设置向左浮动。右边设置margin-left: width ; 宽度设置为auto（不设置也行，默认是auto，撑满整个父元素）

<style>
        * {
            padding: 0;
            margin: 0;
        }
        
        .content {
            height: 200px;
        }
        
        .left {
            background-color: aqua;
            height: 100%;
            width: 200px;
            float: left;
        }
        
        .right {
            background-color: yellowgreen;
            height: 100%;
            margin-left: 200px;
            width: auto; /* 当这个没有设置时，也是可以的 */
        }
</style>

<body>
    <div class="content">
        <div class="left">左边一栏宽度固定</div>
        <div class="right">右边一栏宽度自适应</div>
    </div>
</body>

​​​

        （2）左边设置固定大小，并设置向左浮动，右边设置overflow：hidden；触发BFC（BFC的区域不会与浮动元素发生重叠）

<style>
        * {
            padding: 0;
            margin: 0;
        }
        
        .content {
            height: 200px;
        }
        
        .left {
            background-color: aqua;
            height: 100%;
            width: 200px;
            float: left;
        }
        
        .right {
            background-color: yellowgreen;
            height: 100%;
            overflow: hidden;
        }
</style>

 <body>
     <div class="content">
         <div class="left">左边一栏宽度固定</div>
         <div class="right">右边一栏宽度自适应</div>
     </div>
  </body>

2、利用绝对定位 

        （1）父元素设置 position: relative；左边设置position：absolute；固定宽度；右边设置margin-left：width；

<style>
        * {
            padding: 0;
            margin: 0;
        }
        
        .content {
            height: 200px;
            position: relative;
        }
        
        .left {
            background-color: aqua;
            height: 100%;
            width: 200px;
            position: absolute;
        }
        
        .right {
            background-color: yellowgreen;
            height: 100%;
            margin-left: 200px;
        }
</style>

<body>
    <div class="content">
        <div class="left">左边一栏宽度固定</div>
        <div class="right">右边一栏宽度自适应</div>
    </div>
</body>

        （2）父元素设置position: relative;左边设置固定宽度；右边设置position: absolute;left： width；其他方位定义为0

<style>
        * {
            padding: 0;
            margin: 0;
        }
        
        .content {
            height: 200px;
            position: relative;
        }
        
        .left {
            background-color: aqua;
            height: 100%;
            width: 200px;
        }
        
        .right {
            background-color: yellowgreen;
            height: 100%;
            position: absolute;
            left: 200px;
            top: 0;
            right: 0;
            bottom: 0;
        }
</style>
<body>
    <div class="content">
        <div class="left">左边一栏宽度固定</div>
        <div class="right">右边一栏宽度自适应</div>
    </div>
</body>

3、利用flex布局：父元素设置 display: flex; 左边设置固定宽度； 右边设置flex：1

<style>
        * {
            padding: 0;
            margin: 0;
        }
        
        .content {
            height: 200px;
            display: flex;
        }
        
        .left {
            background-color: aqua;
            height: 100%;
            width: 200px;
        }
        
        .right {
            background-color: yellowgreen;
            height: 100%;
            flex: 1;
        }
</style>

    <body>
        <div class="content">
            <div class="left">左边一栏宽度固定</div>
            <div class="right">右边一栏宽度自适应</div>
        </div>
</body>

 二、三栏布局

一般指页面中一共有三栏，左右两栏宽度固定，中间自适应的布局

1、利用浮动。左右固定宽度，并设置向左向右的浮动。中间设置左右两个方向的margin值。（中间一栏必须放到最后）

<style>
        * {
            padding: 0;
            margin: 0;
        }
        
        .content {
            height: 200px;
        }
        
        .left {
            background-color: aqua;
            height: 100%;
            width: 200px;
            float: left;
        }
        
        .right {
            background-color: yellowgreen;
            height: 100%;
            width: 200px;
            float: right;
        }
        
        .center {
            background-color: blue;
            height: 100%;
            margin-left: 200px;
            margin-right: 200px;
        }
</style>

<body>
    <div class="content">
        <div class="left">宽度固定</div>
        <div class="right">宽度固定</div>
        <div class="center">中间自适应</div>
    </div>
</body>

2、利用绝对定位。左右两栏设置为绝对定位，中间设置对应方向大小的margin的值。

<style>
        * {
            padding: 0;
            margin: 0;
        }
        
        .content {
            height: 200px;
            position: relative;
        }
        
        .left {
            background-color: aqua;
            height: 100%;
            width: 200px;
            position: absolute;
        }
        
        .right {
            background-color: yellowgreen;
            height: 100%;
            width: 200px;
            position: absolute;
            right: 0;
            top: 0;
        }
        
        .center {
            background-color: blue;
            height: 100%;
            margin-left: 200px;
            margin-right: 200px;
        }
</style>

<body>
    <div class="content">
        <div class="left">宽度固定</div>
        <div class="center">中间自适应</div>
        <div class="right">宽度固定</div>
    </div>
</body>

3、利用flex布局。左右两栏设置固定大小，中间一栏设置为flex:1。

<style>
        * {
            padding: 0;
            margin: 0;
        }
        
        .content {
            height: 200px;
            display: flex;
        }
        
        .left {
            background-color: aqua;
            height: 100%;
            width: 200px;
        }
        
        .right {
            background-color: yellowgreen;
            height: 100%;
            width: 200px;
        }
        
        .center {
            background-color: blue;
            height: 100%;
            flex: 1;
        }
</style>

<body>
    <div class="content">
        <div class="left">宽度固定</div>
        <div class="center">中间自适应</div>
        <div class="right">宽度固定</div>
    </div>
</body>

4、网格布局。在父元素上设置就行。

<style>
        * {
            padding: 0;
            margin: 0;
        }
        
        .content {
            display: grid;
            width: 100%;
            grid-template-columns: 200px auto 200px;
            grid-template-rows: 200px;
        }
        
        .left {
            background-color: aqua;
        }
        
        .right {
            background-color: yellowgreen;
        }
        
        .center {
            background-color: blue;
        }
</style>

<body>
    <div class="content">
        <div class="left">宽度固定</div>
        <div class="center">中间自适应</div>
        <div class="right">宽度固定</div>
    </div>
</body>

5、表格布局。父元素设置display: table, width: 100%; 三列都设置display: table-cell;左右设置固定宽度 

    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        .content {
            display: table;
            width: 100%;
            height: 200px;
        }
        
        .content div {
            display: table-cell;
        }
        
        .left {
            background-color: aqua;
            width: 200px;
        }
        
        .right {
            background-color: yellowgreen;
            width: 200px;
        }
        
        .center {
            background-color: blue;
        }
</style>

<body>
    <div class="content">
        <div class="left">宽度固定</div>
        <div class="center">中间自适应</div>
        <div class="right">宽度固定</div>
    </div>
</body>

如果去掉高度已知，考虑纵向，哪种方案还适用，哪些不适用 

flex布局和表格布局是通用的，其它方案不适用

 三、“品”字布局

1、第一个div设置margin：0 auto；第二个设置向左浮动，margin-left：50%；第三个设置向左浮动，miang-left: 2*width;

2、将第二个和第三个向左浮动改为display: inline-block;其他不变

    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        .content div {
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
        }
        
        .d1 {
            background-color: aqua;
            margin: 0 auto;
        }
        
        .d2 {
            background-color: yellowgreen;
            float: left; /* 可替换成display: inline-block; */
            margin-left: 50%;
        }
        
        .d3 {
            background-color: blue;
            float: left; /* 可替换成display: inline-block; */
            margin-left: -200px;
        }
</style>

<body>
    <div class="content">
        <div class="d1">1</div>
        <div class="d2">2</div>
        <div class="d3">3</div>
    </div>
</body>

四、九宫格布局 

 待更新

晓不点
关注
专栏目录
03--CSS布局设置
aibing0103的博客
02-14 573
一 盒模型 　　盒模型 　　　　在CSS中，"box model"这一术语是用来设计和布局时使用，然后在网页中基本上都会显示一些方方正正的盒子。我们称为这种盒子叫盒模型。 　　　　盒模型有两种：标准模型和IE模型。我们在这里重点讲标准模型。 　　　　盒模型示意图 　　　　　　 　　盒模型的属性 　　　　width：内容的宽度 　　　　height: 内容的...
css布局教程 — 这一篇足够了
qq_60754128的博客
11-11 3964
display是CSS中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值，这与元素的类型有关。对于大多数元素它们的默认值通常是block或inline。一个 block 元素通常被叫做块级元素。一个 inline 元素通常被叫做行内元素。
CSS网页布局
微风洋洋的博客
02-10 7439
介绍一下CSS网页布局这个核心知识，大家一定要重视！
CSS页面布局（超详解）
热门推荐
m0_52896041的博客
12-02 2万+
浮动的框可以向左或向右移动，直到其外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档普通流中，所以文档普通流中的块元素表现得就像浮动框不存在一样。HTML文档中的每个元素都被描绘成矩形盒子，这些矩形盒子通过一个模型来描述其占用的空间，这个模型称为盒子模型。
常见的CSS页面布局方式
程文英
09-13 1383
详情：CSS页面结构是我们日常生活中最常使用到的，当然目前可能大家用的最多的是elementUI实现布局，简单方柏霓，下面介绍几种常见的原生页面布局的方式 公共的样式部分 <style> * { margin: 0; padding: 0; } .layout { margin-bottom: 20px; } .layout arti
高效学习CSS布局之道
11-26
高效学习CSS布局之道：通过244个范例掌握网页样式与布局技术
Css布局
02-26
CSS布局是网页设计的核心组成部分，它决定了网页元素如何在屏幕上排列和对齐。在HTML标记语言的基础上，CSS（层叠样式表）提供了丰富的布局控制，让开发者能够创建出美观且响应式的网页。在这个主题中，我们将深入...
css.rar_css_css布局
09-23
本资料“css.rar”聚焦于CSS布局，提供了全面的样式大全，旨在帮助开发者掌握各种布局技巧。 一、CSS基础布局概念 1. 块级元素与行内元素：块级元素如`<div>`占据整个宽度，通常用于创建结构；行内元素如`<span>`...
CSS布局实例代码 两列布局实例
09-25
CSS布局实例代码详解 在前端开发中，布局是非常重要的一部分，CSS布局实例代码是开发者们经常使用的布局方式之一。下面我们将详细讲解CSS两列布局、CSS三列布局、CSS等高布局等多种布局方式。 一、CSS两列布局 ...
div+css布局大全
03-22
下面，我们将深入探讨div+css布局的相关知识点。 1. **Div元素**：HTML中的`<div>`（division）元素是一个通用容器，用于组合HTML元素，为页面提供结构。通过设置`<div>`的类或ID属性，我们可以对多个元素进行分组...
divcss布局入门教程
07-22
资源名称：div css布局入门教程内容简介：在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识，而在你学习这篇入门教程之前，请确定你已经具有了...
CSS布局之道
07-11
本资源"CSS布局之道"是一个专为初学者准备的学习资料，旨在帮助新手掌握CSS布局的核心概念和技术。 1. **CSS基础知识**：首先，了解CSS的基本语法和选择器至关重要。包括ID选择器、类选择器、元素选择器等，以及...
css布局示例0805
最新发布
08-05
布局示例0805
css样式布局
qq_46239275的博客
03-25 1217
css布局
CSS页面布局及排版
m0_56215889的博客
04-10 2722
CSS盒子模型 一个独立的盒子模型由内容、border（边框）、padding（内边距）、margin（外边距）4部分组成。 一个盒子的实际宽度（或高度）是有内容+padding（两边）+border（两边）+margin（两边）组成。 边框（border） border-color属性：指定边框的颜色。 border-width属性：指定边框粗细程度。 border-style属性：指定边框样式。如果没有指定边框样式，那么其他的属性都将不起作用，边框将不存在。 border-radius
Css 常用布局方式
m0_73302873的博客
08-16 5983
Css 常用布局方式
Div+CSS布局学习指南
"《Div+CSS布局大全》是一份适合初学者学习Div+CSS布局的文档，由博客园用户JesseZhao整理。文档详细介绍了从基础到进阶的Div和CSS布局技术，包括DOCTYPE的选择、名字空间、语言编码、样式表调用、XHTML代码规范、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值