Day6:html和css

于 2018-12-28 12:30:02 发布
阅读量81 收藏
点赞数
CC 4.0 BY-SA版权
原文链接：https://juejin.im/post/5c261706e51d457f063b99dc
本文深入探讨了CSS中的浮动和定位技术，包括清除浮动的方法、相对定位和绝对定位的使用，以及如何通过不同属性实现元素的精确布局。通过实例演示了如何解决浮动引起的布局问题，以及如何利用定位属性使元素在页面上精确定位。

Day6:html和css

复习

margin: 0;
padding: 0;
复制代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Demo</title>
	<style>
        // 父元素
	.father {
		border: 1px solid red;
		width: 300px;
	}
        // 添加浮动会导致父元素不被撑开
	.big {
		width: 100px;
		height: 100px;
		background-color: purple;
		float: left;
	}
	.small {
		width: 80px;
		height: 80px;
		background-color: blue;
		float: left;
	}
	.footer {
		width: 400px;
		height: 100px;
		background-color: pink;
	}
	</style>
</head>
<body>
	<div class="father">
		<div class="big"></div>
		<div class="small"></div>
	</div>
	<div class="footer"></div>
</body>
</html>
// 所以要进行清除浮动
复制代码

清除浮动: overflow: hidden 添加在需要清除浮动的地方

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Demo</title>
	<style>
	.father {
		border: 1px solid red;
		width: 300px;
		overflow: hidden;  // 添加在需要清除的地方
	}
	.big {
		width: 100px;
		height: 100px;
		background-color: purple;
		float: left;
	}
	.small {
		width: 80px;
		height: 180px;
		background-color: blue;
		float: left;
	}
	.footer {
		width: 400px;
		height: 100px;
		background-color: pink;
	}
	</style>
</head>
<body>
	<div class="father"> 
		<div class="big"></div>
		<div class="small"></div>
	</div>
	<div class="footer"></div>
</body>
</html>
// 清除浮动的效果会导致父元素撑开
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Demo</title>
	<style>
	.father {
		border: 1px solid red;
		width: 300px;
	}
	.big {
		width: 100px;
		height: 200px;
		background-color: purple;
		float: left;
	}
	.small {
		width: 80px;
		height: 80px;
		background-color: blue;
		float: left;
	}
	.footer {
		width: 400px;
		height: 100px;
		background-color: pink;
	}
	.clear {
		clear: both;
		// 额外标签法
	}
	</style>
</head>
<body>
	<div class="father">
		<div class="big"></div>
		<div class="small"></div>
		<div class="clear"></div>
               // 在最后的标签,添加清除浮动
	</div>
	<div class="footer"></div>
</body>
</html>

// clear: both;
复制代码
// after伪元素进行清除浮动
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Demo</title>
	<style>
	.clearfix:after { 
                // 父元素添加类
		content:"";
		display: block;
		height: 0;
		clear: both;
		visibility: hidden;
	}
	.clearfix {
		*zoom: 1;  
	}
	.father {
		border: 1px solid red;
		width: 300px;
	}
	.big {
		width: 100px;
		height: 100px;
		background-color: purple;
		float: left;
	}
	.small {
		width: 80px;
		height: 80px;
		background-color: blue;
		float: left;
	}
	.footer {
		width: 400px;
		height: 100px;
		background-color: pink;
	}
	</style>
</head>
<body>
	<div class="father clearfix">
		<div class="big"></div>
		<div class="small"></div>
	</div>
	<div class="footer"></div>
</body>
</html>

// 在父类添加元素类,清除浮动

.clearfix:after {
 content: "";
 display: block;
 height: 0;
 clear: both;
 visibility: hidden;
}
.clearfix {
 *zoom: 1;
}
复制代码
// 双伪元素进行清除浮动
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Demo</title>
	<style>
	.clearfix:before, .clearfix:after {
		content: "";
		display: table;
	}
	.clearfix:after {
		clear: both;
	}
	.clearfix {
		*zoom: 1;
	}
	.father {
		border: 1px solid red;
		width: 300px;

	}
	.big {
		width: 100px;
		height: 100px;
		background-color: purple;
		float: left;
	}
	.small {
		width: 80px;
		height: 80px;
		background-color: blue;
		float: left;
	}
	.footer {
		width: 400px;
		height: 100px;
		background-color: pink;
	}
	</style>
</head>
<body>
	<div class="father clearfix">
		<div class="big"></div>
		<div class="small"></div>
	</div>
	<div class="footer"></div>
</body>
</html>

