HTML盒子模型

已于 2024-09-11 09:39:35 修改
阅读量177 收藏 1
点赞数 8
分类专栏： HTML 文章标签： 前端 html5 css3 html css
于 2024-09-11 09:38:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_63233901/article/details/142128307
版权

盒子模型

总大小=内容高度+padding+border+margin

border

border-color（设置边框颜色）

border-width(设置边框宽度）

border-style(设置边框样式，一般只用两种，实线（solid)和虚线(dashed)

可以简写border(颜色 宽度 样式)不分前后

margin

margin-top上外边距

margin-bottom下外边距

margin-left左外边距

margin-right右外边距

margin(上 右 下 左)可以简写

margin(0px auto)可以使块级元素居中

*{

padding:" 0";

margin:" 0";

}可以使缝隙为0

padding

padding-left左内边距

padding-right右内边距

padding-top上内边距

padding-bottom下内边距

padding(上 右 下 左）简写

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<link rel="stylesheet" href="css/index.css" />
	<body>
		<div class="dh">
			<div class="title"><img src="img/title_icon.gif"/>课程导航</div>
			<ul>
				<li>ACCP 软件工程师</li>
				<li>BTEST 软件测试工程师</li>
				<li>BENET 网络工程师</li>
				<li>JBNS 网站工程师</li>
				<li>ACCP 启蒙星</li>
				<li>ANDROID 软件工程师</li>
				<li>JAVA 软件工程师</li>
				<li>NET 软件工程师</li>
				<li>网络营销</li>
			</ul>
	</body>
</html>

.dh{
	border:#B0CFEF 2px solid ;
	height: 220px;
	width: 200px;
	margin:0 auto ;
	
}
 ul li{
	list-style: none;
	line-height:20px ;
	background-image: url(../img/submenu.gif);
	border-bottom:#B0CFEF 1px solid ;
	padding-left: 5px;
	background-size: 100% 100%;
	background-repeat:no-repeat ;
}

h5{
	color:#1F386E ;
}
.title{
	height:30px ;
	line-height: 30px;
	background-color: #F5F9FC;
	font-weight:bold ;
	color:#1F427A ;
	padding-left: 3px;
	border-bottom: #B0CFEF 1px solid;
}
img{
	vertical-align: middle;
}
*{
	padding: 0px;
	margin: 0px;
}

box-sizing(盒子模型）

box-sizing：content-box | border-box | inherit;

主要使用的是（border-box),使内容被框起来，缩小内容，使原本的框大小不变

border-radius(可以使四个角变成圆形，设置圆角半径）

border-radius: 20px 10px 50px 30px;（上 右 下 左）

盒子阴影（box-shadow)

box-shadow:inset x-offset y-offset blur-radius color;

快乐就好ya
关注
  • 8
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html 盒子模型添加图片,[HTML/CSS]盒子模型，块级元素和行内元素
weixin_39672443的博客
06-07 5809
目录概述在div+css中，了解块级元素和行内元素还是非常有必要的，比如：对行内元素使用width属性就会失效。虽然自己不是做前端的，但是，在项目中，曾经也弄过从前端布局，也吃过这方面的亏。今天，群里有朋友问起这个，就趁着学习一下，也算是查漏补缺吧，虽然，谈不上精通，但是了解，还是很有必要的。盒子模型css盒子模型分为两种，一种是遵循w3c标准的标准盒子模型，另外一种就是IE盒子模型。标准盒子模型...
html盒子模型
Hatsune_1的博客
10-12 3822
盒子模型
Html盒子模型
qq_46534049的博客
10-12 884
3.边框：border有三种，border-width：设置宽度。border—colocr:设置颜色。border-style：设置样式。设置上边框 border-right 设置右边框 border-bottom 设置下边框。设置颜色，样式，大小，后面写一个是全部设置，设置两个就是上下是一个。2.内容区：是所有的子元素和文本内容都在里面，可以设置宽高。border-left 设置左边框。1.盒子是由内容区，边框，内边距，外边距组成。设置border：可以三种一起设置不区分前后。
HTML 盒子模型
m0_65066169的博客
10-07 2960
这个就是调节盒子的功能,你也可以内边距的一些属性方向来自由添加,一定要多动手。值是变的,根据自己的需要,自由添加,根据需要的方向,多动手。根据我写的代码多动手,加油!
html 盒子模型
cloarl的博客
02-15 460
div盒子模型
html盒子模型并排
qq_43201652的博客
08-05 8234
html多个盒子并排显示
HTML盒子模型的布局
m0_72975897的博客
08-05 5084
**垂直和水平方布局**外边距重叠
html盒子模型的实例,html盒模型的示例分析
weixin_34233974的博客
06-10 1899
html盒模型的示例分析发布时间：2021-06-04 12:04:12来源：亿速云阅读：61作者：小新小编给大家分享一下html盒模型的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！1.1. 盒的内容区的尺寸— content width和content height —取决于几个因素：--生成该盒的元素是否设...
HTML5盒子模型
qq_55555550的博客
06-16 530
就可以解决这个问题 加上之后浏览器会自动的帮我们减掉多余的像素。盒子的大小计算其实是用 我们设置的width 和 hight + padding内边距 +border边框 的宽度。内边距里面的才是内容 外边距是和其他标签或者盒子的距离 可以加边框border来让距离更加清楚。也许我们可以这样去记 按照上右下左的顺序赋值 一旦没有找到数字 那我的边距就和对面的边距一样。和边框的写法相同 但是边距有一个特殊的复合写法 是按照 上 右 下 左 的顺序添加内边距的。4个值的时候是上右下左。
HTML盒子模型.pptx
07-30
HTML盒子模型 HTML盒子模型是网页布局的基础结构，包括边框、内边距、背景图、背景色和外边距五个部分。盒子模型的基本属性包括边框、内边距和外边距三个方面。 一、边框（border） 边框是盒子模型的外壳本身的...
HTML盒子模型PPT课件.ppt
07-30
HTML盒子模型PPT课件 HTML盒子模型是网页布局的基础，是构建网页的基本结构。盒子模型由内容区域、内边距、边框和外边距四个部分组成。盒子模型的基本属性包括border、padding和margin三个部分。 1. 盒子模型的...
HTML盒子模型PPT教案.pptx
10-20
HTML 盒子模型教案 HTML 盒子模型是网页布局的基础，它将网页元素看作是一个盒子，盒子由边框（border）、内边距（padding）、背景图（background）和外边距（margin）四个部分组成。下面将详细解释这些属性的概念...
Vue2 中对数组进行操作时需要注意什么
m0_73882020的博客
09-06 542
在 Vue 2 中，对数组进行操作时，关键是确保操作能够被 Vue 的响应式系统检测到。使用 Vue 的响应式 API，如Vue.set或this.$set，可以确保数组的变化会被正确地反映到视图中。此外，避免直接修改数组的length属性或使用数组索引直接赋值，以确保视图的响应性。
TinyWebSever源码逐行注释(五)_ http_conn.cpp
qq_39969848的博客
09-09 786
根据状态转移,通过主从状态机封装了http连接类。其中,主状态机在内部调用从状态机,从状态机将处理状态和数据传给主状态机。http_conn.cpp利用一个主从状态机来处理客户端的htttp连接并生成相应的响应。Linux下C++轻量级Web服务器，助力初学者快速实践网络编程，搭建属于自己的服务器.
使用stripe进行在线支付、退款、订阅、取消订阅功能(uniapp+h5)
weixin_52479803的博客
09-05 729
使用stripe进行在线支付、退款、订阅、取消订阅功能(uniapp+h5)
el-popover弹框自定义位置
weixin_47218354的博客
09-05 369
【代码】el-popover弹框自定义位置。
前端文件预览，PDF，word，TXT
致未来的你。的博客
09-06 491
前端文件预览，PDF，word，TXT
2024伊语IM即时通讯源码/im商城系统/纯源码IM通讯系统安卓+IOS前端纯原生源码
最新发布
翎风世界
09-10 369
2.4 node安装wget "https://nodejs.org/dist/v12.18.3/node-v12.18.3-linux-x64.tar.xz"资料参考地址：https://www.1234f.com/sj/GitHub/qtym/20240910/677.html。源码下载地址：https://www.123pan.com/s/LA1bVv-5l5Vv。备用下载地址：http://pan.1234f.com:5212/s/5PrS4。api.xxx.com接口。im.xxx.com通讯。
html盒子模型排版
12-14
HTML盒子模型是指在HTML中，每个元素都被看作是一个矩形的盒子，这个盒子由四个部分组成：内容(content)、内边距(padding)、边框(border)和外边距(margin)。这些部分的大小和位置可以通过CSS来控制，从而实现网页的排版。 HTML盒子模型的排版可以通过以下步骤实现： 1. 确定HTML元素的盒子模型类型（box-sizing属性），默认为content-box。 2. 设置元素的宽度和高度，包括内容、内边距、边框和外边距。 3. 设置元素的内边距（padding）和外边距（margin）。 4. 设置元素的边框（border），包括边框的样式、宽度和颜色。 5. 设置元素的背景颜色和背景图片。 下面是一个HTML盒子模型排版的例子： ```html <!DOCTYPE html> <html> <head> <title>HTML盒子模型排版</title> <style> .box { width: 200px; height: 200px; padding: 20px; margin: 20px; border: 1px solid black; background-color: #f2f2f2; } </style> </head> <body> <div class="box"> <p>这是一个盒子模型</p> </div> </body> </html> ``` 在这个例子中，我们创建了一个200x200像素的盒子，设置了20像素的内边距和外边距，1像素的边框和背景颜色。在盒子中添加了一个段落元素，作为盒子的内容。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值