盒模型

width:內容的寬高

height:內容的高

padding:內邊距

border:邊框

border-width 上右下左,一參表四個,二參表上下、左右,三參表上、左右、下

border-style

    none 無
    dotted 點狀
    dashed 虛線
    solid  實線
    double 雙線

border-color

border-left(對左邊框單獨操作)right top bottom

border-shadow 隱藏邊框

border-radius 邊角圓滑,到50%以上爲圓

margin:外邊距

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>盒子模型</title>

    <style type="text/css">
        .lala{
            width: 300px;
            height: 300px;
            padding: 30px;
            background-color: red;
            border: 5px solid yellow;
            margin-top: 20px;
            margin-left: 30px;
            font-style: italic;
        }
    </style>
</head>
<body>
    <div class="lala">
        內容內容內容內容內容內容內容內容內容內容內容內容
    </div>

</body>
</html>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章