扩展（浮动的细节规则、行高的取值、body的背景）

本是古典何须时尚 2023-03-04 03:27 7阅读 0赞

# 浮动的细节规则 #

*  左浮动的盒子向上向左排列
 *  右浮动的盒子向上向右排列
 *  浮动盒子的定边不得高于上一个盒子的定边
 *  若剩余空间无法放下浮动的盒子，则改盒子向下移动，直到具备足够的空间能容纳盒子，然后再向左或向右移动。

# 行高的取值 #

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style> .container { /* 行高为字体大小的两倍， 先计算像素值，再继承。 */ /* line-height: 2em; */ /* line-height: 200%; */ /* 行高为字体大小的两倍， 先继承，再计算。 */ line-height: 2; } .p1 { font-size: 40px; } .p2 { font-size: 12px; } </style>
    </head>
    
    <body>
        <div class="container">
            <p class="p1">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum quam cumque cupiditate numquam praesentium
                laboriosam nulla facilis vitae tempora. Quam, accusamus ullam pariatur animi quis quo consectetur laborum
                officia veritatis.
            </p>
            <p class="p2">
                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quia vitae dicta soluta facere! Dolorem omnis
                reiciendis delectus sit alias quae ipsam, exercitationem quaerat temporibus enim corrupti quasi sapiente
                obcaecati dolor!
            </p>
        </div>
    </body>
    
    </html>

# body的背景 #

**画布 canvas**

一块区域

特点：

1.  最小宽度为视口宽度
2.  最小高度为视口高度

**HTML元素的背景**

覆盖画布

body{ 
               width: 100px;
               height: 100px;
               border: 2px dashed #333;
               background-color: lightblue;
           }

**BODY元素的背景**

如果HTML元素有背景，BODY元素正常（背景覆盖边框盒）

如果HTML元素没有背景，BODY元素的背景覆盖画布

html{ 
                background-color: pink;
            }
           body{ 
               width: 100px;
               height: 100px;
               border: 2px dashed #333;
               background-color: lightblue;
           }

**关于画布背景图**

1.  背景图的宽度百分比，相对于视口;

body{ 
               width: 3000px;
               height: 100px;
               border: 2px dashed #fff;
               background:url("timg.jpg") no-repeat;
               background-size: 100%;
           }

1.  背景图的高度百分比，相对于网页高度;

body{ 
               width: 3000px;
               height: 100px;
               border: 2px dashed #fff;
               background:url("timg.jpg") no-repeat;
               background-size: 100% 100%;
           }

1.  背景图的横向位置百分比、预设值，相对于视口;

body{ 
               width: 3000px;
               height: 100px;
               border: 2px dashed #fff;
               background:url("timg.jpg") no-repeat;
               background-size: 50% 100%;
               background-position: center top;
           }

1.  背景图的纵向位置百分比、预设值，相对于网页高度；

body{ 
               width: 3000px;
               height: 100px;
               margin-top: 100px;
               border: 2px dashed blue;
               background:url("timg.jpg") no-repeat;
               background-size: 50%;
               background-position: center top;
           }