HTML+CSS之盒子模型（CSS重点）（part08）

玉玊临芬

于 2024-06-22 22:08:10 发布

阅读量862

点赞数 14

文章标签： html css 前端

本文链接：https://blog.csdn.net/2201_75597173/article/details/139887793

版权

其实，CSS就三个大模块：盒子模型、浮动、定位，其余的都是细节。

一、网页布局的本质

网页布局中，我们是如何把里面的文字，图片，按照美工给我们的效果图排列的整齐有序呢？

其实就是把网页元素比如文字图片等等，放入盒子里面，然后利用CSS摆放盒子的过程，就是网页布局。

二、盒子模型

所谓盒子模型：

就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：
外边距（margin）、边框（border）、内边距（padding）、*实际内容（content）四个属性。*

首先，我们来看一张图，来体会下什么是盒子模型。

1.所有的文档元素（标签）都会生成一个矩形框，它描述了一个文档元素在网页布局汇总所占的位置大小。

2.因此，每个盒子除了有自己大小和位置外，还影响着其他盒子的大小和位置

三、盒子边框

1、边框综合设置

2、圆角边框

3、内边距（padding）

（上面的三个部分在之前的文章（part05）中已有详细解释，在这里就不赘述。这篇文章主要总结盒子的完整框架。）

4、外边距（margin）

margin属性用于设置外边距。设置外边距会在元素之间创建“空白”，这段空白通常不能放置其他内容。

margin-top:上外边距
margin-right:右外边距
margin-bottom:下外边距
margin-left:上外边距
margin:上外边距右外边距下外边距左外边

3.4.1.外边距实现盒子居中

可以让一个盒子实现水平居中，需要满足一下两个条件：

必须是块级元素
盒子必须指定了宽度（width）

然后就给左右的外边距都设置为auto，就可使块级元素水平居中。

3.4.2.文字（行内元素）居中

文字水平居中是 text-align: center
盒子水平居中:左右margin 改为 auto

text-align: center; /* 文字居中水平 */
margin: 10px auto; /* 盒子水平居中左右margin 改为 auto */

3.4.3.清除元素的默认内外边距

为了更方便地控制网页中元素，制作网页时，可使用如下代码清除元素的默认内外边距：

* {
padding:0; /* 清除内边距 */
margin:0; /* 清除外边距 */
}

3.4.4.外边距合并

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。

3.4.4.1.相邻块元素垂直外边距的合并(外边距塌陷)

在一部分在之前(part05)也详细解释过,这里也就不再提.

3.4.4.2.嵌套块元素垂直外边距的合并

对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。

解决方案：

可以为父元素定义1像素的上边框或上内边距。

可以为父元素添加overflow:hidden(overflow 属性规定当内容溢出元素框时发生的事情）。

四、插入图片和插入背景图片的区别

插入图片我们用的最多比如产品展示类移动位置只能靠盒模型 padding margin
背景图片我们一般用于小图标背景或者超大背景图片背景图片只能通过 background-position

<style>
        div {
            width: 400px;
            height: 400px;
            border: 1px solid forestgreen;
            background: #6a2d2d url(img/鸟.webp) no-repeat;
            /* 背景图片更改位置 用 background-position */
            /* 第一个值调节 左右 第二个值调节上下 */
            background-position: 30px 50px;
        }
        
        img {
            /* 插入图片更改大小 width 和 heigh */
            width: 200px;
            height: 210px;
            /* 插入图片更改位置 可以用margin 或padding */
            margin-top: 30px;
            /* 插入当图片也是一个盒子 */
            margin-left: 50px;
        }
    </style>
</head>

<body>
    <div>1</div>
    <img src="img/工作中的人.jpeg" alt="">
</body>

五、盒子阴影

语法格式：

box-shadow:水平阴影垂直阴影模糊距离阴影尺寸阴影颜色内/外阴影；

注意:

前两个属性是必须写的。其余的可以省略。

默认是外阴影 (outset) ，不用设置，想要内阴影设为 inset 。

X轴与Y轴如果有值，就改变了（正值向右向下）。

 <style>
        .shadow {
            width: 200px;
            height: 200px;
            border: 10px solid red;
            box-shadow: 0 15px 30px green;
        }
    </style>
</head>

<body>
    <div class="shadow">阴影</div>
</body>

六、overflow溢出

检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。

visible(默认) : 　不剪切内容也不添加滚动条。
auto : 　超出自动显示滚动条，不超出不显示滚动条
hidden : 　不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll : 　不管超出内容否，总是显示滚动条

<style>
        .box {
            width: 200px;
            height: 100px;
            border: 1px solid green;
            /* 不剪切内容也不添加滚动条。 */
            overflow: visible;
            /* 溢出隐藏 */
            overflow: hidden;
            /* 超出自动显示滚动条，不超出不显示滚动条 */
            overflow: auto;
            /* 不管超出内容否，总是显示滚动条 */
            overflow: scroll;
        }
    </style>
</head>

<body>
    <div class="box">
        6月18日，高考623分的脑瘫少年姚俊鹏完成了在中国药科大学的学业任务，顺利毕业！接下来，姚俊鹏将前往苏州大学读研深造6月18日，高考623分的脑瘫少年姚俊鹏完成了在中国药科大学的学业任务，顺利毕业！接下来，姚俊鹏将前往苏州大学读研深造
    </div>
</body>

玉玊临芬

关注

14
点赞
踩
21

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS之盒子模型（CSS重点）（part08）

对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。（上面的三个部分在之前的文章（part05）中已有详细解释，在这里就不赘述。1.所有的文档元素（标签）都会生成一个矩形框，它描述了一个文档元素在网页布局汇总所占的位置大小。网页布局中，我们是如何把里面的文字，图片，按照美工给我们的效果图排列的整齐有序呢？使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。
复制链接

扫一扫