Day16盒子模型

盒子模型的基本组成
image

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            padding: 20px;
            margin: 50px;
            border: 1px solid #000;
            background-color: pink;

        }
    </style>
</head>
<body>
    <div>
        安河桥北
    </div>
</body>
</html>

image

成分详解:
1.边框线
image
image

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>边框线</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 实线 */
            /* border: 1px solid #000; */
            /* 虚线 */
            /* border: 5px dashed #821d1d; */
            /* 点线 */
            /* border: 3px dotted #000; */
            border-top: 2px solid #bd8080;
            border-left: 3px dashed #9a3131;
            border-right: 4px dotted #830a0a;
            border-bottom: 5px solid orange;
        }
    </style>
</head>
<body>
    <div>哈基米哦南北绿豆</div>
</body>
</html>

image

2.内边框
image
image

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内边框</title>
    <style>
        div{
        width: 200px;
        height: 200px;
        background-color: red;
        /* padding-top: 20px; */
        /* padding-bottom: 30px; */
        /* padding-left: 20px; */
        /* padding-right: 50px; */


        /* 多值写法 */
        /* 四值  上右左下 顺指针顺序*/
        /* padding: 10px 20px 30px 40px; */
        /* 三值 上 左右 下 */
        /* padding: 10px 20px 10px; */
        /* 两值 上下 左右 */
        padding: 20px 30px;

        /* 记忆方法，顺指针转一圈，若是当前方向没有数值，则与对面方向相同 */
        }
    </style>
</head>
<body>
    <div>鼓楼</div>
</body>
</html>

image

3.盒子模型的尺寸运算
image

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型的尺寸</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 设置padding与border时会导致盒子的尺寸随之变大 */
            /* 有两种方法可以保持原来的尺寸 */
            /* 1.手动减法 */
            /* width: 160px; */
            /* height: 160px; */
            padding: 20px;

            /* 内减模式:无需手动计算，设置后在应用padding和border不会再撑大盒子； */
            box-sizing: border-box;
            border: 40px;
        }
    </style>
</head>
<body>
    <div>div标签</div>
</body>
</html>

image

4.外边距（版心居中）
image

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外边距及版心居中</title>
    <style>
        div{
            width: 1000px;
            height: 200px;
            background-color: pink;
            /* 设置外边距不会撑大盒子 */
            /* margin: 50px; */
            /* margin-left: 100px; */
            /* margin-right: 200px; */

            /* 让盒子版心水平居中 */
            /* 如果没有0，则会使得垂直方向上也是居中的，而大部分情况只需要水平居中 */
            /* 且版心居中的一个条件是盒子是要有宽度的，否则无法实现 */
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div>div标签</div>
</body>
</html>

image

posted @ 2025-11-09 23:47  冰涿  阅读(2)  评论(0)    收藏  举报