HTML5盒子模型

最新推荐文章于 2024-07-16 12:13:25 发布
最新推荐文章于 2024-07-16 12:13:25 发布
阅读量438 收藏 8
点赞数 4
分类专栏： HTML笔记 文章标签： html5 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_55555550/article/details/139720425
版权

1.盒子的基本模型

一个盒子的可以有内边距和外边距

内边距里面的才是内容  外边距是和其他标签或者盒子的距离  可以加边框border来让距离更加清楚

完整代码

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            height: 300px;
            width:300px;
            background-color: aqua;
            /* 外边距 */
            margin: 30px;

            /* 边框 */
            border: 1px solid #000;

            /* 内边距 */
            padding: 30px;
        }
    </style>
</head>
<body>
    <div>
        123
    </div>
</body>
</html>

2.边框的样式

边框的属性是复合属性 分别为  大小 类型 颜色

 border: 1px solid #000;

边框还有三种类型  分别为实线型  虚线型 点线型

    /* 实线solid */
border: 1px solid #000;
    /* 虚线dashed */
border: 2px dashed green;
    /* 点线dotted */
border: 3px dotted blueviolet;

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            height: 300px;
            width:300px;
            background-color: aqua;
            /* 外边距 */
            padding: 30px;
            /* 内边距 */
            margin: 30px;
            /* 边框 */

            /* 边框是复合属性  大小 类型 颜色 */
            /* 一共有三种类型 实现虚线和点线 */
            /* 实线solid */
            border: 1px solid #000;
            /* 虚线dashed */
            border: 2px dashed green;
            /* 点线dotted */
            border: 3px dotted blueviolet;
        }
    </style>
</head>
<body>
    <div>
        123
    </div>
</body>
</html>

单独设置每个边的边框样式

 完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            height: 200px;
            width:200px;
            background-color: aqua;
            /* 外边距 */
            padding: 30px;
            /* 内边距 */
            margin: 30px;
            /* 边框 */

            /* 边框是复合属性  大小 类型 颜色 */
            /* 一共有三种类型 实现虚线和点线 */
            /* 实线solid */
            /* border: 1px solid #000; */
            /* 虚线dashed */
            /* border: 2px dashed green; */
            /* 点线dotted */
            /* border: 3px dotted blueviolet; */

            /* 也可以单独设置某一个位置的边框属性 */
            /* top 上 buttom下 left左 right右 */
            border-top: 2px solid red;
            border-bottom: 3px dashed black;
            border-left: 4px dotted rgb(136, 82, 82);
            border-right: 4px solid pink;
            
        }
    </style>
</head>
<body>
    <div>
        123
    </div>
</body>
</html>

3.边距样式

既然边框可以设置多个边   那么边距也可以设置多个边

和边框的写法相同 但是边距有一个特殊的复合写法 是按照 上 右 下 左 的顺序添加内边距的

当然 多值也不一定是4个值 

4个值的时候是上右下左

3个值的时候是上  左右 下

2个值的时候是 上下  左右

1个值的时候就是上下左右了

也许我们可以这样去记  按照上右下左的顺序赋值  一旦没有找到数字  那我的边距就和对面的边距一样

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            height: 200px;
            width:200px;
            background-color: aqua;
            /* 外边距 */
            padding: 30px;
            /* 内边距 */
            margin: 30px;
            /* 边框 */

            /* 边框是复合属性  大小 类型 颜色 */
            /* 一共有三种类型 实现虚线和点线 */
            /* 实线solid */
            border: 1px solid #000;
            /* 虚线dashed */
            border: 2px dashed green;
            /* 点线dotted */
            border: 3px dotted blueviolet;

            /* 也可以单独设置某一个位置的边框属性 */
            /* top 上 buttom下 left左 right右 */
            border-top: 2px solid red;
            border-bottom: 3px dashed black;
            border-left: 4px dotted rgb(136, 82, 82);
            border-right: 4px solid pink;
            

            /* padding 内边距的多值写法 */
            padding-top: 12px;
            padding-right: 20px;
            padding-bottom: 20px;
            padding-left: 60px;


            /* padding复合写法 */
            /* padding: 0px 50px 80px 120px; */
            /* 三个值的时候是上  左右 下 */
            /* padding: 0px 50px 80px; */
            /* 两个值的时候 上下  左右 */
            padding: 0px 50px;


        
        }
    </style>
