关于盒模型的几个相关知识点的总结，以及三列布局的几种方法

最新推荐文章于 2023-05-24 13:22:22 发布
最新推荐文章于 2023-05-24 13:22:22 发布
阅读量647 收藏 4
点赞数
分类专栏： 面试准备 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40501188/article/details/114983660
版权

盒模型

盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器
CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边框，外边距，内边距和实际内容

三栏布局（左右固定，中间自适应）

  1. BFC
<!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>
</head>
<style>
    /* 
        BFC(Block formatting context)直译为"块级格式化上下文"。
        它是一个独立的渲染区域，只有Block-level box参与， 
        它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
        并且在一个BFC中，块盒与行盒，都会垂直的沿着其父元素的边框排列

        布局规则：
            内部的Box会在垂直方向，一个接一个地放置。
            Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
            每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
            BFC的区域不会与float box重叠。
            BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
            计算BFC的高度时，浮动元素也参与计算
        如何创建：
            1、float的值不是none。
            2、position的值不是static或者relative。
            3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
            4、overflow的值不是visible
     */
    * {
        margin: 0;
        padding: 0;
    }

    #left ,#right{
        width: 30%;
        height: 150px;
        background: rgb(139, 214, 78);
        text-align: center;
        line-height: 150px;
        font-size: 20px;
    }

    #left {
        float: left;
    }

    #right {
        float: right;
    }

    #center {
        overflow: hidden;
        height: 200px;
        background: rgb(170, 54, 236);
        text-align: center;
        line-height: 200px;
        font-size: 40px;
    }
</style>

<body>
    <div id="div1">
        <div id="left">我是left</div>
        <div id="right">我是right</div>
        <div id="center">我是center</div>
        <!-- [注] 这里center必须放到最后 -->
    </div>
</body>

</html>

在这里插入图片描述

  1. 定位
<!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>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            min-height: 100px;
        }

        .div1 {
            position: relative;

        }

        div {
            position: absolute;
            top: 0;
            min-height: 100px;
        }

        .left {
            left: 0;
            width: 100px;
            /* height: 100px; */
            background-color: pink;
        }

        .right {
            right: 0;
            width: 150px;
            /* height: 100px; */
            background-color: purple;
        }

        .center {
            left: 100px;
            right: 150px;
            height: 150px;
            background-color: orange;
        }
    </style>
</head>

<body>
    <div class="div1">
        <div class="center">center</div>
        <div class="left">left</div>
        <div class="right">right</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>Document</title>
    <style>
        /* 
            上边实现三列布局，左右固定，中间自适应
            底部铺满
         */
        * {
            margin: 0;
            padding: 0;
        }

        .div1 {
            position: relative;
            /* display: flex; */
            height: 100px;
            /* 
                清除浮动防止父元素塌陷，脱离标准流，
                添加overflow时创建了BFC
                虽然设置的三个盒子高不同，但是触发bfc
                计算bfc高度时，浮动元素高度也参与计算
             */
            overflow: hidden;
        }

        .left {
            position: absolute;
            left: 0;
            top: 0;
            width: 100px;
            height: 120px;
            background-color: pink;
        }

        .right {
            position: absolute;
            top: 0;
            right: 0;
            width: 150px;
            height: 120px;
            background-color: purple;
        }

        .center {
            position: absolute;
            top: 0;
            left: 100px;
            right: 150px;
            height: 150px;
            background-color: orange;
        }

        /* 添加底部固定一栏 */
        .footer {
            width: 100%;
            height: 50px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="div1">
        <div class="center">center</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
    <div class="footer">footer</div>
</body>

</html>

在这里插入图片描述

  1. 浮动（双飞翼布局、圣杯布局）
  • 双飞翼布局
<!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>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            min-width: 550px;
        }
        
        /* 双飞翼布局 */
        .container {
            overflow: hidden;
        }
        .column {
            float: left;
            min-height: 100px;
        }
        .left {
            margin-left: -100%;
            width: 200px;
            background-color: pink;
        }.center {
            width: 100%;
        }
        .center-inner {
            margin: 0 150px 0 200px;
            min-height: 100px;
            background-color: skyblue;
        }
        .right {
            margin-left: -150px;
            width: 150px;
            background-color: orange;
        }

    </style>
</head>

