HTML（div盒子模型）

最新推荐文章于 2022-12-05 20:18:31 发布
最新推荐文章于 2022-12-05 20:18:31 发布
阅读量9.9k 收藏 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 3111
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 盒子模型 1、什么是盒子模型？ 2、border边框 3、padding内边距 4、margin外边距 5、盒子的塌陷与合并 总结 一、盒子模型 1、什么是盒子模型 效果如图 二、使用步骤 1.引入库 代码如下（示例）： import numpy as np import pandas as pd import matplotlib.pyplot as...
盒模型例子
A123ppleQueen的博客
06-28 875
一,建立结构，html代码 html代码与展示效果 2 写样式，个人代码 个人写的代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> /* 个人写的代码 */ body{ } header{ width:100%; height: 30%..
CSS 盒子模型
12-14
CSS 盒子模型 CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子，在CSS中，”box model”这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 下面的图片说明了盒子模型(Box Model)： 不同部分的说明： Margin(外边距) – 清除边框外的区域，外边距是透明的。 Border(边框) – 围绕在内边距和内容外的边框。 Padding(内边距) – 清除内容周围的区域，内边距是透明的。 Content(内容) –
HTML---盒模型
m0_51651340的博客
04-13 6780
HTML---盒模型
盒子效果案例
喵喵的博客
05-14 337
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { width: 200px; height: 200px; transition: all 1...
HTML-div盒子模型
主营前端方向，技术栈是vue
11-09 4585
div盒子模型(边框的border-width宽度，border-color颜色，border-style样式，上右下左四个边框以及简写、内联元素盒子)
HTML 盒子模型
Di_Panda的博客
04-20 435
为了找到一种布局方式，是目前最主要的布局方式，比传统的table布局要美观，也要复杂很多。 盒子模型基础 设置宽高/设置边框/设置内间距/设置外边距 width:200px; /* 设置盒子的宽度，此宽度是指盒子内容的宽度，不是盒子整体宽度(难点) */ height:200px; /* 设置盒子的高度，此高度是指盒子内容的高度，不是盒子整体高度(难点) */ 盒子模型基础 margin 基...
HTML盒模型
QuickRabbit的博客
04-09 4621
盒模型 ​ 什么是盒模型：每一个标签都是一个矩形，像一个盒子，所以HTML页面的布局可以理解为多个盒子组合嵌套排序而成。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wSHciGHI-1649508211222)(C:\Users\Guolan\AppData\Local\Temp\1649504298774.png)] ​ 整个盒模型的组成由上图所示，盒子的内容大小由width宽度和height高度指定，padding设置盒内边距，border设置盒子边框，margin设
DIV CSS 盒子模型PPT演讲.zip
02-27
**DIV CSS 盒子模型详解** 在网页设计中，DIV CSS是构建页面布局的重要工具，而盒子模型（Box Model）则是理解CSS布局的关键概念。这个PPT演讲将深入探讨这一核心知识点，帮助初学者掌握网页设计的基础。 首先，...
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和div盒子简单制作
07-01
盒子模型简单制作
CSS（5）盒子模型
flower521528的博客
03-05 618
一、标准盒子模型 每个标签都类似于盒子有内边距和外边距 内边距设置 padding-left：10px； 左边的边距 padding-right：10px； 右边的边距 padding-top：10px； 上面的边距 padding-bottom：10px； 下面的边距 简写：padding:10px;上下左右都是10px； padding：10px 20px；第一个值是上下的边距，第二个值是左右的边距； padding：10px...
【HTML+CSS】弹性盒子
LuWeien的博客
12-05 2174
box-sizing: content-box padding和border不会撑大盒子 元素的总宽度=width+左右的margin width=width+左右的padding+左右的border 元素的总高度=height+上下的margin height=height+上下的padding+上下的border 弹性盒子 弹性盒子是什么？ 是一种布局方式 弹性盒子元素的大小 排版 顺序都受到父元素的影响和控制 灵活控制子元素在父元素中水平垂直对齐方式 给一个元素设置了display
两个相邻盒子的边框怎么只显示一个_一篇文章带你快速理解盒子模型「经典案例」...
weixin_39614831的博客
11-29 377
今天带大家快速理解盒子模型，直接上代码： css盒子 我的css盒子测试模型 上面代码没有任何难度，只是写了一个div标签，大家已经知道，div标签是块级元素，所以会占满一行：但是我们也注意到了图片的左侧其实还是有一些间隙的：这个间隙在我们预期中是不应该存在的，这种间隙基本上就...
盒子模型学习-尚硅谷HTML源代码
weixin_58264104的博客
06-30 3559
盒子模型学习-尚硅谷HTML源代码
HTML（div块定位）
热门推荐
mooonk的博客
03-25 1万+
HTML（div块定位） 块定位可以通过在选择器内设置position属性实现块在浏览器页面内部的摆放位置，可以自己设置位置 绝对定位 相对定位 相对浏览器定位 一、定位方式 1.绝对定位 绝对定位，position属性值为absolute，之后再设置top、right、bottom、left四个方向的值 top和bottom可能会有冲突，不设置其一也可以，左右一样 在原有的块标签位置移动之后，原位置被释放，可以被其他块标签占用 <style> .d1,.d2,.d3{
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、付费专栏及课程。

余额充值