居中
1.display 屬性為 block 的元素水平居中
block {
margin: 0 auto;
}
2. display 屬性為 inline坦喘、inline-box 的元素居中
inline， inline-block {
text-align: center;
}
p.s. 一般來說分冈，block只估、inline-block 的元素可以設(shè)置寬高，inline 的元素不可以設(shè)置寬高哟玷，但是也有特殊情況狮辽，例如 img標(biāo)簽、input標(biāo)簽等巢寡。
定位 position
position : static
這是默認(rèn)的 position 屬性值
position : relative
相對(duì)定位 ： 相對(duì)定位的元素可以通過 top, left, right, bottom等屬性改變它相對(duì)于其默認(rèn)位置的位置喉脖。
寫一個(gè)質(zhì)能方程式 ：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>宋慶坤的小站</title>
<style>
h1 {
text-align: center;
}
h1 span.square {
position: relative;
top: -15px;
}
</style>
</head>
<body>
<h1>E = MC<span class="square">2</span></h1>
</body>
</html>
質(zhì)能方程式的平方在右上角
position : absolute
絕對(duì)定位 ： 并非真正的絕對(duì)定位，他會(huì)脫離當(dāng)前的位置尋找“靠山” —— 它向上尋找父級(jí)抑月、爺級(jí)树叽、祖宗級(jí)標(biāo)簽 position 不為 static 的標(biāo)簽，依附它的位置谦絮，通過 top, left, right, bottom 來定位它的位置题诵。
實(shí)現(xiàn)一張圖片上的“叉叉”關(guān)閉按鈕
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>宋慶坤的小站</title>
<style>
.picture {
position: relative;
}
.close {
position: absolute;
top: -50px;
left: 430px;
}
</style>
</head>
<body>
<div>
<img class="picture" src="貪玩藍(lán)月.jpg" alt="貪玩藍(lán)月的圖片">
<img class="close" src="叉.jpg" alt="關(guān)閉圖標(biāo)">
</div>
</body>
</html>
廣告上面的關(guān)閉按鈕
position : fixed
可以用來實(shí)現(xiàn)網(wǎng)頁(yè)上的廣告效果，無論你怎么滑動(dòng)窗口层皱，他始終在界面上的固定位置性锭，想躲都躲不掉。
寫一個(gè)特討厭的廣告
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>宋慶坤的小站</title>
<style>
img {
position: fixed;
top: 300px;
left: 0;
bottom: auto;
}
</style>
</head>
<body>
<img src="貪玩藍(lán)月.jpg" alt="廣告">
</body>
</html>
側(cè)邊廣告
boder-radius
用來給 block 塊級(jí)元素增加圓角叫胖，可以用來實(shí)現(xiàn)圓形頭像草冈。
寫一個(gè)圓形頭像
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>宋慶坤的小站</title>
<style>
img {
width: 120px;
height: 120px;
display: block;
margin: 0 auto;
border-radius: 50%;
}
</style>
</head>
<body>
<img src="張家輝.jpg" alt="廣告">
</body>
</html>
圓形頭像
