居中
1.display 属性为 block 的元素水平居中
block {
margin: 0 auto;
}
2. display 属性为 inline、inline-box 的元素居中
inline， inline-block {
text-align: center;
}
p.s. 一般来说，block、inline-block 的元素可以设置宽高，inline 的元素不可以设置宽高，但是也有特殊情况，例如 img标签、input标签等。
定位 position
position : static
这是默认的 position 属性值
position : relative
相对定位 ： 相对定位的元素可以通过 top, left, right, bottom等属性改变它相对于其默认位置的位置。
写一个质能方程式 ：
<!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>
质能方程式的平方在右上角
position : absolute
绝对定位 ： 并非真正的绝对定位，他会脱离当前的位置寻找“靠山” —— 它向上寻找父级、爷级、祖宗级标签 position 不为 static 的标签，依附它的位置，通过 top, left, right, bottom 来定位它的位置。
实现一张图片上的“叉叉”关闭按钮
<!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="贪玩蓝月.jpg" alt="贪玩蓝月的图片">
<img class="close" src="叉.jpg" alt="关闭图标">
</div>
</body>
</html>
广告上面的关闭按钮
position : fixed
可以用来实现网页上的广告效果，无论你怎么滑动窗口，他始终在界面上的固定位置，想躲都躲不掉。
写一个特讨厌的广告
<!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="贪玩蓝月.jpg" alt="广告">
</body>
</html>
侧边广告
boder-radius
用来给 block 块级元素增加圆角，可以用来实现圆形头像。
写一个圆形头像
<!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>
圆形头像
网友评论