hover使用技巧
- 可以設置自己或後代元素的屬性
- 可以設置自己之後兄弟元素的屬性
- 不能設置祖先元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hover使用技巧</title>
<style type="text/css">
#zxw{
width: 400px; height: 400px; background: #000;
}
.zxw2{
width: 150px; height: 400px; background: red;
}
/* .zxw2:hover{
width: 300px; height: 300px; background: green;
} */
/* #zxw:hover .zxw2{
width: 300px; height: 300px; background: green;
} */
/* #zxw:hover .zxw2 p{
color: blue; font-size: 26px;
} */
#zxw3:hover~p{
color: #fff; font-size: 20px;
}
</style>
</head>
<body>
<div id="zxw">
<div class="zxw2">
<p>我要自學網</p>
<p id="zxw3">我要自學網</p>
<p>我要自學網</p>
<p>我要自學網</p>
</div>
</div>
</body>
</html>
純css手機橫向滾動
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>橫向滾動</title>
<link rel="stylesheet" href="./css/reset.css">
<style type="text/css">
.box{
width: 100%; height: 304px; border: 2px solid #000;
margin-top:100px;
/* 橫向滾動，移動端不會出現滾動條 */
overflow-x: scroll;
}
ul{
width: 300%; height: 300px;
}
ul li{
width: 15.666%; height: 300px; margin: 0 0.5%; float: left;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li style="background: red;"></li>
<li style="background: yellow;"></li>
<li style="background: blue;"></li>
<li style="background: orange;"></li>
<li style="background: #ccc;"></li>
<li style="background: pink;"></li>
</ul>
</div>
</body>
</html>
清除圖片下方間隙
圖片在元素中對齊是按基線對齊，所以圖片底部產生間隙
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>標題</title>
<style type="text/css">
.box{
width: 1100px; border: 1px solid #000;
}
.box span{
font-size: 50px;
}
img{
vertical-align: top;
border: none; /*低版本瀏覽器有邊框*/
}
</style>
</head>
<body>
<div class="box">
<span>YYYyyy</span>
<a href="">
<img src="./img/timg.png">
</a>
</div>
</body>
</html>
元素透明度設置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>標題</title>
<style type="text/css">
.box{
width: 400px; height: 510px; margin: 100px auto;
border: 5px solid #000;
}
/* */
.box:hover{
/* 元素透明度設置；對整個元素及元素內的後代元素都會生效 */
opacity: 0.5;
}
img{
width: 400px;
}
/* 圖像透明度設置，只對圖像有效 */
/* img:hover{
filter:opacity(50%);
} */
p{
height: 70px; line-height: 70px; font-size: 30px;
font-weight: 700; color: red; background: #ccc;
}
</style>
</head>
<body>
<div class="box">
<img src="./img/timg.png">
<p>好看的小姐姐</p>
</div>
</body>
</html>
外邊距擊穿
-
相鄰的定義：同級或者嵌套的盒元素，他們之間沒有非空內容，並且父元素沒有內邊距和邊框分隔
-
如果子元素不是塊級元素，不會出現margin擊穿問題
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>標題</title>
<style type="text/css">
.box{
width: 400px; height: 400px; background: red;
/* padding-top: 1px; */
border: 1px solid #ccc;
}
.nei{
width: 200px; height: 200px; background: green;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="box">
<!-- <p>內部</p> -->
<div class="nei"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>標題</title>
<style type="text/css">
.box{
width: 400px; height: 400px; background: red;
}
.nei{
width: 200px; height: 200px; background: green;
margin-top: 100px;
}
span{
margin-top: 100px; margin-left: 100px;
}
</style>
</head>
<body>
<div class="box">
<!-- <img class="nei" src="./img/timg.png" width="200"> -->
<!-- <span>我要。。。</span> -->
</div>
</body>
</html>
外邊距擊穿的處理方法
- 父元素設置溢出隱藏
- 父元素設置內邊距
- 父元素設置邊框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>標題</title>
<style type="text/css">
.box{
width: 400px; height: 400px; background: red;
overflow: hidden;
/* padding-top: 1px; */
/* border: 1px solid #ccc; */
}
.nei{
width: 200px; height: 200px; background: green;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="box">
<div class="nei"></div>
</div>
</body>
</html>
優先級提升
- !important：把被修飾的語句的優先級提升到最大
- 只能提升一條語句的優先級，不能提升一個選擇器的優先級
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>標題</title>
<style type="text/css">
p{
font-size: 50px;
color: red!important;
}
.zxw1{
color: blue;
}
#zxw2{
color: green;
}
</style>
</head>
<body>
<p class="zxw1" id="zxw2" style="color: #000;">自學網</p>
</body>
</html>
禁止選中文本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>標題</title>
<style type="text/css">
p{
width: 200px; height: 50px;
font-size: 30px; margin: 50px auto;
user-select: none; /*後代可以繼承*/
}
a{
/* user-select: none; */
}
</style>
</head>
<body>
<p>
<a href="#">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</a>
</p>
</body>
</html>