html CSS盒子模型

最新推荐文章于 2024-04-17 13:35:42 发布
最新推荐文章于 2024-04-17 13:35:42 发布
阅读量1.1k 收藏 7
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/guoqingru0311/article/details/118568884
版权

CSS盒子模型

1、盒子模型解释：

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型例子</title>
    <style type="text/css">
        .box0{
            background-color: goldenrod;
            width: 140px;
            height: 140px;
            color:black;
            border: black 10px solid;
            padding: 20px ;
        }

    </style>
</head>
<body>

    <div class="box0">盒子里面的文字内容，举例边框有一定的举例</div>

</body>
</html>

显示效果如下：
在这里插入图片描述

2、盒模型的实际尺寸：

按照下面代码制作页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型练习</title>
    <style type="text/css">
        .box01, .box02, .box03 {
            width: 50px;
            height: 50px;
            background-color: #f0ad4e;

        }

        .box02,.box03{
            margin-top: 10px;
            border:50px black solid;
        }

        .box03{
            padding: 50px;
        }
    </style>
</head>
<body>
    <div class="box01">1</div>
    <div class="box02">2</div>
    <div class="box03">3</div>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型新闻标签练习</title>
    <style type="text/css">
        .box1{
            width: 400px;
            height: 35px;
            font-size: 20px;
            color: #333;
            font-family:"Microsoft YaHei UI";
            /*font-weight: bolder;*/
            text-indent: 20px;  /*设置首行缩进一个字符*/
            border-top: 1px solid #f0ad4e;
            border-bottom: 3px solid #666000;
            padding-top: 15px;
            line-height: 20px;  /*设置行高，使其不会上下产生间距*/
        }
    </style>
</head>
<body>
    <h3 class="box1">新闻列表</h3>
</body>
</html>

显示效果如下所示：
在这里插入图片描述

