一、文本在盒子中垂直居中对齐
通过给文本设置行高达到垂直居中对齐效果
二、使用步骤
代码如下(示例):
div {
height:20px;
line-height:20px;
}
在给文字的行高设置为与盒子高度相同时,实现垂直居中效果
一、标准流中行内块元素之间会有缝隙
在给盒子添加浮动后可以消除缝隙
div {
width: 150px;
height: 200px;
background-color: pink;
/* 在标准流中为了让三个div在同一行中显示 会将其转换为行内块元素 */
/* display: inline-block; */
/* 但是他们中间会出现缝隙 */
/* 使用浮动 则不会出现缝隙 */
float: left;
/* 网页布局第一准则 多个块级元素纵向排列用标准流 多个块级元素横向排列用浮动 */
}
二、清除浮动
在很多情况下,盒子不方便给高度,为的是在以后维护的时候继续添加元素,所以不会把盒子的高度定死,而是通过子盒子本身的高度将父盒子撑大。但是子盒子通常时浮动的,浮动的盒子不占有体积,所以会导致下面的盒子顶上来。这时就需要清除浮动。
以下有四种清除浮动的方法。
/* 通俗易懂 书写方便 但是多了无意义代码 实际开发中不常用
新增的盒子要求必须是块级元素不能是行内元素 */
.clear {
clear: both;
}
第一种方法,给最后的一个盒子添加以上代码。
.box {
width: 900px;
background-color: pink;
margin: 0 auto;
/* 给父级盒子添加代码清除浮动
代码简洁 但是无法显示溢出的部分 */
overflow: hidden;
}
第二种方法,给父盒子添加overflow:hidden 缺点是会导致溢出部分显示不出来
/* 额外标签法的升级版 */
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* 为了照顾低版本浏览器 */
.clearfix {
/* IE6、7 专有 */
*zoom: 1;
}
第三种方法,给父盒子添加标签 clearfix 在样式中写上上述代码
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
第四种方法,与第三中方法用法相同。
第三种和第四种是开发中常用的方法。