盒子模型、块元素、内联元素、内联块元素以及水平垂直居中问题

最新推荐文章于 2023-11-11 10:47:48 发布

yjx_43750162

最新推荐文章于 2023-11-11 10:47:48 发布

阅读量455

点赞数

本文链接：https://blog.csdn.net/weixin_43750162/article/details/86658467

版权

盒子模型

把元素叫做盒子，设置对应的样式分别为：盒子的边框(border)、盒子内的内容和边框之间的间距(padding)、盒子与盒子之间的间距(margin)。

边框（border）

border：border-width（边框宽度） border-style（边框风格） border-color（边框颜色）

border-style的常用属性：

none：没有边框即忽略所有边框的宽度
solid：边框为单实线
dashed：边框为虚线
dotted：边框为点线
double：边框为双实线

边框的位置

border-top:上边框
border-bottom:下边框
border-left:左边框
border-right:右边框

内边距（padding）

padding属性用于设置内边距，是指边框与内容之间的距离。
padding-top:上内边距
padding-right:右内边距
padding-bottom:下内边距
padding-left:左内边距
padding:上内边距右内边距下内边距左内边距
当padding取一个值代表了上下左右边距
当padding取二个值代表了上下边距、左右边距
当padding取三个值代表了上边距、左右边距、下边距
当padding取四个值代表了上内边距右内边距下内边距左内边距

外边距（margin）

margin属性用于设置外边距
margin-top:上外边距
margin-right:右外边距
margin-bottom:下外边距
margin-left:上外边距
margin:上外边距右外边距下外边距左外边距
其取值方式和padding一样

margin 相关技巧

1、设置元素水平居中： margin:x auto;
2、margin 负值让元素位移及边框合并

外边距合并

外边距合并指的是当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
解决方法如下：
1、使用这种特性
2、设置一边的外边距，一般设置 margin-top
3、将元素浮动或者定位

margin-top的塌陷问题

在两个盒子嵌套时候，内部的盒子设置的 margin-top 会加到外边的盒子上，导致内部的盒子 margin-top 设置失败，解决方法如下：
1、外部盒子设置一个边框
2、外部盒子设置 overflow:hidden
3、使用伪元素类

选择器:before{ content: '';
display:table;
}

元素溢出

当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过 overflow 属性来设置
overflow 的设置项：
1、visible 默认值。内容不会被修剪，会呈现在元素框之外。
2、hidden 内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动、清除margin-top 塌陷的功能。
3、scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
4、auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
5、inherit 规定应该从父元素继承 overflow 属性的值。

元素

1.块级元素(block-level)

每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性。

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。

块级元素的特点：
（1）总是从新行开始
（2）高度，行高、外边距以及内边距都可以设置。

2.内联元素(inline-level)

行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性。

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。

行内元素的特点：

（1）和相邻行内元素在一行上。
（2）无法设置高、宽，但水平方向的padding和margin可以设置。
（3）默认宽度就是它本身内容的宽度。

3.行内块元素（inline-block）

在行内元素中有几个特殊的标签：<img />、<input />、<td>，可以对它们设置宽高和对齐属性，他们也称为行内块元素。

行内块元素的特点：
（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。
（2）默认宽度就是它本身内容的宽度。
（3）高度，行高、外边距以及内边距都可以设置。

标签显示模式转换 display

块转行内：display:inline;
行内转块：display:block;
块、行内元素转换为行内块： display: inline-block;

CSS实现垂直居中的问题

（1）利用text-align 实现块元素水平垂直居中
举例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>水平垂直居中问题</title>
		<style type="text/css">
			.div1{
				width: 300px;
				height: 250px;
				background: blue;
				text-align: center;
				padding-top: 50px;
			}
			.div2{
				display: inline-block;
				width: 200px;
				height: 200px;
				background: red;
			}
		</style>
	</head>
	<body>
		<div class="div1">
			<div class="div2"></div>
		</div>
	</body>
</html>

（2）利用padding设置,且父元素和子元素的大小一致
举例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>水平垂直居中问题</title>
		<style type="text/css">
			.div1{
				width: 300px;
				height: 300px;
				background: yellow;
				padding: 30px;
			}
			.div2{
				width: 300px;
				height: 300px;
				background: red;
			}
		</style>
	</head>
	<body>
		<div class="div1">
			<div class="div2"></div>
		</div>
	</body>
</html>

（3）利用position和margin进行元素水平垂直居中
举例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>水平垂直居中问题</title>
		<style type="text/css">
			.div1{
				width: 300px;
				height: 300px;
				background: gray;
				position: relative;
			}
			.div2{
				width: 100px;
				height: 100px;
				background: yellowgreen;
				position: absolute;
				left: 50%;
				top: 50%;
				margin: -50px 0px 0px -50px;
			}
		</style>
	</head>
	<body>
		<div class="div1">
			<div class="div2"></div>
		</div>
	</body>
</html>

（4）利用position进行元素的水平垂直居中
举例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>水平垂直居中问题</title>
		<style type="text/css">
			.div1{
				width: 300px;
				height: 300px;
				background: #FF0000;
				position: relative;
			}
			.div2{
				width: 100px;
				height: 100px;
				background: orange;
				position: absolute;
				left: 0px;
				top: 0px;
				bottom: 0px;
				right: 0px;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<div class="div1">
			<div class="div2"></div>
		</div>
	</body>
</html>

文字的居中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.div1{
				width: 300px;
				height: 300px;
				background: blue;
				margin: 100px auto;
				/*实现水平居中*/
				text-align: center;
				/*实现垂直居中*/
				line-height: 300px;
			}
		</style>
	</head>
	<body>
		<div class="div1">这是个div标签</div>
	</body>
</html>

图片的居中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.div1{
				width: 800px;
				height: 800px;
				border: 1px solid red;
				text-align: center;
				line-height: 800px;
			}
			img{
				width: 300px;
				height: 300px;
			   	/*实现图片的居中*/
				vertical-align: middle;
			}
		</style>
	</head>
	<body>
		<div class="div1">
			<img src="img/bg3.jpg" />
		</div>
	</body>
</html>

yjx_43750162

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
盒子模型、块元素、内联元素、内联块元素以及水平垂直居中问题

盒子模型把元素叫做盒子，设置对应的样式分别为：盒子的边框(border)、盒子内的内容和边框之间的间距(padding)、盒子与盒子之间的间距(margin)。边框（border）border：border-width（边框宽度） border-style（边框风格） border-color（边框颜色）border-style的常用属性：none：没有边框即忽略所有边框的宽度soli...
复制链接

扫一扫