box-sizing盒子的大小，修改文字种类而保持字体大小不变font-size-adjust,----块级和内联display---盒子阴影box-shadow---对盒子中容纳不下的内容的显示overflow 

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

 

posted @ 2020-06-07 15:06  小白咚  阅读(373)  评论(0)    收藏  举报