CSS04：盒子模型

阿新 • • 發佈：2022-03-20

所有HTML元素可以看作盒子，封裝了周圍的HTML元素，包括邊距、邊框、填充和實際內容。

邊框、內外邊距

粗細、樣式、顏色

總寬度=外邊距+邊框+內邊距+內容寬度

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">
    <title>我的網頁</title>

    <style>

        /*預設標籤如body、ul、ol、p、a等都有預設的邊距值，可以手動清零（*代表所有標籤）*/
        *{
            margin: 0;
            padding: 0;
            text-decoration: none;
        }

        /*將樣式寫進div中，全域性配置*/
        /*margin：外邊距，四個值分別為上右下左順時針旋轉，如果只寫兩個就是上下和左右
                如果將上下外邊距設定為0，左右自動，div塊就會居中對齊
          padding：內邊距
        */
        #box{
            width: 300px;
            border: 1px solid red;
            margin: 0 auto;
        }

        h2{
            background : url("../萬葉.jpg") no-repeat;
            height: 50px;
            line-height: 50px;
            text-align: center;
        }

        form{
            background: green;
        }

        /*子選擇器選擇form下所有div裡的input*/
        form>div>input{
            border: 2px solid #11befa;
        }

        /*子選擇器和偽類選擇器選擇form下第二個div裡的input*/
        form>div:nth-of-type(2) input{
            border: 2px dashed orange;
        }

        /*子選擇器和偽類選擇器選擇form下最後一個div裡的input*/
        form>div:last-child input{
            border: 2px solid red;
        }

    </style>

</head>

<body>

<div id="box">
    <h2>歡迎登入</h2>
    <form action="" id="login">
        <div>
            <span>使用者名稱：</span>
            <input type="text" name="username" placeholder="請輸入使用者名稱">
        </div>
        <div>
            <span>密碼：</span>
            <input type="password" name="password" placeholder="請輸入密碼">
        </div>
        <div>
            <input type="submit" name="login" value="登入">
        </div>
    </form>
</div>

</body>

</html>

圓角邊框和邊框陰影

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">
    <title>我的網頁</title>

    <style>

        /*border-radius：圓角，順時針旋轉，對角線兩兩對應
            如果要變成圓，曲率半徑還要加上邊框寬度5px
        */
        .div1{
            border: 5px solid red;
            background: red;
            width: 100px;
            height: 50px;
            border-radius: 0px 0px 55px 55px;
        }

        .div2{
            border: 5px solid red;
            background: red;
            width: 50px;
            height: 50px;
            border-radius: 0px 0px 0px 55px;
        }

        /*box-shadow：邊框陰影，水平陰影 垂直陰影 模糊距離 陰影距離 顏色
            可新增多個陰影，用","隔開
        */
        img{
            border-radius: 98px;
            box-shadow: 10px 10px 10px red, 10px 10px 10px yellow;
        }

    </style>

</head>

<body>

<div class="div1"></div>
<div class="div2"></div>

<div style="width: 500px; margin: 0 auto">
    <img src="./萬葉.jpg" alt="">
</div>

</body>

</html>