<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#div1{
font-family: Arial;
font-size: 16px;
font-size-adjust: 0.60;
}
#div2{
font-family: cursive;
font-size: 16px;
font-size-adjust: 0.80;
}
#div3{
font-family: monospace;
font-size: 16px;
font-size-adjust: 0.57;
}
</style>
</head>
<body>
<!-- 1.修改文字种类而保持字体尺寸不变 font-size-adjust -->
<!-- 2.计算方式 height高度：58 font-size大小100px aspect:0.58-->
<div id="div1">Text sample</div>
<div id="div2">Text sample</div>
<div id="div3">Text sample</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- <div>属于块级元素（占满一行） <span>属于内联元素（不占满一行） -->
<!-- display:inline （或者inline-block 可以设置宽度）设置成内联元素 display:block 块级元素 -->
<!-- display:list-item 让div显示成列表形式 list-style-type:circle 标点是圆形-->
<!-- 对盒子中容纳不下的内容的显示 -->
<!-- overflow: hidden(会将显示不下的文字隐藏) scroll(滚动显示) visible(会超出。和不写是一样的)-->
<!-- overflow-x:hidden overflow-y:scroll; 上下可滑动，左右不可以；如果要左右可滑动，设置不换行white-space:nowrap-->
<!--盒子的阴影和大小计算 -->
<!-- box-shadow:0 0 10px 颜色 不会偏移，只有阴影-->
<div></div>
</body>
<style>
div{
background-color: violet;
box-shadow: 10px 10px 10px gold;
height: 100px;
width: 200px;
}
</style>
</html>
