html/css——盒模型

一、盒模型
把html网页中的所有标签都当作一个盒子,通过盒子的内容(width宽、height高)、内边距(padding)、边框(border)、外边距(margin),来给每个盒子设置特定的样式属性。
在这里插入图片描述

1、盒模型的描述:
width和height:内容的宽度、高度 ( 指的是盒子的空间 )。
padding:内边距。
border:边框。
margin:外边距。
2、盒子的内容:
指盒子不算边框 边距的 空间 就是盒子的内容,用width、height来表示。
3、内边距 padding
a、使用方法一:
内边距padding 可以设置一个或者多个值 这种属性我们成为是复合属性
在这里插入图片描述
b、使用方法二:
四个方向的内边距可以单独设置
padding-left: 左边距
padding-right: 右边距
padding-top: 上边距
padding-bottom: 下边距
4、边框 border:
a、边框 border 为复合属性
border: red solid 20px;代表四个方向的边框都相同。
b、可以使用以下复合属性对边框进行设置:
border-left:red solid 20px; 左边框
border-right:red solid 20px; 右边框
border-top:red solid 20px; 上边框
border-bottom:red solid 20px; 下边框
c、边框border 以及四个方向的border-left border-top border-right border-bottom 都需要设置三个值 顺序 代表边框的 宽度 样式 颜色
每个方向单独可以设置
border-width:20px; 一个值 四个边的宽度
border-style:solid; 一个值 四个边的样式 实线 、虚线
border-color:#333; 一个值 四个边的颜色
在这里插入图片描述
可以设置不同方向的不同 样式 宽度 颜色
在这里插入图片描述
e、border-sytle属性常用取值:
none:定义无边框。
solid:定义实线。
dotted:定义点状边框。在大多数浏览器中呈现为实线。
dashed:定义虚线。在大多数浏览器中呈现为实线。
inherit:规定应该从父元素继承边框样式。
5、外边距 margin
在这里插入图片描述
与内边距padding类似,可参照。
二、盒模型的使用总结
A、标签自带的盒子模型:
1、 浏览器默认的margin值为8px!
2、 h1~h6标签 自带外边距
3、 p段落标签 自带一个 字体的 外边距
4、 button input 自带边框 内边距
5、 ul,ol,li dl,dt,dd,自带 内边距 外边距
B、盒子的大小
盒子的大小指的是盒子的宽度和高度。大多数容易将宽度和高度 误解为width和height属性,然而默认情况下width和height属性只是设置content(内容)部分的宽和高。盒子真正的宽和高按下面公式计算:
盒子的宽度 = 内容宽度 + 左填充 + 右填充 + 左边框 + 右边框 + 左边距 + 右边距
盒子的宽度 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
盒子的高度 = 内容高度 + 上填充 + 下填充 + 上边框 + 下边框 + 上边距 + 下边距
盒子的高度 = height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom
三、盒模型练习
1、编写一个三角形:

<div class="box"></div>
.box{
	width:0px;
	height:0px;
	border:50px solid green;
	border-top-color:transparent;
	border-left-color:transparent;
	border-right-color:transparent;
}

在这里插入图片描述
2、六边形相框

		<div class="box">
			<div class="box-1"></div>
			<div class="box-2"></div>
			<div class="box-3"></div>
		</div>
			.box-1,.box-3{
				margin:0 auto;
				width:0;
				height:0;
				border:100px solid white;
				border-top:50px solid yellow;
				border-bottom:50px solid yellow;

			}
			.box-1{
				border-top-color:white;
				border-bottom-color:transparent;
			}
			.box-3{
				border-bottom-color:white;
				border-top-color:transparent;
			}
			.box-2{
				width:200px;
				height:130px;
				background-color:transparent;
				margin:0 auto;
			}
			.box{
				width:200px;
				height:300px;
				background-image:url('img/h.jpg')
			
			}

在这里插入图片描述
3、心形

		<div class="box">
			<div class="box1"></div>
			<div class="box2"></div>
			<div class="box3"></div>
			<div class="box4"></div>
		</div>
			.box{
				width:400px;
				height:800px;
				margin:0 auto;
			}
			.box1,.box2,.box4 {
				width:0;
				height:0;
			}
			.box1,.box2{
				border:100px solid white;
				border-top:50px solid white;
				border-bottom:50px solid red;
				float:left;
			}
			.box3{
				width:400px;
				height:100px;
				background-color:red;
				float:left;
			}
			.box4{
				border:200px solid white;
				float:left;
				border-top:200px solid red;
			}

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值