【CSS 10】浮动实例处理布局流 display: inline-block 行内块元素水平显示列表项 align 对齐-Toy模板网

这篇具有很好参考价值的文章主要介绍了【CSS 10】浮动实例处理布局流 display: inline-block 行内块元素水平显示列表项 align 对齐。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

浮动实例

网格/等宽的框
通过使用 float 属性，可以轻松地并排浮动内容框

<!DOCTYPE html>
<html>
<head>
<style>
* {
	box-sizing: border-box;
}

.box {
	float: left;
	width: 33.33%;
	padding: 50px;
}

.clearfix::after {
	content: "";
	clear: both;
	display: table;
}
</style>
</head>
<body>

<h1>网格框</h1>

<p>并排浮动</p>

<!-- 每两位的值相同可以缩写为一半 #bbbbbb 变为 #bbb; #667788 变为 #678 -->
<div class="clearfix">
	<div class="box" style="background-color:#bbb">
	<p>框1文本</p>
	</div>
	<div class="box" style="background-color:#ccc">
	<p>框2文本</p>
	</div>
	<div class="box" style="background-color:#ddd">
	<p>框3文本</p>
	</div>
<div>

<p>我们使用 clearfix hack 处理布局流<br />
并添加box-sizing属性确保框不会由于额外的内边距填充而损坏
</p>
	
</body>
</html>

display: inline-block

与 display: inline 相比，主要区别在于 display: inline-block 允许在元素上设置宽度和高度

同样，如果设置了 display: inline-block，将保留上下外边距/内边距，而 display: inline 则不会

与 display: block 相比，主要区别在于 display：inline-block 在元素之后不添加换行符，因此该元素可以位于其他元素旁边

<!DOCTYPE html>
<html>
<head>
<style>
span.a {
	display: inline; /* the default for span */
	width: 100px;
	height: 100px; /*实际上宽度和高度设置都没有生效*/
	padding: 5px;
	border: 1px solid blue;
	background-color: yellow;
}

span.b {
	display: inline-block;
	width: 100px;
	height: 100px;
	padding: 5px;
	border: 1px solid blue;
	background-color: yellow;
}

span.c {
	display: block;
	width: 100px;
	height: 100px;
	padding: 5px;
	border: 1px solid blue;
	background-color: yellow;
}
</style>
</head>
<body>

<h1>display 属性</h1>

<h2>display: inline</h2>
<div>Shanghai is one of the four direct-administered municipalities of <span class="a">the People's Republic of China</span>.
Welcome to <span class="a">Shanghai</span>!
</div>

<h2>display: inline-block</h2>
<div>Shanghai is one of the four direct-administered municipalities of <span class="b">the People's Republic of China</span>.
Welcome to <span class="b">Shanghai</span>!
</div>

<h2>display: block</h2>
<div>Shanghai is one of the four direct-administered municipalities of <span class="c">the People's Republic of China</span>. Welcome to <span class="c">Shanghai</span>!</div>

</body>
</html>

display的一种常见用法是使用 inline-block 水平显示列表项
下面是水平导航链接的例子:

<!DOCTYPE html>
<html>
<head>
<style>
.nav {
	background-color: yellow;
	list-style-type: none;
	text-align: center;
	margin: 0;
	padding: 0;
}

.nav li {
	display: inline-block;
	font-size: 20px;
	padding: 20px;
}
</style>
</head>
<body>

<h1> 水平导航链接 </h1>

<p>列表项默认垂直显示，此处我们使用display: inline-block来水平显示</p>
<p class="note"><span>注释:</span>调整浏览器的大小，链接会在变得拥挤时自动换行</p>

<ul class="nav">
	<li><a href="#home">Home</a></li>
	<li><a href="#about">About Us</a></li>
	<li><a href="#client">Our Client</a></li>
	<li><a href="#contact">Contact Us</a></li>
</ul>

</body>
</html>

align 对齐

/* 
要使块元素（例如 <div> ）水平居中，请使用 margin: auto;
设置元素的宽度将防止其延伸到容器的边缘
然后，元素将占用指定的宽度，剩余空间将在两个外边距之间平均分配
*/

.center {
	margin: auto;
	width: 50%;
	border: 3px solid green;
	padding: 20px;
}

/*
如果仅需在元素内居中文本，请使用 text-align: center;
*/

.center {
	text-align: center;
	border:3px solid green;
}

/*
如需居中图像，请将左右外边距设置为 auto，并将其设置为块元素
*/

img {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/*
左和右对齐 - 使用 position
对齐元素的一种方法是使用 position: absolute;
*/

.right {
	position: absolute;
	right: 0px;
	width: 300px;
	border: 3px solid #73AD21;
	padding: 20px;
}

/*
左和右对齐 - 使用 float
对齐元素的另一种方法是使用 float 属性
*/
.right {
	float: right;
	width: 300px;
	border: 3px solid #73AD21;
	padding: 10px;
)

注意：如果一个元素比包含它的元素高，并且它是浮动的，它将溢出其容器
可以使用 clearfix hack 来解决此问题

<!DOCTYPE html>
<html>
<head>
<style>
div {
	border: 3px solid #4CAF50;
	padding: 5px;
}

.img1 {
	float: right;
}

.clearfix {
	overflow:auto;
}

.img2 {
	float: right;
}
</style>
</head>
<body>

<h1>Clearfix</h1>

<p>本例中图像高于包含它的元素，并且浮动了，所以会在容器之外溢出</p>

<div>
	<img class="img1" src="/i/logo/w3logo-3.png" alt="W3School" width="180" height="180">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...
</div>

<p style="clear:right">请为包含元素添加一个带有 overflow: auto; 的 clearfix 类，以解决此问题</p>

<div class="clearfix">
	<img class="img2" src="/i/logo/w3logo-3.png" alt="W3School" width="180" height="180">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...
</div>

</body>
</html>

垂直对齐文章来源地址https://www.toymoban.com/news/detail-501699.html

/*使用上下内边距 padding 创造垂直对齐*/
.center {
  padding: 70px 0;
  border: 3px solid green;
}

/*同时垂直和水平对齐，使用 padding 和 text-align: center;*/
.center {
	padding: 70px 0;
	border: 3px solid green;
	text-align: center;
}

/*另一个技巧是使用其值等于 height 属性值的 line-height 属性*/
.center {
	line-height: 200px;
	height: 200px;
	border: 3px solid green;
	text-align: center;
}

/*如果有多行文本，请添加如下代码*/
.center p {
	line-height: 1.5;
	display: inline-block;
	vertical-align: middle;
}

/*
如果您的选择不是 padding 和 line-height，则另一种解决方案是使用 position 和 transform 属性
*/
.center {
	height: 200px;
	position: relative;
	border: 3px solid green;
}

.center p {
	margin: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
/*我们在后面的CSS 2D转换高级教程里可以学习到更多关于 transform 属性的知识*/

/*
我们还可以使用 flexbox 将内容居中
IE10 以及更早的版本不支持 flexbox
*/
.center {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 200px;
	border: 3px solid green;
}
/*我们在后面的CSS Flexbox高级教程里可以学习到更多相关知识*/