4 盒子模型

最新推荐文章于 2021-10-30 21:51:29 发布

丨Anna丨

最新推荐文章于 2021-10-30 21:51:29 发布

阅读量277

点赞数

分类专栏：前端重拾 # CSS 文章标签： css3

本文链接：https://blog.csdn.net/u014331138/article/details/108281371

版权

前端重拾同时被 2 个专栏收录

42 篇文章 0 订阅

订阅专栏

CSS

21 篇文章 0 订阅

订阅专栏

盒子模型

在网页中“一切皆是盒子”。CSS处理网页时，它认为每个元素都包含在一个不可见的盒子里。我们只需要将相应的盒子摆放到网页中相应的位置即可完成网页的布局。

1 盒子模型的组成

一个盒子我们会分成几个部分：
– 内容区(content)

（1）内容区指的是盒子中放置内容的区域，也就是元素中的文本内容，子元素都是存在于内容区中的。

（2）如果没有为元素设置内边距和边框，则内容区大小默认和盒子大小是一致的。

（3）通过width和height两个属性可以设置内容区的大小。 width和height属性只适用于块元素。
– 内边距(padding)

（1）顾名思义，内边距指的就是元素内容区与边框以内的空间。

（2）默认情况下width和height不包含padding的大小，元素的背景会延伸到内边距

（3）使用padding属性来设置元素的内边距。例如：padding:10px 20px 30px 40px；这样会设置元素的上、右、下、左四个方向的内边距。同时在css中还提供了padding-top、padding-right、padding-right、padding-bottom分别用来指定四个方向的内边距。

（4）内边距会影响可见区的大小

（5）当宽度的值是auto时，此时指定内边距不会影响可见框的大小，而是会自动修改宽度，已适应内边距。
– 边框(border)

（1）可以在元素周围创建边框，边框是元素可见框的最外部。

（2）可以使用border属性来设置盒子的边框：border:1px red solid;该样式分别指定了边框的宽度、颜色和样式。

（3）也可以使用border-top/left/right/bottom分别指定上右下左四个方向的边框。

（4）和padding一样，默认width和height并不包括边框的宽度。

（5）边框可以设置多种样式：none（没有边框）dotted（点线）dashed（虚线）solid（实线）double（双线）groove（槽线）ridge（脊线）inset（凹边）outset（凸边）
– 外边距(margin)

（1）外边距是元素边框与周围元素相距的空间。

（2）使用margin属性可以设置外边距,用法和padding类似，同样也提供了四个方向的margin-top/right/bottom/left.

（3）当将左右外边距设置为auto时，浏览器会将左右外边距设置为相等，所以这行代码margin:0 auto可以使元素居中。如果只指定左/右外边距为auto,则会将外边距设置为最大值。垂直方向外边距如果设置为auto,则外边距默认就是0；

2 垂直外边距的重叠

在网页中相邻的垂直方向的外边距会发生重叠。所谓的外边距重叠值兄弟元素之间的相邻外边距会取最大值而不是和。如果父子元素的垂直外边距相邻了，则子元素的外边距会设置给父元素

示例：

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			.box1{
				width: 100px;
				height: 100px;
				background-color: red;
				margin-bottom: 100px;
			}
			.box2{
				width: 100px;
				height: 100px;
				background-color: green;
				margin-top: 100px;
			}
		</style>
	</head>
	<body>
		<div>
			<div class="box1"></div>
			<div class="box2"></div>
		</div>
	</body>

效果：

示例：

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			.box1{
				width: 200px;
				height: 200px;
				background-color: red;
			}
			.box2{
				width: 100px;
				height: 100px;
				background-color: green;
				margin-top: 100px;
			}
		</style>
	</head>
	<body>
		<div class="box1">
			<div class="box2"></div>
		</div>
	</body>

效果：

简单的解决办法可以使用padding或border让其不重叠。由于padding和border会影响可见区大小，因此不是最优解决办法。具体解决办法后面继续介绍。

3 浏览器默认样式

浏览器为了在页面没有样式时，也有一个比较好的显示效果。浏览器默认给一些标签添加一些外边距。正常情况下我们是必须要使用的，所以在编写样式之前需要将浏览器设置默认的margin和padding去掉。

/**清除浏览器默认样式*/
* {
  margin: 0;
  padding: 0;
}

