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

CSS

- - 浮动实例
  - 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>

垂直对齐

/*使用上下内边距 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高级教程里可以学习到更多相关知识*/