// 在父元素添加类 clearfix
// 双伪元素
.clearfix:before, .clearfix:after {
 content: "";
 display: table;
}
.clearfix:after {
 clear: both;
}
.clearfix {
 *zoom: 1;
}
复制代码

定位position

background-position 背景定位
复制代码

定位属性

边偏移

属性说明
top顶端偏移量
bottom底部偏移量
left左侧偏移量
right右侧偏移量

定位模式:

选择器{position: 属性值}
复制代码

position属性的常用值

值说明
static自动定位
relative相对定位，相对于其原文档流的位置进行定位
absolute绝对定位，相对于其上一个已经定位的父元素进行定位
fixed固定定位
position: static;
复制代码

相对定位: a->a不变

绝对定位absolute

绝对定位是如果某个部分会滚动,那么滚动完,它还在那个位置上而已.

子绝父相

子级是绝对定位的话， 父级要用相对定位。

叠放次序（z-index）

四种定位总结

静态static 不脱标，正常模式
相对定位relative 脱标，占有位置
绝对定位absolute 完全脱标，不占有位置
固定定位fixed 完全脱标，不占有位置
复制代码

元素的显示与隐藏

display visibility 和 overflow
display 显示 display : none display:block  隐藏之后，不再保留位置

visibility 可见性 visible 对象可视 hidden对象隐藏 隐藏之后，继续保留原有位置

overflow 溢出
visible
auto
hidden
scroll
复制代码

相对定位

// 相对定位
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Demo</title>
	<style>
	div {
		width: 200px;
		height: 200px;
	}
	.top {
		background-color: pink;
		/*position: relative; */
		top: 100px;
		left: 100px;
	}
	.bottom {
		background-color: purple;
	}
	</style>
</head>
<body>
	<div class="top"></div>
	<div class="bottom"></div>
</body>
</html>
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Demo</title>
	<style>
	div {
		width: 200px;
		height: 200px;
	}
	.top {
		background-color: pink;
		position: relative; 
		top: 100px;
		left: 100px;
	}
	.bottom {
		background-color: purple;
	}
	</style>
</head>
<body>
	<div class="top"></div>
	<div class="bottom"></div>
</body>
</html>
复制代码

// 绝对定位
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Demo</title>
	<style>
	body {
		height: 1000px;
	}
	div {
		width: 100px;
		height: 100px;
		background-color: pink;
	}
	.top {
		position: absolute; 
		right: 0;
		bottom: 0;
	}
	.bottom {
		background-color: purple;
		width: 110px;
	}
	</style>
</head>
<body>
	<div class="top"></div>
	<div class="bottom"></div>
</body>
</html>
复制代码
// 父元素没有定位
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Demo</title>
	<style>
	.father {
		width: 400px;
		height: 400px;
		background-color: pink;
		margin: 50px;
	}
	.son {
		width: 100px;
		height: 100px;
		background-color: purple;
		position: absolute;
		top: 50px;
		left: 50px;
	}
	</style>
</head>
<body>
	<div class="father">
		<div class="son"></div>
	</div>
</body>
</html>
// 没有定位跟着浏览器
复制代码
// 注意
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Demo</title>
	<style>
	div {
		width: 200px;
		height: 200px;
		background-color: pink;
	}
	.top {
		float: left; 
	}
	.bottom {
		background-color: purple;
	}
	</style>
</head>
<body>
	<div class="top">123</div>
	<div class="bottom">dashucoding</div>
</body>
</html>
复制代码
// 例子
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Demo</title>
	<style>
	div {
		width: 250px;
		height: 400px;
		border: 1px solid #ccc;
		float: left;
		margin-left: -1px;
		position: relative;
	}
	div:hover {
		border: 1px solid #f40;
		z-index: 1;
	}
	</style>
</head>
<body>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</body>
</html>
复制代码
// 居中
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Demo</title>
	<style>
	div {
		width: 200px;
		height: 200px;
		background-color: pink;
		position: absolute;
		left: 50%;
		margin-left: -100px;
		top: 50%;
		margin-top: -100px;
	}
	</style>
</head>
<body>
	<div></div>
</body>
</html>
复制代码

推荐

Day1:html和css

Day2:html和css

Day3:html和css

Day4:html和css

Day5:html和css

如果看了觉得不错

点赞！转发！

达叔小生：往后余生，唯独有你 You and me, we are family ! 90后帅气小伙，良好的开发习惯；独立思考的能力；主动并且善于沟通 简书博客： 达叔小生 www.jianshu.com/u/c785ece60…

结语

  • 下面我将继续对 其他知识 深入讲解 ，有兴趣可以继续关注
  • 小礼物走一走 or 点赞
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值