4 内联元素的盒模型

示例：

	<head>
		<meta charset="UTF-8">
		<title>内联元素的盒模型</title>
		<style type="text/css">
			span{
				background-color: #BBFFAA;
			}
			
			div{
				width: 800px;
				height: 100px;
				background-color: red;
			}
			
			.s1{
				/** 内联元素不能设置width和height*/
				width: 100px;
				height: 100px;
			}
			
			.s2{
				/* 内联元素可以设置水平方向的内边距*/
				padding-left: 20px;
				padding-right: 20px;
			}
			
			.s3{
				/* 内联元素可以设置垂直方向的内边距，但是不会影响页面的布局*/
				padding-top: 50px;
				padding-bottom: 50px;
			}
			
			.s4{
				/* 内联元素可以设置边框，与padding一样，水平方向会影响页面的布局，垂直方向不会*/
				border: 10px solid #0000FF;
			}
			
			.s5{
				/* 内联元素可以设置外边距，且水平方向相邻外边距不会发生重叠，而是求和*/
				margin-right: 20px;
			}
			.s6{
				margin-left: 20px;
			}
			.s7{
				/* 内联元素不支持垂直方向的外边距*/
				margin-top: 100px;
				margin-bottom: 100px;
			}
		</style>
	</head>
	<body>
		
		<span class="s1">我是一个span</span>
		<span class="s2">我是一个span</span>
		<span class="s3">我是一个span</span>
		<span class="s4">我是一个span</span>
		<span class="s5">我是一个span</span>
		<span class="s6">我是一个span</span>
		<span class="s7">我是一个span</span>
		<div></div>
	</body>

效果：

5 display和visibility

display:可以将一个行内元素变成块元素。通过display样式可以修改元素的类型。

可选值：

– block：设置元素为块元素
– inline：设置元素为行内元素
– inline-block：设置元素为行内块元素，使一个元素既有行内元素的特点，又有块元素的特点。（可以设置宽高，单不独占一行）
– none：隐藏元素（并且元素不会继续在网页中占用位置）

visibility：主要用于元素是否可见。和display不同，使用visibility隐藏一个元素，隐藏后其在文档中所占的位置会依然保持，不会被其他元素覆盖。

可选值：

–visible：可见的，默认值
– hidden：隐藏的

6 overflow

子元素默认存在于父元素内容区中，理论上讲子元素最大可以等于父元素内容区大小，如果子元素的大小超过了父元素内容区的大小，则超出的内容会在父元素以外的位置显示。超出的父元素的内容我们称之为溢出的内容。父元素默认将溢出的内容在内容区以外显示。通过overflow来控制内容溢出的情况。

可选值：

– visible：默认值，不会对元素做处理，溢出的内容会在父元素内容区以外显示。
– scroll：添加滚动条，该属性不管内容是否溢出都会添加水平和垂直方向滚动条
– auto：根据需要添加滚动条
– hidden：隐藏超出盒子的内容

7 文档流

文档流处在网页的最底层，它表示的是一个页面的位置。我们所创建的元素默认都处在文档流中。

元素在文档流中的特点：

块元素：

（1）在文档流中独占一行，块元素会自上向下排列

（2）块元素在文档流中，宽度默认是父元素的宽度；

（3）块元素在文档流中，高度默认是被撑开的高度。

内联元素：

（1）在文档流中自占自身的大小，默认会自左向右排列，如果一行中不足以容纳所有内联元素，则换到下一行继续自左向右排列。

（2）在文档流中，内联元素的宽度和高度默认都是被内容撑开的大小。

8 浮动

所谓浮动指的是使元素脱离原来的文本流，在父元素中浮动起来。

浮动使用float属性。

  可选值：
      – none：不浮动，默认值
      – left：向左浮动
      – right：向右浮动

（1）元素脱离文档流后，它下面的内容将立即向上移动。元素浮动以后，会尽量想页面的左上或右上浮动（具体浮动方向根据所选值判断），直到遇到父元素的边框或其他的浮动元素。

