盒子模型案例

最新推荐文章于 2024-04-18 14:26:55 发布
最新推荐文章于 2024-04-18 14:26:55 发布
阅读量731 收藏 3
点赞数
分类专栏： 寒假前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lbs311709000127/article/details/103995053
版权

效果图

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="{CHARSET}">
		<title></title>
		<style type="text/css">
			*{
				margin: 0 auto;
				font-family:"微软雅黑" ;
			}
			.course{
				width: 220px;
				background-color: #f2f4f6;
				border: 1px #ececec solid;
				
			}
			.list1{
				height: 150px;
				line-height: 150px;
				text-align: center;
				font-size: 20px;
				color: #fff;
				font-weight: bold;
				background-color: #040a10;
			}
			.list2{
				padding: 10px 5px 5px 5px;
				font-size: 14px;
				border-bottom: 1px #d9dde1 solid;
				margin: 0 15px;
				line-height: 1.5em;
			}
			span{
				font-size: 12px;
				color: #93999f;
			}
			.special{
				border-bottom: none;
			}
		</style>		
	</head>
	<body>
		<div class="course">
			<div class="list1">
				<p>前端课程排列</p>
			</div>
			<div class="list2">
				<p>HTML+CSS基础课程</p>
				<span>336699人在学</span>
			</div>
			<div class="list2">
				<p>HTML+CSS基础课程</p>
				<span>336699人在学</span>
			</div>
			<div class="list2 special">
				<p>HTML+CSS基础课程</p>
				<span>336699人在学</span>
			</div>
		</div>
	</body>
</html>

 

