盒模型常用属性

属性简介

css样式将一个元素以矩形框的形式生成出来，显示在页面上。这个矩形框必须有中心内容区（content），四周有内边距（padding）、边框（border）、外边距（margin）,由里向外，里面一层总被外层包围，这就是盒模型的主要构成。
盒模型的几个常用属性：
1.content：中心内容区，四周区域可选。
2.padding:内边局，透明的，只可设置宽度，不能设置背景色。但默认情况下，内容区的背景色会延伸到padding区域。所以不做处理，我们不易看到内边距部分，影响盒子的大小。
3.border：边框线，可设置框线颜色、类型、大小，如果边框是虚线，从虚线的间隔出可以看到内容区元素的背景色。
4.margin：外边距。背景透明，只能设置宽度。影响盒子的位置。
5.outline:位于边框（border）和外边距(margin)之间，不占用空间，多用于布局开发。

通过创建一个盒模型进行属性举例

<!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:180px;
             }
             .box.box1{
                 /* 设置内边距宽度 */
                padding:15px;
                /* 设置边框宽度 */
                border:2px solid red;color:brown;
                /* 裁剪出内容区背景色，显示出内边距。因为内容区背景色默认会延伸到内边距，所以这样做便于看出内边距在哪里 */
                background-color:brown;
                background-clip:content-box;
            }
            .box.box2{
                /* 设置外边距 */
                margin:20px;
                 /* 设置内边距宽度 */
                padding:15px;
                /* 设置边框宽度 */
                border:2px solid red;
                /* 裁剪出内容区背景色，显示出内边距。因为内容区背景色默认会延伸到内边距，所以这样做便于看出内边距在哪里 */
                background-color:brown;
                background-clip:content-box;
            }
        </style>
    </head>
    <body>
        <div class="box box1"></div>
        <div class="box box2"></div>
    </body>
</html>

元素大小的重新计算：box-sizing的用法

元素的大小的计算方式，在css样式中可以给元素添加一个box-sizing属性来进行改变，默认属性值为box-sizing:conntent-box。当使用默认值时，元素的默认大小会跟随padding、border大小的改变而改变（这里不考虑margin）,属性值改为box-sizing:border-box，无论padding、border的大小怎么改变，元素的整体大小不变。
也就是属性为box-sizing:content-box时，css样式的width属性、height属性值落在盒子的内容区上。属性为box-sizing:border-box,元素的width、height属性值有效范围到盒子的边框（包含边框），这样会使页面元素的计算非常简单，一般用到页面的初始化。

<!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:0px;
            padding:0px;
            /* 设置元素的计算方式，这里为了突出两种使用情况的区别，就不在页面初始化中使用了 */
            /*box-sizing:border-box;*/
        }
        .box{
            width:100px;
            height:100px;
        }
        .box.one{
            padding:20px;
            border:3px solid black;
            background-color:coral;
            background-clip:content-box;
        }
        .box.two{
            padding:30px;
            border:3px solid black;
            background-color:coral;
            background-clip:content-box;
        }
        .box.three{
            padding:20px;
            border:3px solid black;
            background-color:coral;
            background-clip:content-box;
            box-sizing:border-box;
        }
        .box.four{
            padding:30px;
            border:3px solid black;
            background-color:coral;
            background-clip:content-box;
            box-sizing:border-box;
        }
    </style>
</head>
<body>
    <!-- box-sizing默认值为content-box -->
    <div class="box one"></div>
    <!-- 改变padding后的box -->
    <div class="box two"></div>
    <!-- box-sizing默认值为border-box -->
    <div class="box three"></div>
    <!-- 改变padding后的box -->
    <div class="box four"></div>
</body>
</html>

定位元素的水平与垂直对齐技术

css样式中利用position属性（用于将元素转化为定位元素，常用的有绝对定位、相对定位、固定定位）及margin属性的auto（让浏览器自动计算外边距，它会让浏览器尽可能把边距分配给你设置的方向部分）值来实现元素的对齐。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位元素的水平和垂直对齐方式</title>
</head>
<style>
    /* margin:auto 实现元素的水平垂直居中 */
    .box{
        width:300px;
        height:300px;
        background-color: blueviolet;
        position:relative;
    }
    .box1{
        width: 100px;
        height:100px;
        background-color:red;
         /* 水平居中，在它的父容器中居中 ,auto会使浏览器自动计算元素的外边距，这样做就做到左右外边距平均分配了。不能用设置固定值来计算，如果父容器的宽度大小发生改变，你自己计算出然后设置的固定值就不在是居中位置所需的值。在日常中，我们设备宽度的改变就是一个宽度经常改变的例子*/
         margin-left:auto;
         margin-right:auto;
    }
    .continer{
        width:300px;
        height:300px;
        background-color: blueviolet;
        position:relative;
    }
    .box2{
        width: 100px;
        height:100px;
        background-color:red;
        /* 垂直居中，通过观察我们发现，设备屏幕的高度处于无限的状态。所以在高度不确定（不受限）的情况下，我们很难垂直居中，margin-top/bottom的值默认为0，不能通过这种设置来实现垂直居中*/
         /* 通过绝对定位的方式实现垂直居中，我们将元素的父容器转化为一个定位元素 ，让当前元素的上下文充满整个父级*/
         position:absolute;
         /* 左上角开始 */
         top:0;
         left:0;
         /* 右下角结束 */
         right:0;
         bottom:0;
         /* 因为需要设置margin四个方向的属性，margin-left:auto;margin-right:auto;margin-top:auto;margin-bottom:auto;这里我们可以简化写成下面这种形式。 */
         margin:auto;
    }
</style>
<body>
    <div class="box">
        <div class="box1"></div>
    </div>
    <hr/>
    <div class="continer">
        <div class="box2"></div>
    </div>
</body>
</html>

以上主要运用了元素定位的知识，及css样式中的margin属性的特性来实现。

Correcting teacher：

天蓬老师

Correction status：qualified

Teacher's comments：不错, 图很直观

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

flex弹性盒容器相关属性使用案例

2020-07-05 20:08:03