CSS基础-盒子模型（三）

9、CSS盒子模型

9.1 CSS常用长度单位

1、px：像素；

2、em：相对元素font-size的倍数；

3、rem：相对根字体的大小，html标签即是根；

4、%：相对于父元素进行计算。

注意：CSS样式后必须加单位，否则样式会失效。

<style>
    html {
        font-size: 50px;
    }

    /* px（像素单位） */
    #div1 {
        height: 200px;
        width: 200px;
        font-size: 20px;
        background-color: aqua;
    }

    /* em（相对于当前元素font-size的倍数）,若没有font-size，则在祖先元素中寻找，祖先元素中都不存在则采用浏览器默认值 */
    #div2 {
        height: 10em;
        width: 10em;
        font-size: 20px;
        background-color: yellow;
    }

    /* rem（相对于根元素html的font-size）的倍数 */
    #div3 {
        height: 4rem;
        width: 4rem;
        font-size: 20px;
        background-color: blue;
    }


    #div4 {
        height: 200px;
        width: 200px;
        font-size: 20px;
        background-color: gray;
    }

    /* 相对其父元素的百分比 */
    .div5 {
        width: 50%;
        height: 20%;
        font-size: 150%;
        background-color: red;
    }
</style>

9.2 元素的显示模式

• 块元素

  又称为块级元素：

  ​ 1、在页面中独占一行，不会与任何元素共用一行，从上到下依次排列；

  ​ 2、默认宽度：撑满整个父元素；

  ​ 3、默认高度：由元素撑开；

  ​ 4、可以通过CSS属性设置宽高。

9.3 修改元素的显示模式

通过修改CSS中的display属性可以修改元素的默认显示模式：

值	描述
none	隐藏元素
block	作为块级元素显示
inline	作为内联元素显示
inline-block	作为行内块元素显示

<style>
    div {
        height: 400px;
        width: 400px;
        font-size: 40px;
        display: inline-block;
    }
</style>

10、盒子模型的组成部分

CSS会把所有的HTML元素都看成一个盒子，所有样式也是基于这个盒子。

​ 1、margin（外边距）：盒子与外界的距离；

​ 2、border（边框）：盒子的边框；

​ 3、padding（内边距）：紧贴内容的补白区域；

​ 4、content（内容）：元素中的文本或后代元素都是它的内容。

• margin不影响盒子大小，只影响盒子位置。

<style>
    div {
        /* 内容区的宽 */
        width: 400px;
        /* 内容区的高 */
        height: 400px;
        /* 内边距,背景颜色填充到内边距区域 */
        padding: 10px;
        /* 边框,背景颜色填充到边框区域 */
        border: 20px dashed burlywood;
        /* 外边距 */
        margin: 50px;
        font-size: 20px;
        background-color: gray;
    }
</style>

10.1 内容区

CSS属性	功能	属性值
width	设置内容区域的宽度	长度
min-width	设置内容区域的最小宽度	长度
max-width	设置内容区域的最大宽度	长度
height	设置内容区域的高度	长度
min-height	设置内容区域的最小高度	长度
max-height	设置内容区域的最大高度	长度

• width一般不与min-width、max-width使用
• height一般不与min-height、max-height使用

持续更新中！！！

相关代码地址：https://gitee.com/justinc666/front-end/tree/master/CSS/CSS盒子模型