前端CSS盒子模型

最新推荐文章于 2024-11-03 13:28:46 发布

~码中赤兔~

最新推荐文章于 2024-11-03 13:28:46 发布

阅读量104

点赞数

分类专栏： CSS基础文章标签： css html5 html

本文链接：https://blog.csdn.net/m0_56557880/article/details/120546888

版权

CSS基础专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.网页布局核心原理

盒子模型浮动定位

搭建框架

布局盒子(不同样式)

填充内容

2.盒子模型的组成部分

2.1border边框

2.1.1边框的使用

border: 2px solid blue;

上下左右

border-top: 3px solid red;

border-bottom: 4px solid green;

border-left: 5px solid black;

border-right: 6px solid yellow;

border里面的三个属性可以随意排序，不影响结果，无序

2.1.2边框的合并

{

border: 5px blue solid;

border-collapse: collapse;

}

边框不重复，不加的话，两个边框合并会变成10px

2.1.3边框的厚度影响盒子的大小

border会增加长度，宽度，影响盒子的大小

可以手动测量，删除部分长度，或者不测量边框

2.2padding内边距

2.2.1内边距的使用

padding: 20px;

上下左右

padding-top: 20px;

padding-bottom: 30px;

padding-left: 40px;

padding-right: 50px;

2.2.2padding影响盒子大小

padding会影响盒子的大小，可以设计的时候减去部分长度

2.2.3padding注意

当盒子未指定width属性，则padding不会撑开盒子左右

2.3margin外边距

2.3.1外边距的使用

margin: 20px;

上下左右

margin-top: 100px;

margin-bottom: 200px;

margin-left: 300px;

margin-right: 400px;

2.3.2居中

margin: 0 auto;整个盒子在水平中间

text-align: center; /**文字在中间*/

在行内/行内块元素水平居中时，不可以margin: 0 auto;

2.3.3父元素塌陷-外边距合并

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#one{
				background-color: yellow;
				width: 300px;
				height: 300px;
				margin-top: 100px;
				/*border: 5px solid black;*/解决办法1：添加边框，此时下移50px
				/*padding: 10px;*/解决办法2：添加内边距，此时下移60px
				/*overflow: hidden;*/解决办法3：溢出隐藏
			}
			#two{
				background-color: blue;
				width: 50px;
				height: 50px;
				margin-top: 50px;
			}
		</style>
	</head>
	<body>
		<div id="one">
			<div id="two"></div>
		</div>
	</body>
</html>