<body>
    <div class="container">
        <div class="column center">
            <!-- 双飞翼布局多了一层包裹center内容的代码 -->
            <div class="center-inner">center</div>
        </div>
        <div class="column left">left</div>
        <div class="column right">right</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>Document</title>
    <style>
        /* 圣杯布局 */
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            min-width: 550px;
        }

        .container {
            padding: 0 150px 0 200px;
            overflow: hidden;
        }

        .column {
            position: relative;
            float: left;
            min-height: 100px;
        }

        .left {
            right: 200px;
            margin-left: -100%;
            width: 200px;
            background-color: pink;
        }


        .center {
            width: 100%;
            background-color: orange;
        }
        
        .right {
            left: 150px;
            margin-left: -150px;
            width: 150px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="column center">center</div>
        <div class="column left">left</div>
        <div class="column right">right</div>
    </div>
</body>

</html>

在这里插入图片描述

  1. 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>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    #div1 {
        display: flex;
    }
    #left {
        width: 200px;
        height: 200px;
        background-color: pink;
    }
    #center {
        flex: 1;
        /* 
        flex: 1; === flex: 1 1 0;
        第一个参数表示: flex-grow 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
        第二个参数表示: flex-shrink 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
        第三个参数表示: flex-basis给上面两个属性分配多余空间之前, 计算项目是否有多余空间, 默认值为 auto, 即项目本身的大小
        【注】auto 为表示项目本身的大小, 如果设置为 auto, 那么这三个盒子就会按照自己内容的多少来等比例的放大和缩小
          */
        height: 300px;
        background-color: purple;
    }
    #right {
        width: 150px;
        height: 200px;
        background-color: orange;
    }
    /* 等宽布局 */
    /* div {
        flex: 1;height: 200px;border: 1px solid red;
    } */
</style>
<body>
    <div id="div1">
        <div id="left"></div>
        <div id="center"></div>
        <div id="right"></div>
    </div>
</body>
</html>

在这里插入图片描述

