html盒子模型代码_CSS从零开始——盒模型（2）

最新推荐文章于 2023-04-04 08:58:13 发布
最新推荐文章于 2023-04-04 08:58:13 发布
阅读量811 收藏 4
点赞数
文章标签： html盒子模型代码
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39789094/article/details/113077805
版权

219a4e284d69533d92473a31f9c08b9b.png

昨天的章节看过了盒模型的填充（内边距）和边框，以及不占据空间的轮廓，由于 CSS 3 引入了一些相对方便的新属性，这一章节除了继续来看盒模型的（外）边距以及尺寸，也要看看弹性盒子。

1 边距

Margin （外）边距是元素边界与其周围之间的距离，包括如下属性：

  • margin-top：设置顶边的边距
  • margin-right：设置右边的边距
  • margin-bottom：设置底边的页边距
  • margin-left：设置左边的边距
  • margin：简写属性，在单个声明中设置所有边的边距，和其他有四方向属性的简写一致，也是可以使用 1 - 4 个值来进行设置的，具体规则可以参考盒模型（1）当中的 padding 部分。

下面是个例子：

<!DOCTYPE HTML>
<html>
  <head>
    <style type="text/css">
      img {
        border: 4px solid black;
        background: lightgray;
        padding: 4px;
        margin: 4px 20px;
      }
    </style>
  </head>
  <body>
    <img src="download.png" alt="download">
    <img src="download.png" alt="download">
  </body>
</html>

39f58d0f6e6a96a7217ee74534f208e8.png

639f87b34f946e329391aa6d8f5b241d.png

当然，虽然设置了（外）边距，但是因为没有明确的边界，所以肉眼基本是看不出来大小的，只能通过最后一张截图的盒模型来看到该设置是如何生效的。

2 尺寸

可以使用 width， height 以及相关的属性来控制元素的尺寸，包括：

  • width， height：设置元素的宽度和高度
  • min-width， min-height：设置元素的最小可接受宽度或高度
  • max-width， max-height：设置元素的最大可接受宽度或高度
  • box-sizing：设置元素框的哪个部分用于大小调整，可以接受的值根据盒模型包括
    • content-box
    • padding-box
    • border-box
    • margin-box

所有这些属性的默认值是auto，浏览器会找出元素的宽度和高度。

2.1 尺寸设置

通过这些属性，我们可以显式的设置元素的尺寸，比如：

<!DOCTYPE HTML>
<html>
  <head>
    <style type="text/css">
      div {
        width: 75%;
        height: 100px;
        border: thin solid black;
      }
      img {
        background: lightgray;
        border: 4px solid black;
        margin: 2px;
        height: 50%;
      }
      #first {
        box-sizing: border-box;
        width: 50%;
      }
      #second {
        box-sizing: content-box;
      }
    </style>
  </head>
  <body>
    <div>
      <img id="first" src="download.png" alt="download">
      <img id="second" src="download.png" alt="download">
    </div>
  </body>
</html>

7d99c395156127eae5fc1091c33f8bbf.png

上面的代码将 #first 的宽度显式的指定为 div 宽度的 50%， 而 div 的宽度为浏览器当前宽度的 75% ，所以看起来变形了。

而 img 的高度设置为 div 高度的 50%，所以两个图标事实上为 50px 高，至于 #second 没有变形的原因，是因为没有显式的指定宽度，也就是默认值 auto。

通过上面的例子，我们也可以看看如果将宽度和高度设置为自动，会是怎样的，如下：

<!DOCTYPE HTML>
<html>
  <head>
    <style type="text/css">
      p {
        padding: 10px;
        margin: 10px;
        border: thin solid black;
        width: auto;
        min-width: 200px;
      }
      img#x-aspect-1 {
        border: 1px solid black;
        margin: 5px;
        width: 200px;
        height: auto;
      }
    </style>
  </head>
  <body>
    <p>This is a test. This is a test.</p>
    <img src="download.png" id="x-aspect-1" />
  </body>
</html>

4e3b20ae1bb91b8c8bac24fcc8ce4d96.png

上面的代码，设置了 img 的宽度，而高度显式的设置为 auto （当前不显式的设置也是一样的），所以图片本身被放大了，并且维持了原有比例；而 p 的宽度设置为 auto，但是有个最小的宽度，也就是说即使窗口缩小的更多，p 元素的宽度也不会小于下面图片的宽度。

2.2 框大小

CSS 3 引入的 box-sizing 属性可以设置 width 和 height 属性中，包含了 padding 和 border，这个属性的主要目的是为了解决原来设置了填充和边框之后，与自己预期元素尺寸不符合的情况而出现的。

