HTML中重要的盒子模型

最新推荐文章于 2024-03-23 23:22:28 发布

qq_44422821

最新推荐文章于 2024-03-23 23:22:28 发布

阅读量166

点赞数

文章标签： html

本文链接：https://blog.csdn.net/qq_44422821/article/details/109558585

版权

div盒子

一、盒子的组成
1、div盒子是由内边距+边框+外边距（不能只是觉得盒子就是边框围起来的，这是一个误区）
2、div盒子的简易模型（如图）

  <!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
       .box{
           height: 200px;
           width: 400px;
           padding: 50px;
           margin-left: 20px;
           border: 10px solid palevioletred;
       }
   </style>
</head>
<body>
   <div class="box">

   </div>
</body>
</html>

在这里插入图片描述
可看出整个盒子的总宽度是：400200+（502）+102+20
而不是：400200
二、盒子模型组成部分的介绍

内容 content
width、height，设置的是盒子内容的宽高
内容部分通常被叫做整个盒子的内容盒 content-box
填充（内边距） padding
盒子边框到盒子内容的距离
填充区 + 内容区 = 填充盒 padding-box
边框 border
边框 = 边框样式 + 边框宽度 + 边框的颜色
边框样式：border-style
边框宽度: border-width
边框的颜色: border-color,如果不设置边框颜色，则为字体的颜色
边框 + 填充区 + 内容区 = 边框盒 border-box
外边距 margin
边框到其他盒子的距离
margin-top
margin-right
margin-bottom
margin-left

简写：margin: 10px ~ 10px 20px 30px 40px
三、padding对整个盒子原有的宽度的影响
1、当我们做项目拿到设计图时，设计图的尺寸并没有对边框或内边距考虑。
2、如果想设置padding后不影响他原设计的高宽
我们可以在css样式中实现
下面展示一些 内联代码片。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            height: 200px;
            width: 400px;
            padding: 50px;
            margin-left: 20px;
            border: 10px solid palevioletred;
            box-sizing: border-box;//padding值不会影响原来图的大小
        }
    </style>
</head>
<body>
    <div class="box">

    </div>
</body>
</html>

在这里插入图片描述
在css中用 box-sizing 重新规定元素边框模型的计算方式

content-box 默认值，采取默认计算方式标准盒子模型的计算方式（会发现设置box-sizing后盒子内容自动调试，不改变盒子原有的宽度）
border-box 采取IE盒子模型的计算方式，元素的尺寸会包含内边距和边框

盒子的分类

1、块盒
我们常见的块盒有（div）
2、行块盒
我们常见的行盒有（p 、h1~h6、）独占一行
3、非块盒
我们常见的有（img、 a ）他们的高宽有（href src 属性值决定）
** 如果想设置非块盒的宽高，需要在样式中用 display属性 **
4、display的属性值：inline-block、block（非块盒设置后，方可设置宽高）
5、非块盒设置宽高如果属性设置了float则也可设置宽高

qq_44422821

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML中重要的盒子模型

div盒子一、盒子的组成1、div盒子是由内边距+边框+外边距（不能只是觉得盒子就是边框围起来的，这是一个误区）2、div盒子的简易模型（如图） <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l
复制链接

扫一扫