</head>
<body>
    <div>
        123
    </div>
</body>
</html>

 4.盒子大小

盒子的大小计算其实是用  我们设置的width 和 hight  + padding内边距  +border边框 的宽度

但实际我们想要盒子的大小就是我们设置的宽高 

那如何解决这个问题呢  

加上 box-sizing: border-box;  就可以解决这个问题  加上之后浏览器会自动的帮我们减掉多余的像素  

这才是我们想要的盒子

附上完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            height: 200px;
            width:200px;
            background-color: aqua;
            /* 外边距 */
            padding: 30px;
            /* 内边距 */
            margin: 30px;
            /* 边框 */

            /* 边框是复合属性  大小 类型 颜色 */
            /* 一共有三种类型 实现虚线和点线 */
            /* 实线solid */
            border: 1px solid #000;
            /* 虚线dashed */
            border: 2px dashed green;
            /* 点线dotted */
            border: 3px dotted blueviolet;

            /* 也可以单独设置某一个位置的边框属性 */
            /* top 上 buttom下 left左 right右 */
            border-top: 2px solid red;
            border-bottom: 3px dashed black;
            border-left: 4px dotted rgb(136, 82, 82);
            border-right: 4px solid pink;
            

            /* padding 内边距的多值写法 */
            padding-top: 12px;
            padding-right: 20px;
            padding-bottom: 20px;
            padding-left: 60px;


            /* padding复合写法 */
            /* padding: 0px 50px 80px 120px; */
            /* 三个值的时候是上  左右 下 */
            /* padding: 0px 50px 80px; */
            /* 两个值的时候 上下  左右 */
            padding: 0px 50px;

            box-sizing: border-box;
        
        }
    </style>
</head>
<body>
    <div>
        123
    </div>
</body>
</html>

 

