绝对定位元素的布局
目录
left+margin-left+border-left+padding-left+width+padding-right+border-right+margin-right+right=包含块的宽度
开启绝对定位后，水平布局就需要添加left和right值以使等式成立，如果有auto，则自动调整auto的值以使等式满足
可设置auto的值：
- margin
- width
- left
- right
发生情况：
1.无定义auto时，left和right都设置为0时，则会自动调整right。
2.定义left和right为auto时，则会自动调整这两个值。
2）垂直方向布局的等式同理
top+margin-top/bottom+border-top/bottom+padding-top/bottom+width=内容块的高度
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box1{
width: 500px;
height: 500px;
background-color: #bfa;
position: relative;
}
.box2{
width: 100px;
height: 100px;
background-color: orange;
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
效果图：
元素的层级
对于开启了定位元素，可以通过z-index属性来指定元素的层级，z-index需要一个整数作为参数，值越大层级越大越优先显示
若元素的层级一样，则优先显示靠下的元素
祖先的元素再高也不会盖住后代元素
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
font-size: 60px;
}
.box1{
width: 200px;
height: 200px;
background-color: #BBFFAA;
position: absolute;
z-index: 3;
}
.box2{
width: 12.5rem;
height: 200px;
background-color: rgba(255,0,0,.3);
position: absolute;
top: 50px;
left: 50px;
z-index: 2;
}
.box3{
width: 200px;
height: 200px;
background-color: yellow;
position: absolute;
top: 100px;
left: 100px;
z-index: 4;
}
.box4{
width: 100px;
height: 100px;
background-color: orange;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3
<div class="box4">4</div>
</div>
</body>
</html>
效果：
字体族
（补充）字体相关的样式：
color 用来设置字体的颜色
font-size 字体的大小（和font-size相关的单位 1.em 相当于当前元素的一个font-size 2.相对于根元素的一个font-size）
font-family 字体族（字体的格式）
| 可用值 | 作用 |
| serif | 衬线字体 |
| sans-serif | 非衬线字体 |
| monospace | 等宽字体 |
以上都是字体的类别，不同于微软雅黑，浏览器会自动使用该类别
font-family可以指定多个字体
示例：
@font-face {
font-family:Open Sans;
src: url("/fonts/OpenSans-Regular-webfont.woff2");
}图标字体（iconfont）
通过类名来使用图标字体
示例：
<i class="fas fa-bell"></i>
<i class="fas fa-bell-slash"></i>
<i class="fab fa-accessible-icon"></i>
<i class="fas fa-otter"></i>通过伪元素来设置图标字体
- 找到要设置图标的元素通过before或after选中
- 在content中设置字体的编码
- 设置字体样式
fab——font-family:'font awesome 5 brands';
fas——font-family:'font awesome 5 free';
font-weight:900;
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="../fa/css/all.css"/>
<style type="text/css">
li{
list-style: none;
}
li::before{
content: '\f1b0';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
color: blue;
margin-right: 10px;
}
</style>
</head>
<body>
<ul>
<li>aaaaaaa</li>
<li>aaaaaaa</li>
<li>aaaaaaa</li>
<li>aaaaaaa</li>
<li>aaaaaaa</li>
</ul>
</body>
</html>
效果图：
行高（line height）
定义：文字占有的实际高度
可以通过line-height来设置行高，行高可以直接指定大小（px em），也可以直接为行高设置一个整数，如果是整数的话，行高会是字体的指定的倍数
行高经常用来设置文字的行间距
字体框
字体存在的格子，设置font-size实际是在设置字体框的高度、
行高会在字体框的上下框平均分配
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
font-size: 50px;
}
div{
border: 1px red solid;
line-height: 200px;
}
</style>
</head>
<body>
<div> 今天天气真不错 hello今天天气真不错 hello 今天天气真不错 hello 今天天气真不错 hello 今天天气真不错 hello </div>
</body>
</html>
效果图：
字体的简写属性
font可以设置字体相关的所有属性
语法：font：字体大小/行高 字体族 (行高可不写，会有默认值）
font-weight 字重，字体的加粗
可选值：
- normal 默认值，不加粗
- bold 加粗
- 100-900 九个级别
- font-style 字体的风格
可选值：
- normal 正常的
- italic 斜体
文本样式
text-align 文本的水平对齐
可选值：
- left 左侧对齐
- right 右侧对齐
- center 居中对齐
- justify 两端对齐
vertical-align 设置元素垂直对齐的方式
可选值：
- baseline 默认值，基线对齐
- top顶部对齐
- bottom 居中对齐
注意：图片不对齐时，也可以通过此设置
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
font-size: 50px;
border: 1px red solid;
text-align: left;
}
span{
font-size: 20px;
border: 1px blue solid;
vertical-align: baseline;
}
p{
border: 1px red solid;
}
img{
width: 300px;
height: 300px;
}
img{
vertical-align: bottom;
}
</style>
</head>
<body>
<div>今天天气<span>真不错hello</span></div>
<p>
<img src="../img/03.webp">
</p>
</body>
</html>
效果图：
text-decoration 设置文本修饰
可选值：
- none 无
- underline 下划线
- line-through 删除线
white-space 设置网页如何处理空白
可选值：
- normal 正常
- nowrap 不换行
- pre 保留空白
内容想省略时，可向以下这样写
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
p{
text-decoration: overline;
font-size: 50px;
}
.box1{
white-space: nowrap;
width: 200px;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<p>今天天气真不错</p>
<div class="box1">By the time you read this, I hope you will have some good changes. Right now I’m always complaining of my stupid, of not mature and unsocial. But I still had many hopes and dreams about the future, where you’d be, what you’d be doing, and with whom you’d be staying. And I hope that you can live better in the future with your own efforts.I hope you can finish some books in a year, and write down your ideas about those books you like. I hope you can find fun from books again as you did before. Do not indulge in the games. I hope that you can do better in your career. Do not be a sloth!I hope you can develop another hobby and hold on to enjoying it and do not give up on it. I hope that you can try to take connect with your past close friends whom you don’t communicate frequently as before. Be more sociable! Take the chance of going out with friends and have your time! And also you should call home regularly.</div>
</body>
</html>
效果图：
490
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
