构建静态页面 之 [ 盒子模型 ]

盒子模型

描述

每一个元素都可以叫做是盒子模型
盒子模型的组成
- 内容区 - 元素中内容（文本、图片、等等）
- 内边距 - 内容区到边框的距离
- 边距 - 内容区的边界
- 外边距 - 盒子与盒子之间的距离

border属性

表示设置元素的边框
border属性是简写属性,可以分为
- border-width - 表示边框的宽度
- border-style - 表示边框的样式
- border-color - 表示边框的颜色
- 简写顺序: 边框宽度边框样式边框颜色
border属性也可以按照上、右、下、左四个方向进行划分来分别设置
- 分别设置边框时，设置的顺序固定不变的：上、右、下、左

<head>
    <meta charset="UTF-8">
    <title>边框</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: blueviolet;

            /*
                border属性 - 表示设置边框
                 * 简写属性,可以分为
                  * border-width - 表示边框的宽度
                  * border-style - 表示边框的样式
                  * border-color - 表示边框的颜色
                 * 简写顺序: 边框宽度 边框样式 边框颜色
             */
            border: 10px solid black;

            /* border属性也可分开进行设置 */
            border-width: 10px;
            border-style: solid;
            border-color: black;

            /*
                border属性也可以按照上、右、下、左四个方向进行划分来分别设置
                * border-top - 表示设置上边框
                * border-right - 表示设置右边框
                * border-bottom - 表示设置下边框
                * border-left - 表示设置左边框
             */
            border-top: 10px solid black;
            border-right: 15px double gray;
            border-bottom: 20px dashed green;
            border-left: 25px dotted darkgreen;

            /*
                在设置边框时根据属性值个数不同，设置的效果也不同
                * 只有一个值时，四个方向同时设置
                * 再有两个值时，第一个值表示上下、第二个值表示左右
                * 再有三个值时，第一个值表示上、第二个值表示左右、第三个值表示下
                * 再有四个值时，第一个值表示上、第二个值表示右、第三个值表示下、第四个值表示左
                * 在设置边框时，设置的顺序固定不变的：上、右、下、左
             */
            border-width: 10px 20px 30px 40px;
            border-style: solid;
            border-color: black;
        }
    </style>
</head>
<body>
<div></div>
</body>

border-radius属性

表示设置元素边框的圆角
属性值表示为圆的半径
当属性值等于元素宽度的一半时,会得到一个圆形
也可以写多个属性值,顺序为: 左上角右上角右下角左下角

<head>
    <meta charset="UTF-8">
    <title>边框的圆角</title>
    <style>
        div {
            width: 200px;
            height: 200px;
        }
        /*
            border-radius属性 - 表示设置边框圆角
             * 属性值表示为圆的半径
             * 当属性值等于元素宽度的一半时,会得到一个圆形
             * 也可以写多个属性值,顺序为: 左上角 右上角 右下角 左下角
         */
        #d1 {
            background-color: red;
            /* 设置圆角 */
            border-radius: 100px;
        }
        #d2 {
            background-color: green;
            /* 设置不规则圆角 */
            border-radius: 25px 150px 25px 0;
        }
    </style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>

padding属性

表示设置元素内边距
内边距可以分上、右、下、左、四个方向进行设置
- 也可以同时写多个值分别设置，设置的顺序固定不变的：上、右、下、左
内边距无法设置颜色，会显示与背景相同的颜色
设置内边距时会改变元素本身的大小

<head>
    <meta charset="UTF-8">
    <title>内边距</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: red;

            /*
                padding属性 - 表示设置内边距
                * 内边距可以分四个方向进行设置
                 a. padding-top
                 b. padding-right
                 c. padding-bottom
                 d. padding-left
                * 也可以同时写多个值分别设置
                 a. 只有一个值时，四个方向同时设置
                 b. 再有两个值时，第一个值表示上下、第二个值表示左右
                 c. 再有三个值时，第一个值表示上、第二个值表示左右、第三个值表示下
                 d. 再有四个值时，第一个值表示上、第二个值表示右、第三个值表示下、第四个值表示左
                * 设置的顺序固定不变的：上、右、下、左
                * 内边距无法设置颜色，会显示与背景相同的颜色
                * 设置内边距时会改变元素本身的大小
             */
            padding: 10px 20px 30px 40px;
        }
    </style>
</head>
<body>
<div></div>
</body>

margin属性