qq_55555550
关注
  • 4
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html5盒子模型作业,HTML5盒子模型。
weixin_34526152的博客
06-05 1989
盒子模型。盒子由 margin、border、padding、content 四部分组成。margin ：外边距border：边框padding：内边距 (内容与边框的距离)content：内容* {margin: 0;padding: 0;}div {/*设置背景颜色*/background-color: blue;/*设置宽高*/width: 250px;height: 250px;/*设置外...
HTML5网页设计样式-盒子模型练习
m0_66168318的博客
04-07 1786
题目：如何让个200x200像素的盒子，在一个400x400的盒子里面水平居中，垂直居中。 解法：
html5盒子模型
qq_50437196的博客
02-26 1422
content-box：盒子的实际宽度和高度仅应用于元素内容，不包括内边距和边框。制作上半圆或下半圆时，元素的宽度是高度的2倍，而且圆角半径为元素的高度值。制作左半圆或右半圆时，元素的高度是宽度的2倍，而且圆角半径为元素的宽度值。border-box：盒子的实际高度和宽度包括元素内容、边框和内边距。利用border-radius属性制作扇形遵循“三同，一不同”原则。圆角的半径为元素宽度的一半，或者直接设置圆角半径值为50%“三同”是元素宽度、高度、圆角半径相同。元素的宽度和高度必须相同。
前端开发_HTML5_盒子模型
u013185175的博客
12-16 4738
盒子模型 1、引入 盒子模型是CSS中一个重要的概念，早在CSS的诞生之处便有这一个概念了，对于网页中的大部分对象，实际呈现就是一个盒子形状对象，即是一个块对象，每一个盒子都存在着四个东西，即:边框(border)、边界(margin)、填充(padding)、内容(content)。这四个内容我们在之前的学习中是介绍过的。那么在学习的过程中我们还举例了现实生活中的快递盒子便于大家的理解。 2、盒子模型示意图 3、盒子的大小确定 我们在html页面上写一个标签元素，发现这一个这一个...
html盒子模型的概念,HTML5学习之盒子模型概念分析
weixin_30679547的博客
06-05 1393
盒子模型是html+css中最核心的基础知识，理解了这个重要的概念才能更好的排版，进行页面布局。(1)盒模型的概念：CSS盒子模型也叫做框模型，具备内容(content)、填充(padding)、边框(border)、边界(margin)这些属性。在CSS中，每一个元素都被视为一个框，而每个框都有三个属性：border:元素的边框(可能不可见)，用于将框的边缘与其他框分开;margin：外边距，表...
HTML5中盒子模型重点总结
热门推荐
妖精小狗的博客
08-23 2万+
什么是盒子模型？ 盒子模型就是布局网页的一种手段包括边框（border）、外边距（margin）、内边距（padding）、网页元素（content）、宽（width）、高（height）等元素。   边框border： 1. 边框颜色：border-color： 属性 说明 示例 border-top-color...
HTML—盒子模型制作
YWQ13447969的博客
04-23 1848
大学生HTML练习之盒子模型制作
HTML盒子模型
y516369的博客
08-04 1421
HTML盒子模型
html盒子模型
Hatsune_1的博客
10-12 3696
盒子模型
Html盒子模型
qq_46534049的博客
10-12 854
3.边框：border有三种，border-width：设置宽度。border—colocr:设置颜色。border-style：设置样式。设置上边框 border-right 设置右边框 border-bottom 设置下边框。设置颜色，样式，大小，后面写一个是全部设置，设置两个就是上下是一个。2.内容区：是所有的子元素和文本内容都在里面，可以设置宽高。border-left 设置左边框。1.盒子是由内容区，边框，内边距，外边距组成。设置border：可以三种一起设置不区分前后。
HTML5&CSS3网页制作：盒子模型概述.pptx
05-31
总结来说，掌握HTML5的`<div>`标记和CSS3的盒子模型是网页制作的基本功。通过深入学习这些概念，开发者能够更好地控制网页元素的外观和位置，实现精细化的页面设计。无论是初学者还是经验丰富的开发者，都需要熟练...
CSS盒子模型的应用
08-22
CSS盒子模型，也称为盒状模型，将每个HTML元素视为一个矩形的“盒子”，包括四个部分：内容区域（content）、内边距（padding）、边框（border）和外边距（margin）。这四个部分共同决定了元素的实际尺寸和位置。 -...
相对定位盒子模型.html
05-13
相对定位的方法制作页面布局
HTML5音乐播放器界面特效
06-24
HTML5音乐播放器界面特效是现代网页设计中的一个重要组成部分，特别是在移动设备上，它提供了丰富的用户体验，让用户在浏览网页的同时享受音乐。这个播放器不仅具备基本的播放、暂停功能，而且还实现了进度条的实时...
CSS 理解盒子模型
09-25
1. **内容(content)**: 这是盒模型的核心部分，它包含了元素的实际内容，如文本、图像或其他HTML元素。内容区域的宽度和高度可以通过CSS的`width`和`height`属性来设置。如果未指定宽度和高度，内容区域将根据其内容...
Ajax是什么？如何在HTML5中使用Ajax？
m0_70066267的博客
07-16 1955
Ajax，全称Asynchronous Javascript And XML（异步JavaScript和XML），是一种创建交互式网页应用的网页开发技术。它允许网页在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容。这种技术极大地提升了用户体验，减少了数据传输量，并节省了网络带宽。Ajax并非一种新的编程语言，而是一种基于现有标准的技术，主要依赖于JavaScript和XMLHttpRequest对象来实现。：这是Ajax技术的核心，用于与服务器进行异步通信。
html5——CSS列表样式属性
jiuyuexixi的博客
07-16 222
html5——CSS列表样式属性
深入HTML5：探索新特性与实战应用
最新发布
2301_79375313的博客
07-16 373
随着Web技术的不断发展，HTML5作为HTML的最新版本，为网页开发带来了许多革命性的新特性和改进。它不仅增强了网页的表现力和互动性，还极大地丰富了网页的功能和用户体验。本文将带你深入了解HTML5的新特性，并探讨其在实战中的应用。
理解HTML5盒子模型与CSS3布局
"HTML5&CSS3网页制作：盒子模型概述" HTML5和CSS3是现代网页制作的基础，其中盒子模型是理解网页布局的关键概念。盒子模型（Box Model）是一种将HTML元素视为矩形盒子的思维模式，它描述了元素如何占据空间以及与...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值