02-display屬性–元素互相轉換
代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*<!--通常會去掉標籤自帶的內外邊距， *表示所有標籤-->*/
*{margin: 0;padding: 0}
.box01{
width: 100px;
height: 100px;
border: 1px solid red;
/*1. 把div轉爲行內塊*/
display: inline-block;
/*轉爲行內元素*/
/*display: inline;*/
font-size: 16px;
}
/*2. 把span轉爲行內塊*/
span{
/*轉爲行內塊*/
display: inline-block;
/*轉爲塊元素*/
/*display: block;*/
/*隱藏*/
/*display: none;*/
width: 100px;
height: 100px;
border: 1px solid red;
font-size: 16px;
}
.box{
/*font-size: 0;*/
letter-spacing: 0;
}
</style>
</head>
<body>
<div class="box">
<!--解決行內塊，外邊距去不掉問題-->
<!--由換行符引起的，把換行符變成了空格-->
<!--解決方式一：不換行-->
<!--解決方式一：把父元素字體大小設爲0，子元素重新設置字體大小-->
<div class="box01">1111</div>
<span>2222</span>
</div>
</body>
</html>
運行結果
03-標籤轉換–佈局練習
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>音樂網站</title>
<style>
*{
margin: 0;padding: 0;
/*去掉li標籤樣式*/
list-style: none;
}
ul{
width: 400px;
border: 1px solid red;
/*去掉行內塊之間的空格*/
font-size: 0;
/*利用外邊距margin，實現水平居中，並且窗口縮放，任然居中*/
margin: 0px auto;
}
ul>li{
width: 100px;
height: 50px;
border: 1px solid red;
/*轉爲行內塊*/
display: inline-block;
font-size: 16px;
/*保證盒子大小，不受邊框和padding影響*/
box-sizing: border-box;
/*設置行高等於父元素高度，實現垂直居中*/
line-height: 50px;
/*設置文本，水平居中*/
text-align: center;
}
/*僞類選擇器，鼠標進入時，改變樣式*/
ul>li:hover{
background-color: #5e5e5e;
}
.box{
width: 600px;
height: 100px;
background-color: #5bc0de;
/*默認隱藏*/
display: none;
}
/*鼠標進入後，顯示隱藏的塊*/
ul>li:hover .box{
display: block;
}
</style>
</head>
<body>
<ul>
<li>歐美
<div class="box"></div>
</li>
<li>日韓
<div class="box"></div>
</li>
<li>港臺
<div class="box"></div>
</li>
<li>大陸
<div class="box"></div>
</li>
</ul>
</body>
</html>
04-overflow處理溢出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 150px;
height: 150px;
border: 1px solid red;
/*圖片溢出，清除內部元素對外部元素的影響*/
/*設置hidden隱藏， 把溢出部分剪切*/
overflow: hidden;
/*設置爲auto自動，判斷是否溢出，有溢出則添加滾動條*/
/*overflow: auto;*/
/*設置scroll滾動，添加滾動*/
/*overflow: scroll;*/
/*默認值visible，可見*/
/*overflow: visible;*/
}
</style>
</head>
<body>
<div class="box">
<img src="./images/timg.jpg" alt="">
<!--<img src="./images/111.jpg" alt="">-->
</div>
</body>
</html>
05-浮動float
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box01{
width: 400px;
height: 300px;
border: 1px solid red;
margin-left: 100px;
}
.box02{
width: 100px;
height: 100px;
background-color: #a94442;
/*添加浮動*/
/*1.可以設置左浮動，或者右浮動*/
/*2.浮動會脫離文檔流，會將後面的元素覆蓋*/
/*3.不會覆蓋文字*/
/*4.碰到父元素或者前面右浮動元素，則停止浮動*/
/*5.浮動元素排在一行，總寬度超過父元素，則自動換一行*/
/*6.如果前面有未浮動的元素 會另起一行進行浮動*/
float: left;
}
.box03{
width: 110px;
height: 110px;
background-color: #5bc0de;
float: left;
}
.box04{
width: 110px;
height: 110px;
background-color: red;
float: left;
}
</style>
</head>
<body>
<div class="box01">
<div class="box02">1111</div>
<div class="box03">2222aeehtsrjytuyg</div>
<div class="box04">3333</div>
</div>
</body>
</html>
06-浮動後父元素高度撐不開問題–4種解決方案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box01{
width: 300px;
/*1. 解決撐不開問題方案一：父元素添加高度*/
/*缺點：高度往往不能寫死*/
/*height: 300px;*/
border: 5px solid red;
/*2.解決撐不開問題方案二：父元素添加 overflow: hidden;*/
/*設置隱藏，把溢出部分剪切*/
/*父元素沒有高度，沒有剪切的標準，以子元素高度去剪切*/
/*找到子元素的高度，父元素又能撐開了*/
/*overflow: hidden;*/
}
.box02{
width: 100px;
height: 100px;
background-color: #5bc0de;
/*浮動後，如果父元素沒有設置高度，則導致父元素撐不開*/
float: left;
}
/*!*3.解決撐不開問題方案三：添加空白標籤，清除兩邊浮動影響*!*/
/*!*缺點：添加了一個多餘的空標籤*!*/
/*.box03{*/
/*!*清除2邊浮動影響*!*/
/*!*left right both*!*/
/*clear: both;*/
/*}*/
/*4. 解決撐不開問題方案四：給父元素添加僞元素 after*/
/*原理和方案3相同，但是不會添加多餘的空標籤*/
.box01:after{
/*在box01後面添加一個空字符*/
content: '';
/*把空字符變爲塊元素*/
display: block;
/*清除兩邊浮動影響*/
clear: both;
}
</style>
</head>
<body>
<div class="box01">
<div class="box02">1111</div>
<!--<div class="box03"></div>-->
</div>
</body>
</html>
07-相對定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{margin: 0;padding: 0}
.box01{
width: 300px;
height: 300px;
border: 1px solid red;
margin-left: 100px;
}
.box02{
width: 100px;
height: 100px;
background-color: gold;
/*定位屬性: 相對定位*/
/*1.相對定位，沒有脫離文檔流*/
/*2.參考點：是原來位置的起始點，相對於父元素*/
position: relative;
top: 50px;
left: 20px;
}
.box03{
width: 100px;
height: 100px;
background-color: red;
/*添加定位屬性*/
position: relative;
/*定位層級/權重， 值越大，顯示在最上面*/
z-index: 1;
}
</style>
</head>
<body>
<div class="box01">
<div class="box02">1111</div>
<div class="box03">2222</div>
</div>
</body>
</html>
08-絕對定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{margin: 0;padding: 0}
.box01{
width: 300px;
height: 300px;
border: 1px solid red;
margin-left: 100px;
/*給父元素添加定位屬性*/
/*position: relative;*/
}
.box02{
width: 100px;
height: 100px;
background-color: gold;
/*絕對定位：*/
/*1.絕對定位：脫離了文檔流*/
/*2.參考點：如果父元素有定位屬性，則相對父元素的起始位置*/
/*如果父元素沒有定位屬性，找父元素的上一級，找到body爲止*/
position: absolute;
top: 20px;
left: 50px;
}
.box03{
width: 100px;
height: 100px;
background-color: red;
position: relative;
z-index: 2;
}
</style>
</head>
<body>
<div class="box01">
<div class="box02">1111</div>
<div class="box03">2222</div>
</div>
</body>
</html>
10-小米側邊欄練習–絕對定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{margin: 0;padding: 0;list-style: none}
ul{
width: 200px;
background-color: rgba(105, 101, 101, 0.6);
/*給ul設置定位屬性，把ul作爲參考點*/
position: relative;
margin-left: 50px;
margin-top: 50px;
}
ul>li{
width: 200px;
height: 80px;
border: 1px solid red;
/*保證盒子大小不變，不受padding和border影響*/
box-sizing: border-box;
line-height: 80px;
text-align: center;
}
.box{
width: 500px;
height: 320px;
background-color: #5bc0de;
/*絕對定位*/
position: absolute;
top: 0px;
left: 200px;
display: none;
}
ul>li:hover{
background-color: green;
}
/*僞類選擇器，顯示box*/
ul>li:hover .box{
display: block;
}
</style>
</head>
<body>
<ul>
<li>手機
<div class="box"></div>
</li>
<li>電視
<div class="box" ></div>
</li>
<li>空調
<div class="box"></div>
</li>
<li>掃地機器人
<div class="box"></div>
</li>
</ul>
</body>
</html>
