盒模型的认识

我是打工人

已于 2022-06-06 21:02:11 修改

阅读量78

点赞数

文章标签： html

于 2022-03-08 08:06:00 首次发布

本文链接：https://blog.csdn.net/szydqq/article/details/123306497

版权

本文详细介绍了CSS盒模型的概念，包括内容、内边距、边框和外边距，并通过实例展示了它们如何影响元素间的位置关系。此外，文章还讨论了margin和padding的使用场景、属性设置以及可能遇到的bug。同时，讲解了边框的样式设定和绘制三角形的技巧。最后，总结了盒模型的计算方式以及如何清除标签自带间距和实现元素居中。

摘要由CSDN通过智能技术生成

1. 标签 => 写布局

- css => 美化页面

- 文本属性 => 设置字体

- 列表属性 => 列表

- 边框属性 => 边框

- 背景属性 => 背景颜色、图片

- 表格属性 => 设置表格

- 盒模型 => 调元素之间的间距

2.盒模型概念: 盒模型就是用来设置多个元素之间的位置关系(父子、同级元素)

组成部分: 内容、内边距、边框、外边距

- 内容对应的快递模型中快递物品 content =====>自己定义的width和height就是内容区的宽度和高度

- 内边距对应的快递模型中泡沫 padding====>内容到盒子边的距离

- 边框对应的快递模型中快递盒 border

- 外边距对应的快递模型中多个快递之间的间距 margin===>盒子与盒子之间的距离

3.属性：padding内边距

①padding内边距的使用

- padding通常是用来设置父级与子级元素之间的间距

- padding设置的位置

- 通常在父级元素上设置 padding会将当前容器撑开为了不影响布局需要减去相应的padding值

- padding也可以给子级元素添加设置的是单个子级元素移动间距

②padding内边距的属性值设置

- 属性值可以设置成数值加单位

- 一个值:上下左右的值是一样的

- 两个值:上下和左右

- 三个值:上和左右和下

- 四个值: 上右下左

③padding方向

- 前端默认的方向是顺时针(top、right、bottom、left)

- padding-方向值

④padding内边距能不能取负值? 不可以取负值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;padding: 0;
        }
        div{
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            /* padding-top: 100px */
        }
        p:nth-child(1){
            margin-left: 50px
        }
        p:nth-child(2){
            margin-left: 100px
        }
    </style>
</head>
<body>
    <!-- div是快递盒 -->
    <div>
        <p>同学的对象1</p>
        <p>同学的对象2</p>
    </div>
</body>
</html>

效果图：

4.属性：margin外边距

margin外边距的使用

- 表示多个同级元素之间的位置关系

- 哪个元素改变就给当前元素设置即可

- 设置margin值不会撑大元素的宽高大小不需要减去相应的margin值

- 注意:margin和padding属性可以换着用

1.margin外边距的属性值设置

- 属性值可以设置成数值加单位

- 一个值:上下左右的值是一样的

- 两个值:上下和左右

- 三个值:上和左右和下

- 四个值: 上右下左

2.margin方向

- 前端默认的方向是顺时针(top、right、bottom、left)

- margin-方向值

3.margin可不可以使用负值? 可以

总结

- padding是用来设置父子级元素之间的位置关系可以给父级添加也可以给子级添加

- 设置padding都会撑大盒子的宽高大小是否减去padding值看需求

- margin用来设置同级元素之间的位置关系

- 内外边距属性是可以换着使用的

5.属性：border边框

1.①非简单写法：border-width（宽度）、border-style(样式)、border-color（颜色）

样式的取值：solid===实线

dashed===虚线

dotted===点线

double===双线

none===没有线

②简写方式（复合写法）：border：宽度样式颜色（没有书写顺序）

2.给盒子的某一个边框添加样式：

border-top：顶部添加

border-left：左边添加

border-right：右边添加

border-botton：底部添加

3.实战：利用边框线画三角形：

①盒子的width和height为0

②其余的3个方向设置为透明色：transprent

6.技巧：

内外边距的常见固定用法

- 1.*{margin:0;padding:0} 清除所有标签的内外边距

- 2.版心选择器{margin:0 auto} 设置版心居中===>(只在水平方向)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div:nth-child(1){
            width: 200px;
            height: 200px;
            background: pink
        }
        div:nth-child(2){
            width: 200px;
            height: 200px;
            background: green;
            margin-top: -50px;
        }
    </style>
</head>
<body>
    <div>对象1</div>
    <div>对象2</div>
</body>
</html>

效果图：

6. margin常见的bug

1.当父级元素中只有一个子级元素的时候给子级元素设置margin-top 会错误的解析到父级元素

- padding-top

- 给父级添加边框

- 给子级添加浮动

- 给父级添加overflow:hidden(了解)

2.两个同级元素设置margin-top/bottom 错误解析之间的最大值

- padding-top/bottom

- 设置一个margin值即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;padding: 0
        }
        div{
            width: 100%;
            height: 200px;
            background: pink;
            margin-bottom: 150px
        }
        h1{
            width: 200px;
            height: 50px;
            background: green;
        }
    </style>
</head>
<body>
    <div></div>
    <h1></h1>
</body>
</html>

效果图：

7. 盒模型总结

盒模型的计算方式

- 组成部分 content、padding、border、margin

- 盒子的自身大小: content(200px) + padding(10px*2) + border(10px*2) = 240px

- 盒子的真实大小: content(200px) + padding(10px*2) + border(10px*2) + margin(10px*2)= 260px

总宽== 内容区+左右边框线宽+左右内边距宽====>=width+左右padding+左右border

总高==内容去的高度+上下的内间距+上下的边框线===>=height+上下padding+上下border

注意：如果是写英文，添加word-wrap：break-word；===强制换行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            border: 10px solid #000;
            padding: 10px;
            margin: 10px;
            /* 
                盒子在浏览器中的大小是多少: 200px + 10px*2 + 10px*2
            */
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>