HTML（div盒子模型）

最新推荐文章于 2024-04-17 13:30:08 发布
最新推荐文章于 2024-04-17 13:30:08 发布
阅读量9.8k 收藏 25
点赞数 5
分类专栏： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mooonk/article/details/115189918
版权

HTML（div盒子模型）

div块标签
盒子模型
块标签与行内标签的转换

一、标签

1.div块标签
div块标签和span行内标签都是使用属性style确定其他属性

<div style="border: 1px solid blueviolet">div测试</div>

在这里插入图片描述
div块标签独占一行
使用选择器实现div多样式设置
head：

<style>
    #d1{
        border:  1px solid brown;
        color: blue;
        background-color: bisque;
        width: 100px;
        height: 25px;
    }
</style>

body：

<div id="d1">div测试</div>

在这里插入图片描述
2.盒子模型
（1）内边距设置
内边距设置之后块向着四个边的方向分别外扩设置的值，而不是内扩
/四边同时设置/

padding: 100px;

在这里插入图片描述
如最后一个图所示，是将四个边都设置为内边距为100px得到的块

/上下设置、左右设置/

padding: 500px 250px;

在这里插入图片描述
/四个边分别设置/

 /*第一种方法*/
padding: 100px 200px 300px 400px;
/*第二种方法*/
padding-top: 100px;
padding-right: 200px;
padding-bottom: 300px;
padding-left: 400px;

在这里插入图片描述
使用第一种方法分别设置四边内边距时，数值的顺序是从上方开始的顺时针转动

（2）外边距
外边距的设置方法与内边距相同，但是将内边距的属性padding换成margin
/四边同时设置/

margin: 100px ;

在这里插入图片描述
/上下设置、左右设置/

margin: 100px 50px;

在这里插入图片描述
/四边分别设置/

/*第一种方法*/
margin: 100px 200px 300px 400px;
/*第二种方法*/
margin-top: 100px;
margin-right: 200px;
margin-bottom: 300px;
margin-left: 400px;

在这里插入图片描述
（3）使用外边距使块居中
利用margin属性使块剧中操作
使用margin设置的上下、左右两两设置的方法，上下不设置，左右设置为auto（自动）

margin: 0px auto;

在这里插入图片描述
3.块标签转换行内标签
行内标签不具有居中、内边距、外边距等属性，有时候需要对行内标签进行操作时不起作用、就需要将行内标签转为块标签
使用display属性进行转换：当display=inline时，块标签转行内标签；当display=block时，行内标签转块标签

二、所有源码及结果

1.源码

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <style>
        #d1{
            border:  1px solid brown;
            color: blue;
            background-color: bisque;
            width: 100px;
            height: 25px;
        }
        /*内边距*/
        /*.d2{
            border:  1px solid brown;
            color: blue;
            background-color: bisque;
            width: 100px;
            height: 25px;
!*            !*四个边同时设置*!
            padding: 100px;
            !*上下设置、左右设置*!
            padding: 100px 250px;
            !*四个边分别设置*!
            !*第一种方法*!
            padding: 100px 200px 300px 400px;*!
            !*第二种方法*!
            padding-top: 100px;
            padding-right: 200px;
            padding-bottom: 300px;
            padding-left: 400px;
        }*/
        /*外边距*/
        .d2 {
            border: 1px solid brown;
            color: blue;
            background-color: bisque;
            width: 100px;
            height: 25px;
/*
            margin: 100px ;
*/
/*
            margin: 100px 50px;
*/
            /*第一种方法*/
/*
            margin: 100px 200px 300px 400px;
*/
            /*第二种方法*/
          /*  margin-top: 100px;
            margin-right: 200px;
            margin-bottom: 300px;
            margin-left: 400px;*/
            /*使用margin属性居中块*/
            margin: 0px auto;
        }

    </style>
</head>
<body>
<!--div块标签-->
<div style="border: 1px solid blueviolet" >div测试</div>
<!--选择器设置-->
<div id="d1">div测试</div>
<div class="d2">div测试</div>
</body>
</html>

2.结果