郭庆汝
关注
  • 2
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS 盒子模型
12-14
CSS 盒子模型 CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子，在CSS中，”box model”这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 下面的图片说明了盒子模型(Box Model)： 不同部分的说明： Margin(外边距) – 清除边框外的区域，外边距是透明的。 Border(边框) – 围绕在内边距和内容外的边框。 Padding(内边距) – 清除内容周围的区域，内边距是透明的。 Content(内容) –
CSS盒子模型是什么
01-19
一、什么是CSS？ CSS（Cascading Style Sheet）：层叠样式表是将网页的内容与样式进行分离的一种语言，也就是在aspx或html中设计网页的内容，在CSS中设置网页的样式等。 二、什么是CSS盒子模型？     网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)，CSS盒子模型都具备这些属性。这些属性和我们日常生活中盒子的属性是一样一样的。内容就是盒子里面装的东西；而填充就是怕盒子里的东西损坏而添加的抗震材料；边框就是指盒子本身了；至于边界则说明盒子之间要留一定的空隙，保持通风。 三、两种盒子模型 1、标准盒
CSS基础：盒子模型详解
最新发布
u013179804的博客
04-17 1332
盒模型时，也叫"框模型"，指的是 CSS 中元素的布局方式和尺寸计算规则。盒模型定义了一个元素在页面布局中所占的空间，包括了元素的内容、内边距、边框和外边距，没错，而这些，正是我们前几篇文所提到的。CSS 基础：border 的 3 个基础属性和简写方法CSS基础：margin属性4种值类型，4个写法规则详解CSS基础：最详细 padding的 4 种用法解析CSS基础：width，height尺寸属性详解。
CSS盒子模型的应用
08-22
CSS盒子模型的应用
css盒子模型
08-22
通过这个css盒子模型的实战，更好的理解css盒子模型
用html语言定义盒子类,CSS3盒子模型
weixin_36138462的博客
05-31 445
web前端必须了解的CSS3盒子模型1、需要了解的属性以及属性值display:box或者display:inline-boxbox-orient:horizontal | vertical (水平 垂直) 定义盒模型的布局方向box-direction:normal reverse(正序 反序) 元素排列顺序box-ordinal-group:number(数值) 设置元素具体位置2、示例源...
HTML---盒模型
m0_51651340的博客
04-13 6676
HTML---盒模型
HTML-div盒子模型
主营前端方向，技术栈是vue
11-09 4248
div盒子模型(边框的border-width宽度，border-color颜色，border-style样式，上右下左四个边框以及简写、内联元素盒子)
HTML 盒子模型
m0_65066169的博客
10-07 2833
这个就是调节盒子的功能,你也可以内边距的一些属性方向来自由添加,一定要多动手。值是变的,根据自己的需要,自由添加,根据需要的方向,多动手。根据我写的代码多动手,加油!
HTML----盒子模型
xry12354的博客
04-08 2857
所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。
html盒子模型
Hatsune_1的博客
10-12 3475
盒子模型
看完不迷糊的 CSS 盒子模型介绍
01-18
网页设计中常听的属性名：内容(content)、内边距(padding)、边框(border)、外边距(margin)， CSS盒子模型都具备这些属性。这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模型。CSS...
html&CSS-----盒模型
m0_73633088的博客
06-06 1853
详细介绍html&CSS中的盒模型的相关用法包括标准盒模型和怪异盒模型，大家进来看看吧！！！
7-盒子模型
w_45678910的博客
12-21 779
盒子模型 盒子模型就是在HTML中盛装元素内容的容器。 每个盒子模型都由元素的内容（content）、内边距（padding）、边框（border） 和 外边距（ margin） 组成。 div标记 <div>标记是一个块容器标记。 可以将网页分割为独立的部分，实现网页的规划和布局。 大多数HTML标记都可以嵌套在div标记中，div中还可以嵌套多层div标记。 div可以替代大多数的块级文本标记。 盒子的宽和高 盒子的总宽度=width+左右内边距之和+左右边框宽度之和+左
Web实现：CSS盒模型实例代码
jasmyn518的博客
01-16 5443
盒模型给矩形设置边框线： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>案例</title> <style> .box{ /*设置矩形的宽*/ width:300px; /*设置矩形的高*/ height:150px; /*设置矩形的背景颜色*/ backgrou
Web基础：CSS的常规布局———盒子模型
m0_73058235的博客
04-19 2194
网页布局一般通过栏 列 行等组合来实现布局，现代浏览器都有两个模式：怪异模式和标准模式，在标准模式下，border padding width height都是各自独立的区域一般在没有定义边框的情况下，中间的栏目可以实现并列显示，但当他们超出所定义边框时，由于总行度超过了所设定，就会出现错行显示，为避免这种情况发生，我们通过事先设定好各区域所需大小，从而解决此问题，下面我以最常见的网页布局模式进行演示：上述就是我们在预览浏览器时最常看到的布局模式，源代码如下： 上述布局我们很容易发现，在网页的每一个区域
html中的css——盒子模型
qq_49032349的博客
06-03 428
简介 在html页面中，每一个元素都是一个规则的矩形，因此每一个元素都可以由一个盒子模型来表示，盒子模型有四个区域组成，如下： 最里面是内容区域（content box），可以将内容填充在本区域。 padding box（内边距区域）：表示元素中的内容的各个方向，也就是上下左右到边框border的距离 border box（边框区域）：...
【HTML+CSS】弹性盒子
LuWeien的博客
12-05 2115
box-sizing: content-box padding和border不会撑大盒子 元素的总宽度=width+左右的margin width=width+左右的padding+左右的border 元素的总高度=height+上下的margin height=height+上下的padding+上下的border 弹性盒子 弹性盒子是什么？ 是一种布局方式 弹性盒子元素的大小 排版 顺序都受到父元素的影响和控制 灵活控制子元素在父元素中水平垂直对齐方式 给一个元素设置了display
HTML——盒模型
热门推荐
weixin_64804275的博客
04-12 1万+
盒模型
css标准盒子模型网页代码
10-11
这是一个示例的CSS标准盒子模型的网页代码： ``` <!DOCTYPE html> <html> <head> <title>CSS Box Model Example</title> <style> .box { width: 200px; height: 100px; border: 2px solid black; padding: 20px; margin: 50px; } </style> </head> <body> <div class="box"> This is an example box. </div> </body> </html> ``` 在这个例子中，我们定义了一个类名为“box”的div元素，并给它设置了宽度、高度、边框、内边距和外边距。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值