Day6:html和css

達叔小生發表於2018-12-28
HTMLCSS

t0180700cf1a2fdfe3b.jpg

Day6:html和css

複習

達叔與他的朋友們-複習.png

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 點贊

相關文章