<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>