表示设置外边距
外边距也可以分上、右、下、左、四个方向来分别进行设置
在设置上外边距和左外边距时会影响到元素本身的显示位置
在设置下外边距和右外边距时会影响到下一个相邻元素的显示位置

<head>
    <meta charset="UTF-8">
    <title>外边距</title>
    <style>
        div {
            width: 200px;
            height: 200px;
        }
        /*
            margin属性 - 表示设置盒子模型的外边距
            * 外边距也可以分上、右、下、左、四个方向来分别进行设置
             * 在设置上外边距和左外边距时会影响到元素本身的显示位置
             * 在设置下外边距和右外边距时会影响到下一个相邻元素的显示位置
         */
        #d1 {
            background-color: red;
            /* 设置上外边距和左外边距 - 会改变元素的显示位置 */
            margin-top: 100px;
            margin-left: 100px;
        }
        #d2 {
            background-color: blue;
            /* 外边距设置负值时会向相反的方向移动 */
            margin-top: -100px;

            /* 设置下外边距会改变下一个相邻元素的显示位置 */
            margin-bottom: 100px;
        }
        #d3, #d4 {
            display: inline-block;
        }
        #d3 {
            background-color: green;
            /* 外边距设置负值时会向相反的方向移动 */
            margin-right: -50px;
        }
        #d4 {
            background-color: blueviolet;
        }
    </style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
</body>

外边距的重叠

两个垂直方向排列的相邻元素分别设置上外边距和下外边距时，显示出的效果并不是两个数值相加，而是只显示两个数值中大的
在水平方向排列的相邻元素分别设置左外边距和右外边距时，不会出现外边距重叠的效果

<head>
    <meta charset="UTF-8">
    <title>外边距的重叠</title>
    <style>
        /*
            外边距的重叠
            * 表示两个垂直方向排列的相邻元素分别设置上外边距和下外边距
              显示出的效果并不是两个数值相加
              而是只显示两个数值中数值大的

            * 在水平方向排列的相邻元素分别设置左外边距和右外边距
              不会出现外边距的重叠效果
         */

        /* 垂直方向排列的相邻元素 */
        #top {
            width: 200px;
            height: 200px;
            background-color: red;
            /* 设置下外边距 */
            margin-bottom: 100px;
        }
        #bottom {
            width: 200px;
            height: 200px;
            background-color: blue;
            /* 设置上外边距 */
            margin-top: 200px;
            /* 显示结果：两个元素之间的间距为 200px（应为300px） */
        }

        /* 设置水平方向排列的相邻元素 */
        #left, #right {
            display: inline-block;
        }
        #left {
            width: 200px;
            height: 200px;
            background-color: green;
            /* 设置右外边距 */
            margin-right: 100px;
        }
        #right {
            width: 200px;
            height: 200px;
            background-color: blueviolet;
            /* 设置左外边距 */
            margin-left: 200px;
            /* 显示结果：两个元素之间的间距为 300px */
        }
    </style>
</head>
<body>
<div id="top"></div>
<div id="bottom"></div>
<div id="left"></div>
<div id="right"></div>
</body>

外边距的传递

表示在父子结构中，如果子级设置上外边距，父级也会一起调整显示位置
外边距传递的效果只会在父子结构中子级设置“上外边距”才会出现

解决方法

通过为父级设置上内边距来调整子级想要显示的位置
- 因为：子级的上外边距等于父级的上内边距
- 注意：在设置内边距时会改变元素本身的显示大小

<head>
    <meta charset="UTF-8">
    <title>外边距的传递</title>
    <style>
        /*
            在父子结构中，如果子级设置上外边距，父级也会一起调整显示位置
             * 解决方法：通过为父级设置上内边距来调整子级想要显示的位置
              * 因为：子级的上外边距 == 父级的上内边距
             * 注意：在设置内边距时会改变元素本身的显示大小
             * 外边距传递的效果只会在父子结构中子级设置“上外边距”才会出现
         */
        #fu {
            width: 200px;
            /* height: 200px; - 调整显示大小，让元素正常显示 */
            height: 100px;
            background-color: red;
            /* 父级设置内边距调整子级的显示位置 - 注意调整过元素的显示大小 */
            padding-top: 100px;
        }
        #zi {
            width: 100px;
            height: 100px;
            background-color: blue;
            /* 子级设置上外边距时父级也会一同更改显示位置 */
            margin-top: 100px;
        }
    </style>
</head>
<body>
<div id="fu">
    <div id="zi"></div>
</div>
</body>

元素的水平居中

