1.盒模型的常用元素

序号	代码	定义
1.	`margin`	外边距
2.	`padding`	内边距
3.	`border`	边框
4.	`top`	内外边距边框属性，表示上边距
5.	`left`	内外边距边框属性，表示左边距
6.	`bottom`	内外边距边框属性，表示下边距
7.	`right`	内外边距边框属性，表示表示右边距
8.	`box-sizing`	重新计算边框大小

盒模型代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒/框模型</title>
    <style>
        .box{
            /* 宽、高是内容区 */
            width:200px;
            height:200px;
        }
        .box.one{
            padding:10px;
            border:2px solid #000;
            background-color:lightgreen;
            background-clip:content-box;
            margin-bottom:20px;
        }
        .box.two{
            padding:10px;
            border:2px solid #000;
            background-color:lightcoral;
            /* background-clip规定背景的绘制区域 */
            background-clip:content-box;
            margin-top:30px;
        }
        .box.parent{
            background-color:lightblue;
            /* 相对定位是相对自己原来的位置进行移动，这个元素在文档流的原位置不释放 */
            position:relative;
            left:30px;
            top:50px;
        }
        .son{
            width:100px;
            height:100px;
            background-color:violet;
            /* 绝对定位会找到这个元素有定位的上级，按照上级的位置进行移动 */
            position:absolute;
            /* 固定定位，忽略所有的定位上级，只针对body进行定位移动 */
            position:fixed;
            left:60px;
            top:80px;
        }
    </style>
</head>
<body>
    <!-- 两个盒子之间外边距会折叠，会从两个盒子的border边开始计算距离 -->
    <div class="box one"></div>
    <div class="box two"></div>
    <hr />
    <div class="box parent">
        <div class="son"></div>
    </div>
</body>
</html>

2.box-sizing属性的理解

border-box值是以边框进行计算盒子大小，盒子大小等于宽高值；
content-box值是以内容进行计算盒子大小，盒子大小等于margin+border+padding+宽高；

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义元素大小的计算方式</title>
    <style>
        /* 样式初始化，页面布局常见，会经常用到 */
        *{
            margin:0;
            padding:0px;
            box-sizing:border-box;
        }
        .box{
            background-color:violet;
            width:200px;
            height:200px;
            border:3px solid #000;
            padding:10px;
            background-clip:content-box;
            /* box-sizing重新计算边框大小 */
            /* content-box是默认值，意思是以内容为准重新计算边框大小 */
             box-sizing:content-box; 
             /* box-sizing:border-box;  */
        } 
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

盒子元素的水平垂直居中定位

因为显示器都是有宽度的，很容易让元素水平居中。但是网页高度可以往下滑动，不容易垂直居中。
我们要将元素进行水平垂直居中，就需要定位盒子的4个角，让元素以4个角进行定位居中。

演示代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>margin:auto块元素的垂直居中</title>
    <style>
        .content{
            width:500px;
            height:600px;
            background-color:lightblue;
            position:relative;
        }
        .item{
            width:100px;
            height:100px;
            background-color:red;
            position:absolute;
            /* 设置水平垂直都居中 从上边顺时针到右边结束*/
            top:0;
            left:0;
            bottom:0;
            right:0px;
            margin:auto;
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="item"></div>
    </div>
</body>
</html>

盒模型的大小定位的计算理解

1.盒模型的常用元素

盒模型代码演示

2.box-sizing属性的理解

代码演示

盒子元素的水平垂直居中定位

演示代码

相关文章