标签：box 盒子 border 模型 100px 1px 0px margin

概述

把html元素看作盒子来实现网页布局

一个矩形就是一个盒子，盒子四边叫做边框，内容到边框的距离叫内边距，边框间的距离或者边框与网页边界的距离叫外边距

border

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            /*border-color: white;*/
            border: 1px solid red;/*border的简写法*/
        }
    </style>
</head>
<body>
<div class="box">

</div>
</body>
</html>

margin

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            /*border-color: white;*/
            border: 1px solid red;/*border的简写法*/
            /*margin-left:100px;!*左边距100px*!*/
            /*margin: 100px 0px 0px 100px;!*简写顺序：上右下左，上下&左右各写一个就够了*!*/
            margin: 100px 50px;/*两个值的简写法：上 左*/
        }
    </style>
</head>
<body>
<div class="box">

</div>
</body>
</html>

padding

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            margin: 100px 50px; 
        }
    </style>
</head>
<body>
<div class="box">
<label>hello</label>
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            margin: 100px 50px;
            padding: 10px 20px;/*上 左*/
        }
    </style>
</head>
<body>
<div class="box">
<label>hello</label>
</div>
</body>
</html>

发现边框会被撑大，如果要固定边框大小，可以用box-sizing固定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            margin: 100px 50px;
            padding: 10px 20px;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
<div class="box">
<label>hello</label>
</div>
</body>
</html>

元素边距初始化

.box{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            margin: 0px;
            padding: 10px 20px;
            box-sizing: border-box;
        }

发现即使外边距设成0还是有一些空间，没有贴边。因为浏览器的网页有默认数值的外边距，要想紧贴页面边界可以初始化边距

    *{
            margin: 0px;
            padding: 0px;
        }
        .box{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            margin: 0px;
            padding: 10px 20px;
            box-sizing: border-box;
        }

建议以后开发先进行边距初始化再设置边距

元素水平居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .box{
            width: 800px;
            height: 300px;
            border: 1px solid red;
            margin: 0 auto;/*水平居中*/
        }
    </style>
</head>
<body>
<div class="box">

</div>
</body>
</html>

列表的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .fruits{
            border: 1px solid red;
            width: 800px;
            margin: 0 auto;
        }

        .sports{
            border: 1px solid blue;
            width: 800px;
            margin: 0 auto;
            margin-top: 50px;
        }
    </style>
</head>
<body>
<div class="fruits">
    <h3>水果列表</h3>
    <ul>
    <li>香蕉</li>
    <li>苹果</li>
    <li>鸭梨</li>
</ul>
</div>
<div class="sports">
    <h3>运动列表</h3>
    <ul>
        <li>篮球</li>
        <li>足球</li>
        <li>网球</li>
    </ul>
</div>
</body>
</html>

黑色的点跑外面去了
用list-style:inside

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .fruits{
            border: 1px solid red;
            width: 800px;
            margin: 0 auto;
        }

        .sports{
            border: 1px solid blue;
            width: 800px;
            margin: 0 auto;
            margin-top: 50px;
        }
        .fruits ul,.sports ul{
            list-style: inside;
        }
    </style>
</head>
<body>
<div class="fruits">
    <h3>水果列表</h3>
    <ul>
    <li>香蕉</li>
    <li>苹果</li>
    <li>鸭梨</li>
</ul>
</div>
<div class="sports">
    <h3>运动列表</h3>
    <ul>
        <li>篮球</li>
        <li>足球</li>
        <li>网球</li>
    </ul>
</div>
</body>
</html>

稍微改进下内边距

*{
            margin: 0px;
            padding: 0px;
        }
        .fruits{
            border: 1px solid red;
            width: 800px;
            margin: 0 auto;
            padding-left: 30px;
            padding-top: 20px;
            box-sizing: border-box;
        }

        .sports{
            border: 1px solid blue;
            width: 800px;
            margin: 0 auto;
            margin-top: 50px;
            padding-top: 20px;
            padding-left: 30px;
            box-sizing: border-box;
        }
        .fruits ul,.sports ul{
            list-style: inside;
        }

标签：box,盒子,border,模型,100px,1px,0px,margin
From： https://www.cnblogs.com/ben10044/p/16774027.html

盒子模型

概述