在这里插入图片描述

叮定
关注
  • 5
    点赞
  • 踩
  • 25
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
【DIV 盒子模型】
ITher的博客
01-05 3109
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 盒子模型 1、什么是盒子模型？ 2、border边框 3、padding内边距 4、margin外边距 5、盒子的塌陷与合并 总结 一、盒子模型 1、什么是盒子模型 效果如图 二、使用步骤 1.引入库 代码如下（示例）： import numpy as np import pandas as pd import matplotlib.pyplot as...
DIV CSS 盒子模型PPT演讲.zip
02-27
**DIV CSS 盒子模型详解** 在网页设计中，DIV CSS是构建页面布局的重要工具，而盒子模型（Box Model）则是理解CSS布局的关键概念。这个PPT演讲将深入探讨这一核心知识点，帮助初学者掌握网页设计的基础。 首先，...
html&CSS-----盒模型
m0_73633088的博客
06-06 2058
详细介绍html&CSS中的盒模型的相关用法包括标准盒模型和怪异盒模型，大家进来看看吧！！！
盒子模型代码
最新发布
dongsj_999的博客
04-17 174
【代码】盒子模型代码。
前端开发_HTML5_盒子模型
u013185175的博客
12-16 4734
盒子模型 1、引入 盒子模型是CSS中一个重要的概念，早在CSS的诞生之处便有这一个概念了，对于网页中的大部分对象，实际呈现就是一个盒子形状对象，即是一个块对象，每一个盒子都存在着四个东西，即:边框(border)、边界(margin)、填充(padding)、内容(content)。这四个内容我们在之前的学习中是介绍过的。那么在学习的过程中我们还举例了现实生活中的快递盒子便于大家的理解。 2、盒子模型示意图 3、盒子的大小确定 我们在html页面上写一个标签元素，发现这一个这一个...
【html_盒子模型】div
十二_的博客
11-15 556
努力是为了不平庸~算法学习有些时候是枯燥的，这一次，让我们先人一步，趣学算法！欢迎记录下你的那些努力时刻（算法学习知识点/算法题解/遇到的算法bug/等等），在分享的同时加深对于算法的理解，同时吸收他人的奇思妙想，一起见证技术er的成长~
Web基础：CSS的常规布局———盒子模型
m0_73058235的博客
04-19 2527
网页布局一般通过栏 列 行等组合来实现布局，现代浏览器都有两个模式：怪异模式和标准模式，在标准模式下，border padding width height都是各自独立的区域一般在没有定义边框的情况下，中间的栏目可以实现并列显示，但当他们超出所定义边框时，由于总行度超过了所设定，就会出现错行显示，为避免这种情况发生，我们通过事先设定好各区域所需大小，从而解决此问题，下面我以最常见的网页布局模式进行演示：上述就是我们在预览浏览器时最常看到的布局模式，源代码如下： 上述布局我们很容易发现，在网页的每一个区域
HTML盒模型
Lovely_CSDN的博客
09-13 427
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素margin，边框border，填充padding，和实际内容content。**W3C标准模型：width = content（内容）**默认浏览器会使用标准模型。
div盒子模型，方便的盒子插件
09-11
在html中添加class为.box2的div即可； 3、属性介绍 <div class="box2" panerTitle="控制面板" panelHeight="" panelWidth="300" showStatus="收缩" panelUrl=""> panerTitle：box2添加左上角标题，可为随意文本 ...
HTML5&CSS3网页制作：盒子模型概述.pptx
05-31
总结来说，掌握HTML5的`<div>`标记和CSS3的盒子模型是网页制作的基本功。通过深入学习这些概念，开发者能够更好地控制网页元素的外观和位置，实现精细化的页面设计。无论是初学者还是经验丰富的开发者，都需要熟练...
CSS+DIV-盒子模型示例.zip
11-03
**CSS+DIV 盒子模型详解** 在网页设计与开发中，CSS（层叠样式表）和DIV元素是构建布局的基础。"CSS+DIV-盒子模型示例.zip"中的内容显然是为了帮助理解CSS中的盒子模型及其应用。盒子模型是CSS布局的核心概念，它将...
Html之盒模型
04-30
NULL 博文链接：https://lbovinl.iteye.com/blog/2435565
CSS教程:通过实例学习和理解CSS盒模型
12-10
盒模型主要定义四个区域：内容（content）、内边框距（padding）、边框（border）和外边距（margin）。 自从1996年CSS1的推出，W3C组织就建议把所有网页上的对像都放在一个盒（box）中，设计师可以通过创建定义来控制这个盒的属性，这些对像包括段落、列表、标题、图片以及层<div>。 盒模型主要定义四个区域：内容（content）、内边框距（padding）、边框（border）和外边距（margin）。 对于初学者，经常会搞不清楚margin，padding之间的层次、关系和相互影响。下面我们一起看一个实例，以便于加深理解。 下面我们一起来分析一下这个例子。 XHT
CSS 盒子模型
12-14
CSS 盒子模型 CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子，在CSS中，”box model”这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 下面的图片说明了盒子模型(Box Model)： 不同部分的说明： Margin(外边距) – 清除边框外的区域，外边距是透明的。 Border(边框) – 围绕在内边距和内容外的边框。 Padding(内边距) – 清除内容周围的区域，内边距是透明的。 Content(内容) –
HTML和div盒子简单制作
07-01
盒子模型简单制作
HTML----盒子模型
xry12354的博客
04-08 2942
所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。
网页设计之盒子模型（DIV）
qq_43527959的博客
05-11 8865
盒子模型 DIV 什么是盒子模型 1、盒子模型的定义 所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。 2、div 标记的定义 **div**是英文division的缩写，意为“**分割、区域**”。<div>标记简单而言就是一个区块容器标记，可以将网页分割为独立的、不同的部分，以实现网页的规划和布局。**<div>与</div>
JavaScript-页面布局-div布局-盒子模型
插件开发
03-27 3928
文章目录1.盒子模型2.定位方式3.排列属性-float和clear4.块和内联属性5.作者答疑   在使用Html构建界面时，最关键的标签是div，这是一个有着各种属性的块状标签，能够以绝对定位和相对定位的方式构建各种界面模型。 1.盒子模型   div标签在界面排版时，使用的是盒子模型，如下图所示，主要有3大属性来标识相对关系，padding标识内部内容距离border的距离，border边框的宽度，margin是border距离外部元素的距离。使用这三大距离，可以有效控制该元素与周边元素的相对距离。如
HTML盒子标签
LEVIATHANq的博客
11-05 556
无
html中div盒子居中
10-11
有多种方法可以实现HTML中div盒子居中，其中包括使用弹性盒模型、position属性与margin调整等方法。我们可以根据需要选择合适的方法来实现盒子居中。 例如，可以使用弹性盒模型中的justify-content和align-items属性来实现水平和垂直方向的居中。同时，也可以使用position属性和transform属性的translate函数来实现盒子的居中。 下面是三种方法的示例代码： 方案一：使用弹性盒模型 ``` <style> body { margin: 0; } .a { display: flex; justify-content: center; /*水平居中*/ align-items: center; /*垂直居中*/ height: 600px; width: 600px; border: 1px solid black; } .box { width: 200px; height: 200px; background-color: pink; } </style> <div class="a"> <div class="box"></div> </div> ``` 方案二：使用position和margin调整 ``` <style> .a { position: relative; width: 600px; height: 600px; border: 1px solid black; } .box { position: absolute; width: 200px; height: 200px; top: 0; left: 0; right: 0; bottom: 0; background-color: pink; margin: auto; } </style> <div class="a"> <div class="box"></div> </div> ``` 方案三：使用position和transform ``` <style> .a { position: relative; width: 600px; height: 600px; border: 1px solid black; } .box { position: absolute; width: 200px; height: 200px; top: 50%; /*盒子左上角的那个点在页面正中间*/ left: 50%; background-color: pink; transform: translateX(-50%) translateY(-50%);/*不需要知道盒子宽度*/ } </style> <div class="a"> <div class="box"></div> </div> ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值