多加奶糖
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html网格布局四列三行,前端布局之网格gird布局（简单易懂）
weixin_39959615的博客
06-15 1700
前言弹性布局的文章很多，但是它是解决一维布局的，面对二维就显得无力了，此时我们就需要用到网格布局。(ps：一维就是一列或者一行的布局，当你遇到九宫盒布局，此时涉及到列与行，便是二维布局了，常见于电商网站的商品展示)；看这篇文章，建议你自己建个html，跟着敲一敲，更利于理解。为什么用网格布局？很多同学可能会觉得，我用浮动，定位，弹性盒模型可以实现绝大多数样式布局呀，为什么还要新学一个网格布局呢。就...
summary:知识点总结
04-12
3. 盒模型：包括内容(content)、内边距(padding)、边框(border)和外边距(margin)，理解盒模型对于布局至关重要。 4. 相对单位与绝对单位：如px、em、rem、%等，合理使用可以实现响应式设计。 5. 浮动(float)和清除...
网页入门D4——盒模型布局（DIV+CSS3页面布局）
m0_53156691的博客
01-20 4518
盒模型布局——DIV+CSS3页面布局 勤学勤练方能实现。 为了呈现不同的视觉效果，网页布局往往千变万化。网页布局的基础就是盒模型。如果说网页是一座城堡，那么盒模型就是堆砌城堡的一块块积木。 在网页布局的过程中，要遵循从大到小，从结构到细节的顺序。先搭好框架再往里面填充内容和细节。框架搭的好，城堡才稳固。
div多行多列flex
qq_46051205的博客
05-24 227
【代码】div多行多列flex。
css--盒子的水平布局
MondayCui的博客
09-20 368
元素的水平方向的布局： 元素在其父元素中水平方向的位置由以下几个属性共同决定“ margin-left border-left padding-left width padding-right
：css教程：css盒子模型及布局应用
qq_32506555的博客
04-01 988
本文主要讲解css盒子模型及布局，很多web前端初学者开始学习css选择器（http://www.maiziedu.com/course/web/421-5342/）时，会出现烂用css选择器的情况，今天就具体讲解下，先供上一张总结图片供参考。 下面主要谈谈在CSS中的基本盒子模型。盒子，是页面中元素呈现的基本样式模型。是每一个元素标签在页面上的呈现。对应HTML中的块级元素和行
几种api文档
11-17
标题中的“几种API文档”指的是不同编程语言或技术的接口文档集合，这些文档通常用于指导开发者如何使用特定的编程工具、库或者框架。在描述中提到了Java、HTML、DHTML、J2EE6和CSS这五种技术，接下来我们将分别深入...
CSS3圣诞礼物盒打开动画特效
07-24
在“圣诞礼物盒打开动画特效”中，我们主要会用到以下几个CSS3关键知识点： 1. **变换（Transforms）**：通过`transform`属性，我们可以改变元素的位置、大小、形状和角度。在这个特效中，礼物盒的盖子打开可能就...
几个html案例，含有选项卡，图片切换，动态切换
09-17
案例中可能会用到各种CSS选择器（如类选择器、ID选择器、伪类等）、盒模型（边距、填充、边框、内容）、布局技术（如浮动、定位、Flexbox、Grid）以及过渡和动画效果，以实现美观且响应式的界面。 6. **JavaScript...
流式布局案例（怎么能把名字到11个字）.zip
06-21
- **弹性盒模型（Flexbox）**：CSS3引入的新布局模式，允许更灵活地控制子元素的对齐、排序和大小。 - **网格布局（Grid Layout）**：另一种CSS3布局模式，提供二维网格系统，适合创建复杂且响应式的布局。 - **响应...
DIV布局十大技巧以及DIV盒子模型
07-05
DIV布局十大技巧以及div盒子模型效果图!很容易的，一看就能明白！
盒子模型 布局
weixin_45953515的博客
09-14 444
文档流 网页是一个多层结构 一层摞着一层 通过CSS为每一层设置样式 作为用户只能看到最顶层 最底层叫文档流 是网页的基础 我们创建的元素默认在文档流中排列 元素有两个状态：   1.在文档流中    2.不在文档流中(脱离文档流) 元素在文档流中有什么特点：1.块元素 在页面中独占一行(自上向下垂直排列) 默认宽度是父元素的全部(会把父元素撑满) 默认高度是被内容撑开(子元素)2.行内元素 不会独占页面一行 只占自身大小(在页面中自左向右水平
盒子模型和div布局
热门推荐
Hello World
01-21 1万+
background的覆盖范围是content区域加上padding区域。 许多浏览器都有自己默认的margin和padding值，我们可以通过将元素的margin和padding设置为0来覆盖原本的浏览器样式。 * { margin: 0; padding: 0; } float： 当一个div容器里没有内容且不指明width时，他的宽度默认100%，但是当为这个div设
css 实现三列布局
Node.js安装报错 - npm -v 查看版本无效
03-18 766
float布局: float + margin position布局: position + left + right table布局: table+ table-cell flex布局: flex grid布局: 略 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wi
4.CSS布局与定位
z1360408752的博客
02-16 790
目录4-1 布局与定位概述4-2 盒子模型（I）盒子模型的概念和组成overflow属性border属性4-3 盒子模型（II）4-4 CSS定位机制概述4-5 文档流定位4-6 浮动定位4-7 层定位 4-1 布局与定位概述 页面中每一个部分的大小以及位置成为页面的布局和定位。 布局和定位的主要内容 4-2 盒子模型（I） 盒子模型： 页面上 区域、图片、导航、列表、段落，都可以是盒子。 盒子模型的概念和组成 盒子模型的每个属性都有四个子属性，分别添加横杠进行设置。 一个盒子的实际宽度、高度：c
css学习笔记---盒模型，布局
weixin_30409849的博客
11-03 77
1、外边距叠加 当一个元素出现在另一个元素上面时第一个元素的底边距与第二个元素的上边距发生叠加，元素被包含时也有可能会发生叠加（如果没有内边距和边框），如果一个空元素没有内边距和边框本身也会发生上下边距的叠加。 只有普通文档流中块框的垂直外边距才会发生叠加，行内框、浮动框或绝对定位框之间的外边距不会发生叠加。 2、定位 css有3中基本的定位机制，普通流，浮动和绝对定位。浮动和绝...
CSS盒子模型
qq_40803681的博客
07-03 138
CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 下面的图片说明了盒子模型(Box Model)： Margin(外边距) - 清除边框外的区域，外边距是透...
html盒子模型页面居中,IT兄弟连 HTML5教程 使用盒子模型设计页面布局
weixin_39753747的博客
06-03 374
原标题：IT兄弟连 HTML5教程 使用盒子模型设计页面布局 布局所涉及的技术非常很多，足以另写单独的一本书了。在本节中主要介绍网站中最常用的布局方案，包括区块框居中、两列浮动、三列浮动及多列浮动的区块框。1 居中设计区块框居中的设计是在网页布局中常用的技术，例如将网页内的主体内容设置为一定的宽度，然后在页面内居中占据屏幕的一部分显示，而不是横跨整个屏幕宽度。这样设计的目的是因为现在的显示器尺寸越...
WEB入门.六 盒子模型
张晨光老师的播客
02-16 1万+
学习内容ØCSS盒子模型Ø盒子之间的关系Ø页面元素定位能力目标Ø理解盒子模型Ø理解内容与表现分离的优点Ø理解并掌握盒子之间的关系Ø理解并掌握绝对定位与相对定位的用法本章简介上一章节中已经讲解了页面布局的基础知识，了解了设计一个标准的 XHTML页面需要遵循的规范，例如：标签需要关闭、使用
css盒子模型知识点
最新发布
12-06
CSS盒子模型是CSS中的一个重要概念，它指的是在网页布局中，每个HTML元素都被看作是一个矩形的盒子，这个盒子包含了元素的内容、内边距、边框和外边距。CSS盒子模型由四个部分组成：内容区域、内边距、边框和外边距。其中，内容区域包含了元素的实际内容，内边距是内容区域和边框之间的空白区域，边框是内边距和外边距之间的线条，外边距是边框和相邻元素之间的空白区域。 CSS盒子模型的知识点包括以下内容： 1. 盒子模型的四个部分：内容区域、内边距、边框和外边距； 2. 盒子模型的属性：width、height、padding、border、margin等； 3. 盒子模型的标准盒模型和IE盒模型； 4. 盒子模型的应用：通过设置盒子模型的属性，可以实现网页布局、美化等效果。 下面是一个例子，演示如何使用CSS盒子模型的属性设置一个带有边框和内边距的盒子： ```html <!DOCTYPE html> <html> <head> <title>CSS盒子模型演示</title> <style type="text/css"> .box { width: 200px; height: 100px; padding: 20px; border: 1px solid #000; margin: 20px; } </style> </head> <body> <div class="box"> 这是一个带有边框和内边距的盒子。 </div> </body> </html> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值