【靜態頁面架構】CSS之盒子模型

時間 2019-12-07

標籤靜態頁面架構 css 盒子模型欄目 CSS 简体版

原文原文鏈接

CSS架構

盒子模型；

之內容區(顯示文本和圖像)架構

內邊距(內容區至邊距的距離)url

邊距(內容區的邊界)spa

外邊距(元素的邊框之間的距離)code

1.邊距；

border屬性；

簡寫屬性用來設置邊距的上(top)右(right)下(bottom)左(left)。寬度，顏色和樣式擴展

<style>
        div{
            width: 200px;
            height: 200px;
            background-color: blue;
            border-right: 5px double darkgray;
            border-bottom: 10px dashed red;
            border-left: 15px dotted lime;
        }
    </style>
</head>
<body>
<div></div>
</body>

盒子的陰影；

以box-shadow屬性設置盒子陰影效果file

offset-x表示陰影的水平方向偏移量；
負值爲左偏移正值爲右偏移im

offset-y表示陰影的垂直方向偏移量；
負值爲左偏移正值爲右偏移qq

<style>
        div{
            width:200px;
            height: 200px;
            background-color: blue;
            box-shadow: 3px 3px 3px black;
            /*設置盒子陰影*/
        }
    </style>
</head>
<body>
<div></div>
</body>

邊框圓角；

以border-radius定義來設置邊距的圓角；直角，圓角仍是橢圓角demo

<style>
        div {
            width: 100px;
            height: 100px;
        }
        #qq {
            background-color:  red;
            border-radius: 25px;
        }
        #ww {
            background-color:  blue;
            border-radius: 50px;
        }
        #ee {
            background-color: lime;
            border-radius: 50px 25px;
        }
        img {
            border-radius: 50px;
        }
    </style>
</head>
<body>
<div id="qq"></div>
<div id="ww"></div>
<div id="ee"></div>
<img src="imgs/26.jpg" width="100px">
</body>

邊框圖像；

以border-image定義來設置在元素的邊框上的圖像樣式

<style>
        div {
            width: 100px;
            height: 100px;
            /*background-color: lightcoral;*/
            border: 30px solid transparent;
            /*
                邊框的圖像 - 相似於背景圖像的設置
                * border-image-source - 設置邊框圖像的路徑
                * border-image-width - 設置邊框圖像的寬度
                * border-image-repeat - 設置邊框圖像的平鋪方式
             */
            border-image: url("https://mdn.mozillademos.org/files/4127/border.png") 30;
        }

    </style>
</head>
<body>
<div>愛新覺羅</div>
</body

2.內邊距；

paddying屬性；

也屬於簡寫屬性用來設置盒子的內邊距上，右，下，左

<style>
            #qq{
                width: 200px;
                height: 200px;
                background-color: blue;


                padding-top: 50px;
                <!---->
                padding-right: 100px;

                padding-bottom: 150px;

                padding-left: 200px;
            }
            #hh{
                width: 200px;
                height: 200px;
                background-color: red;
            }
        </style>
</head>
<body>
<div id="qq">
    <div id="hh"></div>
</div>
</body>

3.外邊距；

上外邊距和左外邊距；
以margin-left設置元素的水平方向的位置
值爲正數，當前元素向右移動
值爲負數，當前元素向左移動
margin-top設置元素垂直方向的位置
值爲正數，當前元素向下移動
值爲負數，當前元素向上移動

上外邊距和右外邊距

以margin-bottom設置下一個元素的位置
值爲正數，下一個兄弟元素向下移動
值爲負數，下一個兄弟元素向上移動
margin-right設置下一個元素的位置
值爲正數，下一個兄弟元素向右移動
值爲負數，下一個兄弟元素向左移動

<style>
        div {
            display: inline-block;
        }
        #d1 {
            width: 200px;
            height: 200px;
            background-color: lightcoral;
            /*
                margin-bottom 下外邊距控制塊級元素的下一個兄弟元素的位置
                * 若是值爲正數的話，下一個兄弟元素向下移動
                * 若是值爲負數的話，下一個兄弟元素向上移動
             */
            /*margin-bottom: -100px;*/
            /*
                margin-right 右外邊距控制內聯元素或行內塊級元素的下一個兄弟元素的位置
                * 若是值爲正數的話，下一個兄弟元素向右移動
                * 若是值爲負數的話，下一個兄弟元素向左移動
             */
            /*margin-right: -5px;*/
        }
        #d2 {
            width: 200px;
            height: 200px;
            background-color: yellowgreen;

            margin-left: -5px;
        }

    </style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>

