H5零基础-盒子模型简介

所谓盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边框、外边距、内边距 和 实际内容。

image.png

1.边框border

border可以设置元素的边框。边框由三部分组成：边框宽度(粗细)、边框样式、边框颜色。

语法：

border : border-width || border-style || border-color 

属性	作用
border-width	定义边框粗细，单位是px
border-style	边框的样式
border-color	边框颜色

示例代码：

<style>
        div {
            width: 300px;
            height: 200px;
            border-width: 10px;
            /* solid:实线边框 dashed:虚线边框 dotted:点线边框*/
            border-style: solid;
            border-color: pink;
            /* 边框简写 */
            /* border: 10px solid pink; */
        }
</style>

<div>盒子模型</div>

运行效果：

image.png

2.内边距 padding

padding属性用于设置内边距，即边框与内容之间的距离。

属性	作用
padding-left	左内边距
padding-right	右内边距
padding-top	上内边距
padding-bottom	下内边距

示例代码：

   <style>
        div {
            /* 如果盒子本身没有width/height属性，则此时padding不会撑开盒子大小 */
            width: 200px;
            height: 200px;
            background-color: pink;
            padding-left: 20px;

        }
    </style>

    <div>盒子模型内边距盒子模型内边距盒子模型内边距盒子模型内边距</div>

运行效果：

image.png

3.外边距 margin

margin 属性用于设置外边距，即控制盒子和盒子之间的距离。

属性	作用
margin-left	左外边距
margin-right	右外边距
margin-top	上外边距
margin-bottom	下外边距

示例代码：

  <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .one-div {
            margin-bottom: 20px;
        }
    </style>

    <div class="one-div">div1</div>
    <div>2</div>

运行效果：

image.png

margin 扩展
外边距让块级盒子水平居中： margin: 0 auto;
行内元素或者行内块元素水平居中，给其父元素添加text-align: center;即可。

END !