下面是个例子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>hello</title>
    <style>
      .div1 {
        width: 300px;
        height: 100px;
        border: 1px solid blue;
      }
    
      .div2 {
        width: 300px;
        height: 100px;
        padding: 50px;
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
    <div class="div1">这个是个较小的框 (width 为 300px ，height 为 100px)。</div>
    <div class="div2">这个是个较大的框 (width 为 300px ，height 为 100px)。</div>
  </body>
</html>

8901d45bab834758d22d82978d5a914e.png

上面的代码中可以看到，两个 div 设置了同样的高度和宽度，但因为填充（内边距）的不同，造成了框的大小有明显的不同。

而通过设置 box-sizing 我们可以明显看到，两个框大小一致了：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>hello</title>
    <style>
      .div1 {
        width: 300px;
        height: 100px;
        border: 1px solid blue;
        box-sizing: border-box;
      }

      .div2 {
        width: 300px;
        height: 100px;
        padding: 50px;
        border: 1px solid red;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <div class="div1">现在的框一样大</div>
    <div class="div2">现在的框一样大</div>
  </body>
</html>

07cdd532d83035821111d8e6bc492da9.png

如上所示，这个元素可以让所有元素以更直观的方式展示大小。很多浏览器已经支持 box-sizing: border-box; (但是并非所有 - 这就是为什么有时 input 和 text 元素设置了 width: 100%; 后的宽度却不一样)。

推荐所有元素都使用 box-sizing：

* {
  box-sizing: border-box;
}

3 弹性盒子

弹性盒子是 CSS 3 的一种新的布局模式。

CSS 3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

3.1 简介

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成，通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

弹性容器内包含了一个或多个弹性子元素。

注意： 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。

弹性子元素通常在弹性盒子内一行显示，默认情况每个容器只有一行，下面是个例子：

<!DOCTYPE html>
<html>
  <head>
    <style>
      .flex-container {
        display: flex;
        width: 400px;
        height: 250px;
        background-color: lightgrey;
      }
      .flex-item {
        background-color: cornflowerblue;
        width: 100px;
        height: 100px;
        margin: 10px;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div class="flex-item">flex item 1</div>
      <div class="flex-item">flex item 2</div>
      <div class="flex-item">flex item 3</div>
    </div>
  </body>
</html>

0d213123f04ba776f6ad6de962483614.png

上面的代码是一个基础的例子，我们还可以修改排列方式。

如果我们设置 direction 属性为 rtl（右到左），其余什么都不改变，则弹性子元素的排列方式也会改变，页面布局也跟着改变：

body {
  direction: rtl;
}

e1e6b4e2d732d86855ad76585e78dd1e.png

这样设置，所有的容器都会遵循从右向左的方式排列，不过文字不会，因为英文本身不是从右向左排列的语言。

3.2 子元素排列（容器属性）

flex-direction 顺序指定了弹性子元素在父容器中的位置，它可以在不设置整体 direction 的情况下，单独设置弹性子元素的排列方式，它可以包含如下值：

  • row：横向从左到右排列（左对齐），默认的排列方式
  • row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面
  • column：纵向排列
  • column-reverse：反转纵向排列，从后往前排，最后一项排在最上面

在3.1这一节中的第一个例子的基础上，加一行代码即可：

.flex-container {
  display: flex;
  flex-direction: row-reverse; /* 增加该行 */
  width: 400px;
  height: 250px;
  background-color: lightgrey;
}

cb5366e873076e0147e03f33c1808e8c.png

这种方式，仅仅将弹性子元素的排序反了过来，但是并不影响其他元素。

而通过设置为 column 可以让弹性子元素纵向排列：

flex-direction: column;

b7f404a7f2850856ae93a1d9b839cb05.png

同样也可以进行纵向的反序排列：

flex-direction: column-reverse;

cc882e76e56dfa54239fa169af281ed8.png

3.3 水平对齐（容器属性）

justify-content 属性应用在弹性子元素上，设置它（们）在母元素当中的水平对齐方式，它可以包含如下值：

  • flex-start：项目位于容器的开头，这个是默认值，即子元素靠头部排列
  • flex-end：项目位于容器的结尾，即子元素靠尾部反向排列
  • center：项目位于容器的中心，即子元素居中
  • space-between：项目位于各行之间留有空白的容器内，相邻项目的间隔相等
  • space-around：项目位于各行之前、之间、之后都留有空白的容器内，彼此间隔相等（比如是20px），同时首尾两边和子元素之间留有一半的间隔（1/2 * 20px = 10px）

因为 flex-start 是默认值，所以从 flex-end 开始，我们逐一演示几个值的渲染效果：

flex-end：

.flex-container {
  display: flex;
  justify-content: flex-end; /* 增加该行 */
  width: 400px;
  height: 250px;
  background-color: lightgrey;
}

5a8466b27b14e677d9d9d63d655a3aa2.png

center：

justify-content: center;

8aadc5e81794780e1b7b9a84694264e0.png

space-between：

justify-content: space-between;

3e4e753238baa6d0dd005b803aa858c1.png

space-around：

justify-content: space-around;

23b35c1fc79dc2ac3ae81b9bcdce9e3c.png

3.4 垂直对齐（容器属性）

align-items 属性应用在弹性子元素上，设置它（们）在母元素当中的垂直对齐方式，它可以包含如下值：

  • stretch：默认值，元素被拉伸以适应容器
  • flex-start：元素位于容器的开头
  • flex-end：元素位于容器的结尾
  • center：元素位于容器的中心
  • baseline：元素位于容器的基线上，通常是和 flex-start 相同的结果

我们在上面代码的基础上，依次来看看各属性的渲染结果：

stretch：

.flex-container {
  display: flex;
  align-items: stretch; /* 增加该行 */
  width: 400px;
  height: 250px;
  background-color: lightgrey;
}
.flex-item {
  background-color: cornflowerblue;
  width: 100px;
  margin: 10px;
}

b6120c6f15991af6731278e8194cf49c.png

flex-start：

align-items: flex-start;

9f44166fc8328da0ed052dba08efe442.png

flex-end：

align-items: flex-end;

69c6b118eaa6cf3c4a16d8be61a6034b.png

center：

align-items: center;

eebba2d5-4551-eb11-8da9-e4434bdf6706.png

baseline：

align-items: baseline;

92a051c915d79e99fef7e32c0047c782.png

3.5 子元素换行（容器属性）

flex-wrap 属性用于指定子元素换行方式，它可以包含如下值：

  • nowrap：默认，弹性容器为单行，该情况下弹性子项可能会溢出容器
  • wrap：弹性容器为多行，该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行
  • wrap-reverse：反序 wrap 排列

同样分别来看渲染效果：

nowrap：

.flex-container {
  display: flex;
  flex-wrap: nowrap; /* 增加该行 */
  align-content: center; /* 为了效果明显，将子元素垂直居中 */
  width: 300px;
  height: 300px;
  background-color: lightgrey;
}
.flex-item {
  background-color: cornflowerblue;
  width: 100px;
  height: 100px;
  margin: 10px;
}

49a7f1e5671ba43e9bb0f448780602e0.png

wrap：

flex-wrap: wrap;

45999b762eedd74151c03677bf1e66be.png

wrap-reverse：

flex-wrap: wrap-reverse;

eb3c7ada25a031ff92fd319123d8c93a.png

3.6 子元素排序（子元素属性）

order 属性可以手动的指定子元素的序号，它只接受整数值：数值小的排在前面，可以为负值。

下面是个例子：

<!DOCTYPE html>
<html>
  <head>
    <style>
      .flex-container {
        display: flex;
        width: 400px;
        height: 250px;
        background-color: lightgrey;
      }
      .flex-item {
        background-color: cornflowerblue;
        width: 100px;
        height: 100px;
        margin: 10px;
      }
      .first {
        order: -1;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div class="flex-item">flex item 1</div>
      <div class="flex-item first">flex item 2</div>
      <div class="flex-item">flex item 3</div>
    </div>
  </body>
</html>

c7a56ab9bc37d657d0c9b8109630eaea.png

可以看到，我们给 flex item 2 定义了新的 class 为 first，这里我们定义 .first 的序号为 -1，所以它的排序变成了第一位。

3.7 子元素对齐（子元素属性）

设置子元素的 margin 值为 auto，自动获取弹性容器中剩余的空间。所以设置垂直方向margin 值为 auto，可以使弹性子元素在弹性容器的两上轴方向都完全居中。

以下例子在第一个弹性子元素上设置了 margin-right: auto; ，它将剩余的空间放置在元素的右侧：

.flex-item:first-child {
  margin-right: auto;
}

1b20c1d26950aa954f18c3bd79cbe5a1.png

下面的例子则可以完美解决我们平时碰到的居中问题，使用弹性盒子，居中变的很简单，只要设置 margin: auto; 就可以使得弹性子元素在两上轴方向上完全居中：

.flex-item {
  background-color: cornflowerblue;
  width: 75px;
  height: 75px;
  margin: auto;
}

651018bccaaf4c7965360b6765dcd658.png

3.8 子元素垂直位置（子元素属性）

align-self 属性用于设置子元素自身的垂直位置，它可以包含如下值：

  • auto：默认值，元素继承了它的父容器的 align-items 属性。如果没有父容器则为 stretch
  • flex-start：元素位于容器的开头
  • flex-end：元素位于容器的结尾
  • center：元素位于容器的中心
  • baseline：元素位于容器的基线上
  • stretch：元素被拉伸以适应容器

下面是个例子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>hello</title>
    <style>
      .flex-container {
        display: flex;
        width: 400px;
        height: 250px;
        background-color: lightgrey;
      }
      .flex-item {
        background-color: cornflowerblue;
        width: 60px;
        min-height: 100px;
        margin: 10px;
      }
      .item1 {
        align-self: flex-start;
      }
      .item2 {
        align-self: flex-end;
      }
      .item3 {
        align-self: center;
      }
      .item4 {
        align-self: baseline;
      }
      .item5 {
        align-self: stretch;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div class="flex-item item1">flex-start</div>
      <div class="flex-item item2">flex-end</div>
      <div class="flex-item item3">center</div>
      <div class="flex-item item4">baseline</div>
      <div class="flex-item item5">stretch</div>
    </div>
  </body>
</html>

e054adbddd606b992c91d3c34cd28db6.png

3.9 子元素空间（子元素属性）

flex 属性用于指定弹性子元素如何分配空间，它是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性，可以包含如下值：

  • none：与 0 0 auto 相同
  • auto：与 1 1 auto 相同
  • [ flex-grow ]：一个数字，规定项目将相对于其他灵活的项目进行扩展的量
  • [ flex-shrink ]：一个数字，规定项目将相对于其他灵活的项目进行收缩的量
  • [ flex-basis ]：项目的长度，可以包含值：auto、inherit 或 CSS 长度单位

下面的例子里，第一个弹性子元素占用了 1/2 的空间，其他两个各占 1/4 的空间：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>hello</title>
    <style>
      .flex-container {
        display: flex;
        width: 400px;
        height: 250px;
        background-color: lightgrey;
      }
      .flex-item {
        background-color: cornflowerblue;
        margin: 10px;
      }
      .item1 {
        flex: 2;
      }
      .item2 {
        flex: 1;
      }
      .item3 {
        flex: 1;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div class="flex-item item1">flex item 1</div>
      <div class="flex-item item2">flex item 2</div>
      <div class="flex-item item3">flex item 3</div>
    </div>
  </body>
</html>

2b56b1cbe0f8e9b2b49b3e9499c7d5aa.png
weixin_39789094
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
盒模型例子
A123ppleQueen的博客
06-28 878
一,建立结构，html代码 html代码与展示效果 2 写样式，个人代码 个人写的代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> /* 个人写的代码 */ body{ } header{ width:100%; height: 30%..
html&CSS-----盒模型
最新发布
m0_73633088的博客
06-06 2084
详细介绍html&CSS中的盒模型的相关用法包括标准盒模型和怪异盒模型，大家进来看看吧！！！
盒子横向排列-初识浮动Float（HTML、CSS）
...
08-10 983
盒子横向排列-初识浮动Float（HTML、CSS） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>盒子横向排列-初识浮动</title> <style
HTML（div盒子模型）
mooonk的博客
03-25 9917
系列文章目录 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码如下（示例）： import numpy as np import pandas as pd import matplotlib.p
html盒子模型
Hatsune_1的博客
10-12 3743
盒子模型
css盒子模型图解
09-25
### CSS盒子模型详解 #### 一、引言 CSS（层叠样式表）是Web设计中不可或缺的一部分，它用于控制HTML文档的布局和外观。在CSS中，元素的布局通过盒子模型来定义，该模型决定了元素如何占用空间以及与其他元素交互...
HTML5&CSS3网页制作：盒子模型概述.pptx
05-31
同时，理解CSS3中的盒子模型是网页设计的基础。 盒子模型是Web开发中的一个重要概念，它将HTML元素视为具有四个部分的矩形盒子：内容（content）、内边距（padding）、边框（border）和外边距（margin）。内容区域...
HTML和CSS的关键:盒子模型(Box model)
12-09
HTML和CSS中的盒子模型（Box model）是网页布局的基础，它是理解CSS布局的关键。这个模型定义了元素在页面上的占用空间，包括元素的内容区域（Content）、内边距（Padding）、边框（Border）以及外边距（Margin）四...
css盒子模型详解加示例
09-25
CSS盒子模型是网页布局的基础，它定义了网页元素在页面上的空间占用方式。W3C组织推荐使用这一模型，将每个HTML元素视为一个矩形盒子，盒子由四部分组成：内容区域（content）、内填充（padding）、边框（border）和...
CSS之盒子模型与背景属性————每天一遍小知识
01-08
边框样式——Border style5.CSS的边宽和高度——width height三.背景——background1.背景颜色——background color2.背景图像—— background image3.背景重复—— background repeat4.背景的附件（固定与滚动）...
HTML盒子模型
hafk12的博客
04-04 357
比如：padding: 3px 5px 10px 15px;表示：上3px 右是5px 下 10px 左15px 顺时针+语法：border : border-width || border-style || border-color。比如：padding: 3px 5px 10px;表示：上是3像素 左右是5像素 下是10像素。比如：padding: 3px 5px;表示：上下左右都是3像素。padding：上内边距 右内边距 下内边距 左内边距。margin:上外边距 右外边距 下外边距 左外边。
前端开发_HTML5_盒子模型
u013185175的博客
12-16 4752
盒子模型 1、引入 盒子模型是CSS中一个重要的概念，早在CSS的诞生之处便有这一个概念了，对于网页中的大部分对象，实际呈现就是一个盒子形状对象，即是一个块对象，每一个盒子都存在着四个东西，即:边框(border)、边界(margin)、填充(padding)、内容(content)。这四个内容我们在之前的学习中是介绍过的。那么在学习的过程中我们还举例了现实生活中的快递盒子便于大家的理解。 2、盒子模型示意图 3、盒子的大小确定 我们在html页面上写一个标签元素，发现这一个这一个...
菜鸟的HTML5之路DAY 09-----盒子模型
hzl529的博客
09-22 618
文章目录1 盒子模型1.1盒子边框（border）1.2 内边距（padding）1.3 外边距（margin）1.3.1外边距实现盒子居中1.3.2 文字盒子居中图片和背景区别1.3.3 清除元素的默认内外边距1.3.4 相邻块元素垂直外边距的合并1.4 盒子模型布局稳定性1.5 CSS3盒模型1.6 盒子阴影 1 盒子模型 所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是...
html CSS盒子模型
guoqingru0311的博客
07-08 1292
CSS盒子模型1、盒子模型解释：2、盒模型的实际尺寸： 1、盒子模型解释： 代码实现： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒子模型例子</title> <style type="text/css"> .box0{ background-color: g
多个div横向排列的几种方法
热门推荐
syq8023的博客
07-15 3万+
以下面这组 div 为例，group的高度由内容撑开 <div id="group"> <div id="div1">div1</div> <div id="div2">div2</div> <div id="div3">div3</div> </div> 显示结果如下为上下排列 常见的有三种方法可以让div横向排列，分别是flex 弹性盒模型、float 浮动和通过i...
弹性布局
bigboy1010的博客
04-13 855
记录弹性布局的学习总结 弹性布局的属性： display：flex | inline-flex；（适用于父类容器上） 两种方式的不同之处在于一个纵向排列，一个横向排列，如下图 flex-folw （适用于父类容器上）复合属性。就是可以同时设置以下两个值 flex-direction （适用于父类容器的元素上）：设置或检索伸缩盒对象的子元素在父容器中的位置。如果元素的大小超过父容器，元素...
HTML---盒模型
m0_51651340的博客
04-13 6793
HTML---盒模型
html盒子模型的实例,html盒模型的示例分析
weixin_34233974的博客
06-10 1891
html盒模型的示例分析发布时间：2021-06-04 12:04:12来源：亿速云阅读：61作者：小新小编给大家分享一下html盒模型的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！1.1. 盒的内容区的尺寸— content width和content height —取决于几个因素：--生成该盒的元素是否设...
HTML css盒子模型案例(圆，半圆等)“border-radius” 简易易上手
yunduanaoligei的博客
08-26 1588
这篇文章关键介绍了HTML css盒子模型实例(圆，半圆形等)“border-radius” 简易易入门,文中根据案例编码给大伙儿介绍的十分详尽，对大伙儿的学习培训或工作中具备一定的参考参考使用价值，必须的盆友能够参考下 许多小伙伴们在前端学习的情况下，发觉盒子模型默认为方形。怎样把小盒子变为要想的实体模型呢？ 最先大家看来一下默认的状况---- <!DOCTYPE html> <html lang="en"> <head> <meta charset="U
理解HTML5盒子模型与CSS3布局
"HTML5&CSS3网页制作：盒子模型概述" HTML5和CSS3是现代网页制作的基础，其中盒子模型是理解网页布局的关键概念。盒子模型（Box Model）是一种将HTML元素视为矩形盒子的思维模式，它描述了元素如何占据空间以及与...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值