在css中遇到的好玩儿之处02

最新推荐文章于 2020-12-06 08:36:38 发布

西小贝先森

最新推荐文章于 2020-12-06 08:36:38 发布

阅读量124

点赞数

分类专栏：趣玩CSS 文章标签：浮动元素浮动产生的影响清除浮动的方法 CSS文本对齐方式图片的对齐方式

本文链接：https://blog.csdn.net/luckyht/article/details/101427201

版权

趣玩CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本篇继续分享在css中的好玩儿之处以及面试常见问题：浮动和常用到的布局（对齐方式）

浮动

浮动的概念
float是css样式中的定位属性，用于设置标签对象的浮动布局，浮动也就是我们所说标签对象浮动居左靠左（float:left）和浮动居右靠右(float:right)。
浮动的作用
通过浮动来使元素进行定位
浮动产生的影响

脱标：浮动元素会脱离标准文档流浮动元素不占据空间位置

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div{
			width: 100px;
			height: 100px;
			background-color: #ccc;
			margin:20px;
		}
		#left{
			width: 50px;
			height: 50px;
			background: skyblue;
			float:left;

		}
		
	</style>
</head>
<body>
     <div id="left"> </div>
     <div></div>
     <div></div>
</body>
</html>

未添加浮动添加浮动后

字围：字会围绕着浮动元素

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		
		#left{
			width: 50px;
			height: 50px;
			background: skyblue;
			float:left;
		}
		
	</style>
</head>
<body>
     <div id="left"> </div>
      <p>1、某人到商店买点钞机，挑了两台最贵的，同时问了一下老板为什么这种型号的贵一些，老板告诉他因为这是全智能语音型的。
　　付款时他让老板就用这两台点钞机点钞，两台点钞机都报出了准确的数字，他认为语音功能还不错，但没看出什么智能来，
　　老板说你以后用就知道了，他付完款后把点钞机放到车后座，开车回公司。
　　在路上，他突然听到一台点钞机对另一台说话了：“喂，传说中被别人卖了还帮别人数钱的是不是就是咱哥们碍…”
</p>
</body>
</html>

浮动元素字围现象

父盒子无固定高度子盒子设置浮动导致父盒子没有被撑开所产生以下影响
- 父盒子的背景样式失效
- 父盒子边框不能撑开
- margin padding 不能正常显示

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	 <style>
		#father{
			width:500px;
			background-color:#ccc;
		}
		#son{
			width: 300px;
			height: 200px;
			background-color: skyblue;
			float: left;
		}
	 </style>
</head>
<body>
	<div id="father">
		<div id="son"></div>
	</div>
</body>
</html>

未添加浮动

在这里插入图片描述

添加浮动后

在这里插入图片描述

清除浮动的方法

方法一：给浮动元素的父盒子设置固定的高度，这样浮动元素就不会影响到父元素啦
缺点：无法扩展
方法二：如果不想给浮动元素设置固定高度的话我们可以给父盒子设置overflow属性
overflow：hidden；_zoom:1;
原理：父元素定义overflow：hidden时浏览器会自动检查浮动区域的高度
优点：无需添加额外的标签
缺点：不能和position配合使用，因为超出的尺寸会被影藏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	 <style>
		#father{
			width:500px;
			border:1px solid #000;
			background-color:#ccc;
			overflow: hidden;
			-zoom:1; /*zoom: 1; 是在处理兼容性问题 */
			
		}
		#son{
			width: 300px;
			height: 200px;
			background-color: skyblue;
			float: left;
			}
	 </style>
</head>
<body>
	<div id="father">
		<div id="son"></div>
	</div>
</body>
</html>

在这里插入图片描述

方法三：添加额外标签 clear：both
原理：在浮动元素下添加一个空标签，这个空标签设置clear：both；
优点：浏览器兼容性好
缺点：增加页面的标签，造成页面混乱

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	 <style>
		#father{
			width:500px;
			border:1px solid #000;
			background-color:#ccc;
		}
		#son{
			width: 300px;
			height: 200px;
			background-color: skyblue;
			float: left;
			}
		.clear{clear: both}
	 </style>