小青龙8085
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css--外边距的折叠
MondayCui的博客
09-20 171
垂直外边距的重叠（折叠） - 相邻的垂直方向外边距会发生重叠现象 - 兄弟元素 - 兄弟元素间的相邻垂直外边距会取两者之间的较大值（两者都是正值） - 特殊情况： 如果相邻的外边距一正一负，则取两者的和 如果相邻的外边距都是负值，则取两者中绝对值较大的
前端开发_HTML5_盒子模型
u013185175的博客
12-16 4737
盒子模型 1、引入 盒子模型是CSS中一个重要的概念，早在CSS的诞生之处便有这一个概念了，对于网页中的大部分对象，实际呈现就是一个盒子形状对象，即是一个块对象，每一个盒子都存在着四个东西，即:边框(border)、边界(margin)、填充(padding)、内容(content)。这四个内容我们在之前的学习中是介绍过的。那么在学习的过程中我们还举例了现实生活中的快递盒子便于大家的理解。 2、盒子模型示意图 3、盒子的大小确定 我们在html页面上写一个标签元素，发现这一个这一个...
【CSS3】一文搞懂盒子模型（知识点加案例），2024年最新腾讯 前端 面试
最新发布
m0_61549591的博客
04-18 337
另外，大推一个网上教程 现代 JavaScript 教程 ，文章深入浅出，很容易理解，上面的内容几乎都是重点，而且充分发挥了网上教程的时效性和资料链接。当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则。面试本质也是考试，面试题就起到很好的考纲作用。想要取得优秀的面试成绩，刷面试题是必须的，除非你样样精通。想要取得优秀的面试成绩，刷面试题是必须的，除非你样样精通。Padding(内边距) - 清除内容周围的区域，内边距是透明的。
css盒子模型及其实战案例（上），2024前端笔试真题，面试必会
m0_63174811的博客
03-18 673
所谓盒子模型：就是把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边框、外边距、内边距、和实际内容。同时注意：边框也会影响盒子大小，如果你需要宽高特定的盒子，则盒子的宽高属性是减去边框的像素的。盒子模型是我们网页布局中很重要的一块内容，今天阿牛就来总结一部分内容，各位小伙伴认真看哦，干货满满！注意：和border属性一样，padding属性也会撑大盒子大小,解决方法和border的一样。
【CSS3】一文搞懂盒子模型（知识点加案例）
qq_49900295的博客
02-08 3196
看透网页布局本质 行内元素比如文字类似牛奶，需要一个盒子把他们装起来，我们所学过的双标签都是一个盒子。有了盒子，我们就能任意的，自由的摆放位置了。 看透网页布局的本质：把网页元素比如文字图片等等，放入盒子里面，然后利用CSS摆放盒子的过程，就是网页布局。 比如我们打开小米的官网： 显而易见，他就是由一个个大小不一功能不同的盒子组成。 盒子模型组成 上面的图片说明了盒子模型(Box Model)： Margin(外边距) - 清除边框外的区域，外边距是透明的 Border(边框) - 围绕在内边距和内容外
盒子模型属性详解及案例
dengyao666的博客
03-08 1万+
盒子模型所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。盒子模型边框（border）属性：border-width|border-style|border-color         边框样式如下：边框有四条边，单独设置某条边（top|righ...
CSS+DIV-盒子模型示例.zip
11-03
**CSS+DIV 盒子模型详解** 在网页设计与开发中，CSS（层叠样式表）和DIV元素是构建布局的基础。"CSS+DIV-盒子模型示例.zip"中的内容显然是为了帮助理解CSS中的盒子模型及其应用。盒子模型是CSS布局的核心概念，它将...
Css盒子模型入门指导
12-17
CSS 盒子模型是网页设计中的核心概念，尤其对于使用CSS进行布局的初学者而言，理解和掌握盒子模型至关重要。在传统的HTML布局中，表格被广泛用于网页内容的排版，但随着网页技术的发展，CSS（层叠样式表）的引入带来...
CSS盒子模型教程PPT课件.pptx
10-10
CSS 盒子模型教程 CSS 盒子模型是指浏览器对网页中的各个元素...盒子模型的案例包括调整网页中的对齐方式、理解盒子的各个属性、理解空格的影响、理解 body 标记的 margin 属性、如何利用 CSS 控制页面特定的元素等。
06 盒子模型.zip
11-23
本资料包"06 盒子模型.zip"可能包含相关的教程、案例研究或者练习，旨在帮助你深入理解盒子模型的工作原理。 盒子模型主要包括以下几个部分： 1. **内容（Content）**：这是元素实际显示的数据，如文本、图片或...
CSS补充案例之第四章盒子模型.docx
11-19
【CSS 盒子模型】 CSS 盒子模型是网页布局中的核心概念，它定义了元素如何占据空间并与其他元素交互。在本案例中，我们主要关注边框（border）、内边距（padding）和背景颜色（background-color）的使用。 案例4-1...
H5div盒子模型例子
04-27
H5div盒子模型例子H5div盒子模型例子H5div盒子模型例子H5div盒子模型例子
Html之盒模型
04-30
NULL 博文链接：https://lbovinl.iteye.com/blog/2435565
盒子模型一些小案例
qq_40501188的博客
11-06 1604
快报模块 注意：新知识点：去掉li前面的项目符号（小圆点） 语法： /*页面中所有的li*/ li { /*去掉li前面的项目符号（小圆点）*/ list-style: none; } 新闻快报 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>新闻快报</title> <style> /*注意：首先要清除整
css盒子模型及其实战案例（上）
阿牛的博客
01-27 3409
盒子模型是我们网页布局中很重要的一块内容，今天阿牛就来总结一部分内容，各位小伙伴认真看哦，干货满满！！！
CSS3盒子模型
heart000_1
04-15 613
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS盒子模型</title> </head> <body> 盒子模型具有内边距、边框、外边距、宽和高这些基本属性, 但不要求每个属性都设置这些属性. 一、盒子模型的相关属性 1.边框属性 包括边框样式border-style、边框宽度border-width、边框
盒子模型的实例
wangqd97的博客
07-30 1746
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;盒子模型的应用&lt;/title&gt; &lt;link rel="stylesheet" type="te
HTML5中盒子模型重点总结
妖精小狗的博客
08-23 2万+
什么是盒子模型？ 盒子模型就是布局网页的一种手段包括边框（border）、外边距（margin）、内边距（padding）、网页元素（content）、宽（width）、高（height）等元素。   边框border： 1. 边框颜色：border-color： 属性 说明 示例 border-top-color...
html5 盒子模型案例
weixin_30647065的博客
05-12 1976
CSS 文件 /* ＊通配符 对所有的标签进行设置*/*{ margin: 0px; padding: 0px; }.top{ width: 100%; height: 50px; background-color: black; }.top_content{ width: 75%; height: 50px; margin:...
一个简易的html盒子模型
热门推荐
ahui610324的博客
05-28 2万+
一.盒子的基本概念所谓盒子模型，其实就是在网页设计中进行CSS样式设置所使用的一种思维模型。使用盒子模型主要是为了便于控制网页中的元素。在盒子模型中，一个页面就是有大大小小许多盒子通过不同的排列方式堆积而成，这些盒子相互之间彼此影响。因此，我们既要理解每个盒子内部的机构，也需要理解盒子之间的关系以及相互的影响。二.盒子模型的组成（以HTML盒子为例）html中的每一个标签都是一个盒子，并且这个盒子...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值