【海码学院】web前端基础入门CSS之盒子模型课堂学习笔记

励志的程序员

于 2019-07-16 20:27:21 发布

阅读量119

点赞数 1

分类专栏： HTML CSS 文章标签： HTML CSS

本文链接：https://blog.csdn.net/weixin_45282338/article/details/96173795

版权

HTML 同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

CSS

12 篇文章 0 订阅

订阅专栏

一、标准盒子模型

1、盒子模型

所有HTML元素可以看作盒子

盒子周围的HTML元素：

content：内容

padding：内边距

margin：外边距

border：边框

一个元素的大小 = content+padding+border

一个元素在网页中占据位置的大小 = content+padding+border+margin

width 和 height属性规定了内容区大小

标签元素的大小会随着padding和border的大小而变化

<style>
	div{
		width: 300px;
		height: 300px;
		margin: 20px;
		padding: 10px;
		border: 5px solid red;
	}
</style>


<body>
	<div>content</div>
</body>

2、HTML元素默认样式

很多标签有自带margin和padding

*{margin：0；padding：0；}

①、margin

margin：值；四边

margin：值1 值2；上下左右

margin：值1 auto；上下水平居中

margin：值1 值2 值3；上左右下

margin：值1 值2 值3 值4；上右下左

<style>
	div{
		width: 100px;
		height: 100px;
		border: 1px solid red;
	}
	.div1{
		margin: 10px;
	}
	.div2{
		margin: 20px 10px;
	}
	.div3{
		margin: 10px auto;
	}
	.div4{
		margin: 15px 10px 20px;
	}
	.div5{
		margin: 10px 15px 20px 25px;
	}
</style>


<body>
	<div class="div1">content1</div>
	<div class="div2">content2</div>
	<div class="div3">content3</div>
	<div class="div4">content4</div>
	<div class="div5">content5</div>
</body>

margin-left / right / top / bottom 单边定义

<style>
	div{
		width: 100px;
		height: 100px;
		border: 1px solid red;
		margin-left: 30px;
	}			
</style>


<body>
	<div>content</div>
</body>

right 、top 、 bottom用法和left一样，就不一一举例了。

②、padding

padding：值；四边

padding：值1 值2；上下左右

padding：值1 值2 值3；上左右下

padding：值1 值2 值3 值4；上右下左

<style>
	div{
		width: 200px;
		height: 200px;
		border: 1px solid red;
	}
	.div1{
		padding: 50px;
	}
	.div2{
		padding: 30px 50px;
	}
	.div3{
		padding: 10px 30px 20px;
	}	
	.div4{
		padding: 80px 50px 50px 20px;
	}		
</style>


<body>
	<div class="div1">content1</div>
	<div class="div2">content2</div>
	<div class="div3">content3</div>
	<div class="div4">content4</div>
</body>

padding-left / right / top / bottom 单边定义

<style>
	div{
		width: 200px;
		height: 200px;
		border: 1px solid red;
		padding-right: 150px;
	}					
</style>


<body>
	<div>content</div>		
</body>

left 、top 、 bottom用法和right一样，就不一一举例了。

二、怪异盒子模型

1、标准盒子和怪异盒子区别

在标准模式下，一个块的宽度 = width + padding(左右) + border(左右) + margin(左右)
在怪异模式下，一个块的宽度 = width + margin(左右)
即
标准盒模型：width、height只包含content内容区
怪异盒模型：width、height包含content、padding、border

2、box-sizing

box-sizing：content-box；采用标准模式解析计算，向内压缩，也是默认模式；

box-sizing：border-box时；采用怪异模式解析计算，向外拓张；

<style>
    div{
		width: 200px;
		height: 200px;
		border: 1px solid red;
	}
	div .p1{
		width: 100%;
		height: 20px;
		border: 1px solid blue;
		padding: 5px;
		box-sizing: content-box;
	}
	div .p2{
		width: 100%;
		height: 20px;
		border: 1px solid blue;
		padding: 5px;
		box-sizing: border-box;
	}					
</style>


<body>
	<div>
		<p class="p1"></p>
		<p class="p2"></p>
	</div>		
</body>

更多基础内容，可关注本人博客，后续更精彩。

励志的程序员

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【海码学院】web前端基础入门CSS之盒子模型课堂学习笔记

一、标准盒子模型1、盒子模型所有HTML元素可以看作盒子盒子周围的HTML元素：content：内容padding：内边距margin：外边距border：边框一个元素的大小 = content+padding+border一个元素在网页中占据位置的大小 = content+padding+border+marginwidth 和 height属性规定了...
复制链接

扫一扫