</head>
<body>
	<div id="father">
		<div id="son"></div>
		<div class="clear"></div>
	</div>
</body>
</html>

在这里插入图片描述

方法四：使用伪元素：after清除浮动
原理：给父盒子添加伪元素 after 或者before 通过空内容来清除浮动
优点：无需添加新的标签且兼容性好是目前运用最为广泛的一种

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	 <style>
		#father{
			width:500px;
			border:1px solid #000;
			background-color:#ccc;
		}
		#son{
			width: 300px;
			height: 200px;
			background-color: skyblue;
			float: left;
			}
		#father:after{
			content: '';
			display: block;
			clear:both;
		}
	 </style>
</head>
<body>
	<div id="father">
		<div id="son"></div>
		<div class="clear"></div>
	</div>
</body>
</html>

在这里插入图片描述

方法五：给父盒子定义overflow：auto;
缺点：当内部高度大于父盒子高度时，会出现滚动条
不推荐使用
方法六：给父盒子定义为display：table
原理：将父盒子的属性设置为表格，表格的特性决定了它不受浮动元素的影响
缺点是：会产生未知新问题
不推荐使用

#father{
			width:500px;
			border:1px solid #000;
			background-color:#ccc;
		    display:table;
		}

IE6的双倍边距问题
E6下有一个著名的margin双倍bug
当浮动方向和margin是同方向时，此时IE6会在这个方向的第一个元素身上产生双倍的margin
解决方法如下
- 改变margin的方向例如：浮动向左，margin向右
- 给第一个元素单独定义一个类然后将其margin设置为原来的一般
- 给浮动元素加上 display：inline

布局之对齐方式

文本的对齐方式
水平方向 text-align

值	描述
left	把文本排列到左边
right	把文本排列到右边
center	把问本排列到中间
justify	实现两端对齐文本效果

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		h3{text-align: center; }
		span{text-align: center; }
		div{width:500px; background: skyblue; }
		p{text-align:left;}
		h4{text-align:right;}
	</style>
</head>
<body>
	<div>
		<h3>西小贝先森</h3>
		<h4>you are my sunshine</h4>
		<p>床前明月光 举头邀明月 明月几时有 人生得意须尽欢 莫使金樽空对月 三十功名尘与土，八千里路云和月</p>
	</div>
</body>
</html>

水平居中的方法
垂直方向:vertical-align 默认是以基线对齐

图片的对齐方式
水平居中：margin:0 auto:
有父盒子的情况父盒子设置 text-align:center 图片 margin :0 auto
无父盒子的情况图片转换为块级元素 display:block; 再使用margin:0 auto;

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>图片的居中方式</title>
	<style>
	    div{text-align:center; width: 800px; height: 400px; border:1px solid #000;}
		img{margin:0 auto;}
		.haha{margin:0 auto; display: block}
	</style>
</head>
<body>
	<div><img src="cool.jpg" alt=""></div>
	<img src="cool.jpg" alt="" class="ha">
</body>
</html>

在这里插入图片描述
垂直对齐方式：
父盒子 line-height +子盒子的vertical-align:middle
父盒子 display:table-cell +vertical-align:middle

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	    div{width: 800px; height: 400px; line-height:400px; border:1px solid #000;  }
	    img{vertical-align: middle;}
	</style>
</head>
<body>
	<div><img src="cool.jpg" alt=""></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	    div{width: 800px; height: 400px; display: table-cell; border:1px solid #000;vertical-align: middle;}
	</style>
</head>
<body>
	<div><img src="cool.jpg" alt=""></div>
</body>
</html>

在这里插入图片描述
水平垂直居中
父元素：text-align:center ;line-height: ;+子图片：vertical-align：middle

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div{height: 400px;width:600px ;border:1px solid #000; text-align: center ;line-height: 400px; }
		img{vertical-align: middle;}
	</style>
</head>
<body>
	<div><img src="cool.jpg" alt=""></div>
</body>
</html>