CSS学习笔记 —— 盒模型

最新推荐文章于 2024-05-28 20:45:00 发布

Libra0809

最新推荐文章于 2024-05-28 20:45:00 发布

阅读量173

点赞数

分类专栏：前端学习笔记文章标签： css

本文链接：https://blog.csdn.net/bobbi001/article/details/117687610

版权

前端学习笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文是作者本人学习过程中的笔记总结，如若文中有不正确，或需要补充的地方，欢迎在评论区中留言。

1. 概述

盒模型又叫框模型，包含了五个用来描述盒子位置、尺寸的属性
分别是宽度width、高度height、内边距padding、边框border、外边距margin
盒模型的属性中，根据不同属性的效果，可以划分区域：
书写元素内容区域：width + height
盒子可以实体化的区域： width + height + padding + border
盒子实际占位的区域：width + height + padding + border + margin

2. 宽度

width，设置可以添加元素内容的区域的宽度

属性值：

特殊应用：

如果一个元素不添加 width 属性，默认属性值为 auto，不同的浏览器会根据其特点自动计算出实际宽度
例如： <div> 元素等独占一行，其 width 属性的值会自动撑满父元素的 width 区域
如果是 <span> 元素等不需要独占一行的，其 width 属性的值是元素内容自动撑开的宽度
<body> 元素比较特殊，不需要设置 width 属性，宽度会自动适应浏览器窗口的宽度

HTML代码：

<style>
    div {
        height: 100px;
        border: 2px solid pink;
        margin: 5px;
    }
    .one {
        width: 100px;
    }
    .two {
        width: auto;
    }
    .three {
        width: 30%;
    }
</style>

<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>

显示效果：

3. 高度

height，设置可以添加元素内容的区域的高度

属性值：

特殊应用：

如果一个元素不添加 height 属性，默认属性值为 auto
浏览器会自动计算出实际高度，也就是内部元素内容自动撑开的高度
元素的高度自适应内部内容的高度

HTML代码：

<style>
    body {
        height: 600px;
    }
    div {
        width: 100px;
        border: 2px solid pink;
        margin: 5px;
    }
    .one {
        height: 100px;
    }
    .two {
        height: auto;
    }
    .three {
        height: 30%;
    }
</style>

<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>

显示效果：

4. 内边距

padding，设置元素的边框内部到宽高区域之间的距离
该区域可以加载背景，但不能书写内容
根据方向的不同，可以划分为四个方向的单一属性：padding-top, padding-right, padding-bottom, padding-left
为了方便，可以简写为 padding： top right botton left ；注意顺序不能错
另外，还有单值法、二值法和三值法两种形式
单值法：padding: all
二值法：padding: top&bottom right&left
三值法：padding: top right&left bottom

HTML代码：

<style>
    * {
        margin: 0;
        padding: 0;
    }
    div {
        width: 100px;
        height: 100px;
        border: 2px solid pink;
        margin: 5px;
        display: inline-block;
    }
    .one {
        padding: 10px;
    }
    .two {
        padding: 5px 10px;
    }
    .three {
        padding: 5px 10px 0;
    }
    .four {
        padding: 5px 6px 7px 8px;
    }
</style>

<div class="one">单值法单值法单值法单值法单值法单值法单值法单值法单值法单值法单值法单值法</div>
<div class="two">二值法二值法二值法二值法二值法二值法二值法二值法二值法二值法二值法二值法</div>
<div class="three">三值法三值法三值法三值法三值法三值法三值法三值法三值法三值法三值法三值法</div>
<div class="four">正常简写四值法正常简写四值法正常简写四值法正常简写四值法正常简写四值法</div>

显示效果：

说明：

图中上面是未设置padding的样子，下面是设置了padding的样子。

可以看到下面的盒子大小变得不一样了，这是因为padding是会计算在盒子实际占位区域中的，

即设置padding值，会把盒子撑大。

5. 边框

border，设置内边距外面的边界区域，作为盒子实体化的最外层
属性值：由三个值组成，分别是线的宽度、线的形状、线的颜色
border属性是一个复合属性，可拆解成三个单一书写：border-width, border-style, border-color
还可以针对某个方向进一步细分，如 border-top-style设置上边框线条的形状

线的形状：

HTML代码：

<style>
    * {
        margin: 0;
        padding: 0;
    }
    div {
        width: 100px;
        height: 100px;
        background-color: #ccc;
        margin: 5px;
        display: inline-block;
    }
    .one {
        border-style: none;
    }
    .two {
        border: 5px solid pink;
    }
    .three {
        border: 5px dashed orange;
    }
    .four {
        border: 5px dotted green;
    }
    .five {
        border: 5px double blue;
    }
</style>

<div class="one">无边框</div>
<div class="two">实线</div>
<div class="three">虚线</div>
<div class="four">点状虚线</div>
<div class="five">双实线</div>

显示效果：