外邊距重疊；

以設置兩個相鄰的元素的外邊距，第一個設置下外邊距第二個設置上外邊距

<style>
        #qq{
            width: 200px;
            height: 200px;
            background-color: blue;
            margin-bottom: 100px;
            /*id爲ww的div元素向下移動100px*/
        }
        #ww{
            width: 200px;
            height: 200px;
            background-color: red;
            margin-top: 200px;
            /*id爲ww的div元素向下移動200px*/
        }
    </style>
</head>
<body>
<div id="qq"></div>
<!--<p>愛新覺羅</p>-->
<div id="ww"></div>
</body>

外邊距傳遞；

以設置兩個元素師父子元素，當子元素設置上外邊距，該上邊距會在父級元素內出現

<style>
        #qq{
            width: 200px;
            height: 100px;
            background-color: blue;
            /*設置背景顏色*/
            padding-top: 100px;
            /*爲子級元素設置上邊距*/
        }
        #ww{
            width:100px;
            height: 100px;
            background-color: red;
            /*設置背景顏色*/
        }
    </style>
</head>
<body>
<div id="qq">
    <!--必須是父級與子級關係的元素-->
    <div id="ww"></div>
</div>
</body>

內容水平居中；

以margin: 0 auto；父級div設置在元素的水平居中

<style>
        p {
            /*該屬性只對文本內容水平對齊*/
            text-align: center;
            /*文本水平方向居中*/
        }
        div{
            width: 100px;
            height: 100px;
            background-color: blue;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<p>星際戰甲</p>
</body>

4.盒子模型；

塊級元素盒子模型；

可設置寬高，設置高度爲其中內容的高度

<style>
        div{
            width: 200px;
            height: 200px;
            background-color: blue;
            border: 1px solid black;
            /*設置邊框的樣式*/
            padding: 50px;
            /*設置內邊距*/
            margin: 50px;
            /*設置外邊距*/
        }
    </style>

</head>
<body>
<div></div>
</body>

內塊級元素盒子模型；

是不可設置寬和高，元素的大小事其中內容撐起

<style>
        span{
            width: 200px;
            height: 200px;
            background-color: red;
            border: 1px solid black;
            padding: 30px;
            /*水平方向內邊距是有效；設置文本內容的水平方向位置*/
            /*垂直方向內邊距是有效；文本內容位置沒有變，而內邊距會向上或向下擴展*/
            margin: 30px;
            /*垂直方向上或下的外邊距是無效的
              而水平方向的外邊距是有效的*/
        }
    </style>
</head>
<body>
<span>星際戰甲</span>
</body>

行內塊級元素盒子模型；

不自動換行，可設置寬高；

<style>
        div{
            width: 100px;
            height: 100px;
            border: 1px solid black;
            padding: 30px;
            /*設置內邊距*/
            margin: 30px;
             /*設置外邊距*/
        }
        #qq{
            background-color: red;
        }
        #hh{
            background-color: blue;
        }
    </style>
</head>
<body>
<div id="qq"></div>
<div id="hh"></div>
</body>

box-sizing屬性；

以box-sizing屬性設置盒子模型；
content-box；爲默認值爲標準盒子模型
設置爲內容區；內邊距；邊框；外邊框
border-box；爲怪異盒子模型
設置盒子的大小；外邊距

#qq {
            width: 200px;
            height: 200px;
            /*
                默認值，標準盒子模型
                * 實際的寬度 = width + padding-left + padding-right + border-left + border-right
                * 實際的高度 = height + padding-top + padding-bottom + border-top + border-bottom
             */
            box-sizing: content-box;

            border: 10px solid black;
            <!--設置邊框-->
            padding: 50px;
            /*設置內邊距*/
            margin: 50px;
            /*設置外邊距*/
            background-color: lightcoral;
        }
        #hh {
            width: 200px;
            height: 200px;
            /*
                怪異盒子模型
                * 實際寬度 = width
                * 實際高度 = height
             */
            box-sizing: border-box;

            border: 10px solid black;
            <!--設置邊框-->
            padding: 50px;
            /*設置內邊距*/
            margin: 50px;
            /*設置外邊距*/
            background-color: green;
        }
    </style>
</head>
<body>
<div id="qq"></div>
<div id="hh"></div>