示例：

	<head>
		<meta charset="UTF-8">
		<title>浮动</title>
		<style type="text/css">
			
			.box1{
				width: 100px;
				height: 100px;
				background-color: red;
				float: right;
			}
			
			.box2{
				width: 100px;
				height: 100px;
				background-color: blue;
				float: right;
			}
			
			.box3{
				width: 100px;
				height: 100px;
				background-color: orange;
			}
			
			.box4{
				width: 100px;
				height: 100px;
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
		<div class="box3"></div>
		<div class="box4"></div>
	</body>

效果：

（2）如果浮动元素上面是一个没有浮动的块元素，则浮动元素不会超过没有浮动的块元素
示例：

	<head>
		<meta charset="UTF-8">
		<title>浮动</title>
		<style type="text/css">
			.box1{
				width: 100px;
				height: 100px;
				background-color: red;
			}
			.box2{
				width: 100px;
				height: 100px;
				background-color: blue;
				float: right;
			}
			.box3{
				width: 100px;
				height: 100px;
				background-color: orange;
			}
			.box4{
				width: 100px;
				height: 100px;
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		<div class="box1">box1</div>
		<div class="box2">box2</div>
		<div class="box3">box3</div>
		<div class="box4">box4</div>
	</body>

效果：

（3）如果一行不足以容纳所有浮动元素，则会自动换行

示例：

	<head>
		<meta charset="UTF-8">
		<title>浮动</title>
		<style type="text/css">
			
			.box1{
				width: 300px;
				height: 100px;
				background-color: red;
				float: left;
			}
			
			.box2{
				width: 100px;
				height: 100px;
				background-color: blue;
				float: left;
			}
			
			.box3{
				width: 100px;
				height: 100px;
				background-color: orange;
				float: left;
			}
			
			.box4{
				width: 100px;
				height: 100px;
				background-color: yellow;
				float: right;
			}
		</style>
	</head>
	<body>
		<div class="box1">box1</div>
		<div class="box2">box2</div>
		<div class="box3">box3</div>
		<div class="box4">box4</div>
	</body>

效果：

（4）浮动的元素不会超过他上边的兄弟元素，最多一边齐

示例：

	<head>
		<meta charset="UTF-8">
		<title>浮动</title>
		<style type="text/css">
			
			.box1{
				width: 300px;
				height: 100px;
				background-color: red;
				float: left;
			}
			
			.box2{
				width: 300px;
				height: 100px;
				background-color: blue;
				float: left;
			}
			
			.box3{
				width: 300px;
				height: 100px;
				background-color: orange;
				float: left;
			}
			
			.box4{
				width: 100px;
				height: 100px;
				background-color: yellow;
				float: right;
			}
		</style>
	</head>
	<body>
		<div class="box1">box1</div>
		<div class="box2">box2</div>
		<div class="box3">box3</div>
		<div class="box4">box4</div>
	</body>

效果：

（5）浮动的元素不会盖住文本，文字会自动环外在浮动的周围

示例：

	<head>
		<meta charset="UTF-8">
		<title>浮动</title>
		<style type="text/css">
			
			.box1{
				width: 100px;
				height: 100px;
				background-color: red;
				float: left;
			}
			
			p{
				background-color: #BBAAFF;
			}
		</style>
	</head>
	<body>
		<div class="box1">box1</div>
		<p>
			我开始怀念，那些四处散开的花，它们因为你的离开，妖娆的变换着华丽。漫漫的堆积成内心坚实而无法倾诉的爱慕。被渐次淹没的暖。天际边黑色的暗涌，在路灯下渐渐清晰。我依然在路上游荡，看着人来过往。他们无视我的存在，默默地从我身边走过。偶尔会有人看着我，还带着笑意，却没有人读懂我的寂寞。却没有我爱的人与爱我的人相伴。心里蔓延着空荡与不甘
		</p>
	</body>

效果：

（6）块元素脱离文档流后，高度和宽度默认都是被文档撑开的高度和宽度

（7）内联元素脱离文档流后会变成块元素。

丨Anna丨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
4 盒子模型

盒子模型在网页中“一切皆是盒子”。CSS处理网页时，它认为每个元素都包含在一个不可见的盒子里。我们只需要将相应的盒子摆放到网页中相应的位置即可完成网页的布局。1 盒子模型的组成一个盒子我们会分成几个部分： – 内容区(content) （1）内容区指的是盒子中放置内容的区域，也就是元素中的文本内容，子元素都是存在于内容区中的。（2）如果没有为元素设置内边距和边框，则内容区大小默认和盒子大小是一致的。...
复制链接

扫一扫