【前端中css基础——系列2】css中浮动与垂直居中显示

最新推荐文章于 2024-04-03 15:35:29 发布

让子弹飞一会儿=>

最新推荐文章于 2024-04-03 15:35:29 发布

阅读量386

点赞数 2

分类专栏：前端文章标签： css html css3 html5 js

本文链接：https://blog.csdn.net/yangyaning123/article/details/117391371

版权

前端专栏收录该内容

39 篇文章 2 订阅

订阅专栏

系列文章总结

【前端中css基础——系列1】盒模型与flex布局
 【前端中css基础——系列2】css中浮动与垂直居中显示
 【前端中css基础——系列3】css中模块化；css动画；css单位
 【前端中css基础——系列4】css实现固定宽高比；css中伪元素
 【前端中css基础——系列5】BFC与IFC；绝对定位与相对定位和固定位置
 【前端中css基础——系列6】单行多行文本截断；实现三角形圆形

一、浮动

1.1 浮动的定义：

给元素的float属性赋值后，就是脱离文档流进行左右浮动，紧贴着父元素（默认为文本区域）的左右边框。而浮动元素在文档流空出的位置，由后续的（非浮动）元素直接填充上去；块级元素直接填充上去，若跟浮动元素的范围发生重叠，浮动元素覆盖块级元素。

值	描述
none	默认值，元素不浮动
left	元素向左浮动
right	元素向右浮动
inherit	从父元素继承float属性的值

1.2 浮动应用场景：

使用的最广的但是属两列布局，平行排列：

.outer{ 
height:100px; 
} 
	.left{ 
	float:left; 
	height:100px; 
	width:200px; 
	background:yellow; 
	} 
		.right{ 
		margin left:200px; 
		height:100px; 
		width:auto;//撑满 
		background:red; 
		}

1.3 清除浮动：

1.3.1 为什么要清除浮动

清除浮动主要是为了解决父元素因为子元素浮动引起的内部高度为0的问题（简而言之：子元素的浮动导致了父元素高度的塌陷）。

如下：给父盒子设置一个border，内部两个盒子一个big，一个small，未给big和small设置浮动，则他们会默认撑开复合纸；当给内部两个盒子加上float属性时，底部的footer盒子就会顶上来，然后父盒子因为没有设置高度，变成一条线，big和small已经浮动了。
在这里插入图片描述

1.3.2 清除浮动方法

（1）额外标签法：

给谁清除浮动就在谁后面添加一个空白标签

<div class="fahter">
        <div class="big">big</div>
        <div class="small">small</div>
        <div class="clear">额外标签法</div>
</div>
.clear{
        clear:both;
    }

（2）父级添加overflow法：

通过触发BFC的方法，实现清除浮动效果，必须定义width或zoom：同时不能定义height，使用overflow：hidden时，浏览器会自动检查浮动区域的高度。

.fahter{
    width: 400px;
    border: 1px solid deeppink;
    overflow: hidden;
}

（3）使用after伪元素清除浮动：

.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
    }
    .clearfix{
        *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
    }
 
<body>
    <div class="father clearfix">
        <div class="big">big</div>
        <div class="small">small</div>
        <!--<div class="clear">额外标签法</div>-->
    </div>
    <div class="footer"></div>
</body>

二、垂直居中显示

2.1 position元素已知宽度

父元素设置为：position：relative；子元素设置为：position：absolute;
距上50%，据左50%，然后减去元素自身宽度的距离就可以实现。

2.2 position transform元素未知宽度

如果元素未知宽度，只需要将设置margin中的margin：-50px 0 0
-50px；替换成transform：translate（-50%，-50%）；

2.3 flex布局

display：flex//设置未flex布局
ustify-content:center;//使子项目水平居中
align-items:cente；//使子项目垂直居中

2.4 table-cell布局

因为table-cell相当于与表格的td，td为行内元素，无法设置宽和高，所以嵌套一层，嵌套一层必须设置display：inline-block；

码字不易~，各位看官要是看爽了，可不可以三连走一波，点赞皆有好运！，不点赞也有哈哈哈~~~

让子弹飞一会儿=>

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
【前端中css基础——系列2】css中浮动与垂直居中显示

文章目录一、浮动1.1 浮动的定义：1.2 浮动应用场景：1.3 清除浮动：1.3.1 为什么要清除浮动1.3.2 清除浮动方法（1）额外标签法：（2）父级添加overflow法：（3）使用after伪元素清除浮动：二、垂直居中显示2.1 position元素已知宽度2.2 position transform元素未知宽度2.3 flex布局2.4 table-cell布局一、浮动1.1 浮动的定义：给元素的float属性赋值后，就是脱离文档流进行左右浮动，紧贴着父元素（默认为文本区域）的左右边
复制链接

扫一扫