外边距也可以用来实现元素的水平方向居中
- margin: 0 auto; - 固定写法
- auto - 表示自适应
外边距水平方向的属性值必须为 auto ，垂直方向的属性值可以根据需求来设置
在设置时，目标元素的宽度不能等于父级元素的宽度

<head>
    <meta charset="UTF-8">
    <title>元素水平居中</title>
    <style>
        /*
            外边距也可以用来实现元素的水平方向居中
             * margin: 0 auto; - 固定写法
             * auto - 表示自适应
             * 外边距水平方向的属性值必须为 auto ， 垂直方向的属性值可以根据需求来设置
             * 在设置时，目标元素的宽度不能等于父级元素的宽度
         */
        div {
            width: 500px;
            height: 200px;
            background-color: yellowgreen;
            /* 利用外边距实现元素水平方向的居中效果 */
            margin: 50px auto 50px;
        }
    </style>
</head>
<body>
<div></div>
</body>

box-shadow属性

表示设置盒子模型的阴影
属性值有
- 水平方向偏移量
- 垂直方向偏移量
- 模糊度
- 颜色

<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: red;
            /*
                盒子模型 - 每一个元素都可以叫做是盒子模型
                 * 盒子模型的组成：
                    a.内容区 - 元素中内容（文本、图片、等等）
                    b.内边距 - 内容区到边框的距离
                    c.边距 - 内容区的边界
                    d.外边距 - 盒子与盒子之间的距离
             */
            /* box-shadow属性 - 表示设置盒子阴影 */
            box-shadow: 10px 10px 3px blue, -10px -10px 3px green;
        }
    </style>
</head>
<body>
<div></div>
</body>

box-sizing属性

表示改变盒子模型的类型

content-box属性值

表示标准盒子类型（默认值）
1. 会改变元素的显示大小
2. 最终显示宽度 = 宽度 + 内边距（左、右） + 边框（左、右）
3. 最终显示高度 = 高度 + 内边距（上、下） + 边框（上、下）

border-box属性值

表示怪异盒子类型
1. 不会改变元素的显示大小
2. 最终显示宽度 = 宽度
3. 最终显示高度 = 高度

<head>
    <meta charset="UTF-8">
    <title>盒子模型的类型</title>
    <style>
        /*
            box-sizing属性 - 表示改变盒子的类型
            * content-box属性值 - 表示标准盒子类型（默认值）
             * 会改变元素的显示大小
             * 最终显示宽度 = 宽度 + 内边距（左、右） + 边框（左、右）
             * 最终显示高度 = 高度 + 内边距（上、下） + 边框（上、下）
            * border-box属性值 - 表示怪异盒子类型
             * 不会改变元素的显示大小
             * 最终显示宽度 = 宽度
             * 最终显示高度 = 高度
         */
        #d1 {
            width: 200px;
            height: 200px;
            background-color: red;
            /* 标准盒子类型 */
            box-sizing: content-box;
            border: 10px solid black;
            padding: 50px;
            /* 最终显示：320 X 320 */
        }
        #d2 {
            width: 200px;
            height: 200px;
            background-color: blue;
            /* 怪异盒子类型 */
            box-sizing: border-box;
            border: 10px solid black;
            padding: 50px;
            /* 最终显示：200 X 200 */
        }
    </style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>

构建静态页面之 [ 盒子模型 ]

盒子模型

描述

border属性

border-radius属性

padding属性

margin属性

外边距的重叠

外边距的传递

解决方法

元素的水平居中

box-shadow属性

box-sizing属性

content-box属性值

border-box属性值

蔡志远

引用和评论

Ajax 之 [ jQuery中的Ajax ]

网页设计的垂直居中

CSS团队协作规范

前端开发工具

CSS 现在终于支持高度 auto 过渡动画了

纯CSS电梯导航！借助滚动驱动动画来实现内容和导航联动

Jerry和您聊聊Chrome开发者工具

构建静态页面 之 [ 盒子模型 ]

盒子模型

描述

border属性

border-radius属性

padding属性

margin属性

外边距的重叠

外边距的传递

解决方法

元素的水平居中

box-shadow属性

box-sizing属性

content-box属性值

border-box属性值

蔡志远

引用和评论

Ajax 之 [ jQuery中的Ajax ]

网页设计的垂直居中

CSS团队协作规范

前端开发工具

CSS 现在终于支持高度 auto 过渡动画了

纯CSS电梯导航！借助滚动驱动动画来实现内容和导航联动

Jerry和您聊聊Chrome开发者工具

构建静态页面之 [ 盒子模型 ]