Html-理解前端开发单位和网络地址
一、常用的基本单位
em
em 是CSS2引入的相对单位，作为字体大小使用时和百分比单位类似，都是相对于最近的父元素设置字体大小，为标签元素设置字体大小为100%和设置字体大小为1em是一样的效果，默认情况下浏览器的字体大小为16px，这样只要浏览器默认的字体大小不变，1em = 16px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
.control {
width: 500px;
height: 200px;
margin: 0 auto;
display: flex;
flex-direction: row;
justify-content: flex-start;
background-color:skyblue;
text-align: center;
}
.d1 {
display: flex;
flex-direction: row;
justify-content: flex-start;
border: 1px solid #424242;
width: 200px;
height: 100px;
font-size: 10px;
background-color: rgb(211, 250, 36);
}
.d2 {
font-size: 2em;
width: 50px;
}
.d4 {
font-size: 20px;
width: 50px;
}
.d3 {
font-size: 2em;
width: 100px;
height: 100px;
}
.d5 {
font-size: 32px;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="control">
<div class="d1">
可可
<!-- 相对单位相对于父元素的大小 -->
<div class="d2">可可</div>
<div class="d4">可可</div>
</div>
<div class="d3">可可</div>
<div class="d5">可可</div>
</div>
</body>
</html>效果图
px
一般我都是使用px来设置我们的文本，因为它比较稳定和精确。但是px本身却存在一些问题，当用户在浏览器我们的页面时，如果他改变了浏览器的字体大小，这时会使我们的Web页面布局被打破。这样的话对于关心网页布局展示的用户来说，这就是一个必须解决的大问题。因此，就提出了使用em来定义Web页面的字体。
rem
rem root em，CSS3新增的相对单位，相比于其他CSS3单位（ch，vw，vh，vmax，vmin）移动端兼容性强，android2.1+，iso4.1+。作用和em类似，唯一的区别就是em是相对父元素的，rem是相对html根节点的，即所有使用rem单位的子元素的字体大小都是相对根节点的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
.control {
width: 500px;
height: 200px;
margin: 0 auto;
display: flex;
flex-direction: row;
justify-content: flex-start;
background-color:skyblue;
text-align: center;
}
.d1 {
display: flex;
flex-direction: row;
justify-content: flex-start;
border: 1px solid #424242;
width: 200px;
height: 100px;
font-size: 10px;
background-color: rgb(158, 238, 169);
}
.d2 {
font-size: 1rem;
width: 50px;
}
.d3 {
font-size: 16px;
width: 50px;
}
</style>
</head>
<body>
<div class="control">
<div class="d1">
<div class="d2">可可</div>
<div class="d3">可可</div>
</div>
</div>
</body>
</html>
vw、vh
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
.contrast{
font-size:32px;
}
.contrast_2{
font-size:48px;
}
</style>
</head>
<body style="font-size:1rem;">
<div style="font-size:2rem" class="first">
<p class="first">可可</p>
<p class="contrast">可可</p>
<div style="font-size:3rem" class="second">
<p class="second">可可</p>
<p class="contrast_2">可可</p>
</div>
<div>
</body>
</html>
max-width min-width
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.d1{
width: 100%;
height: 300px;
background-color: rgb(3, 179, 248);
max-width: 1200px;
min-width: 800px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="d1">
</div>
</body>
</html>总结：
px像素
em相对单位相对于父元素的大小(不推荐使用)
rem相对单位，相对于根元素r=root根配合jsrem布局使用
vw：viewport视窗的宽度 百分百视窗的宽度100vw
vh：viewport视窗的高度百分百视窗的高度100vh
最大的宽度max-width
最小的宽度min-width
最小的高度max-height
最大的高度min-height
如果出现大于或者小于设置的某个单位时，会出现滚动条
二、html文件地址
绝对地址 | 相对地址 |
不会随着文件的路径进行改变，而使路径改变 | 相对于当前的路径，会因为当前文件的位置而使得相对路径改变。随着文件的路径进行改变浏览器会根据当前的位置拼接具体路径 |
正常的绝对路径 |
协议+域名+文件路径+文件名称 |
省略协议 |
//www.mi.com/index.html |
省略协议和域名和端口号 |
/index.html |
当前文件下相对地址 |
href="day_09盒子模型.html |
./day_09盒子模型.html |
返回上一个层级 |
…/day_09盒子模型.html |
返回两个层级进行拼接 |
…/…/day_09盒子模型.html |
绝对地址： 不会随着文件的路径进行改变，而使路径改变
正常的绝对路径：协议+域名+文件路径+文件名称
http://www.mi.com/index.html相对地址： 相对于当前的路径，会因为当前文件的位置而使得相对路径改变。随着文件的路径进行改变浏览器会根据当前的位置拼接具体路径
当前文件下<a href="day_09盒子模型.html"></a>等同于<a href="./day_09盒子模型.html"></a>返回上一个层级../day_09盒子模型.html返回两个层级进行拼接../../day_09盒子模型.html
