盒子模型（css重点）

最新推荐文章于 2024-08-30 15:33:13 发布

Serein-666

最新推荐文章于 2024-08-30 15:33:13 发布

阅读量1.9k

点赞数 25

文章标签： css 前端 html

本文链接：https://blog.csdn.net/2201_75683676/article/details/139765869

版权

CSS三个大模块：盒子模型、浮动、定位

一、盒子模型

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：

外边距（margin）、

边框（border）、

内边距（padding）、

实际内容（content）四个属性。

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

二、盒子边框

语法：

border-width 边框粗细

border-style 边框样式

border-color 边框大小

边框样式（border-style），常用属性值如下：

none：没有边框即忽略所有边框的宽度（默认值）
solid：边框为单实线(最为常用的)
dashed：边框为虚线
dotted：边框为点线
double：边框为双实线

1. 边框综合设置

/*没有顺序*/
border: 1px solid red;

2 .圆角边框(CSS3)

语法格式：

border-radius: 左上角右上角右下角左下角;

变成圆：border-radius: 50%;

三、内边距

padding属性用于设置内边距。 是指边框与内容之间的距离。

padding-top:上内边距
padding-right:右内边距
padding-bottom:下内边距
padding-left:左内边距

/* 一个值，则上下左右都为这个值 */ padding: 20px;

/* 两个值，则为上下左右 */ padding: 10px 20px;

/* 三个值，则为上左右下 */ padding: 10px 20px 30px;

/* 四个值，则为上右下左 */ padding: 10px 20px 30px 40px;

四、外边距

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

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

取值顺序跟内边距相同。

1.外边距塌陷

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

2.外边距的应用-盒子居中

1.块元素 div

2.盒子必须指定了宽度（width）

3.左右的外边距都设置为auto**，就可使块级元素水平居中

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .main {
            /* 版心 内容中心的宽度 */
            background-color: aquamarine;
            width: 1000px;
            height: 100px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="main">文档的主题内容</div>
</body>

</html>

结果为：

3. 清除内外边距

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

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

4.外边距合并

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

增大两个盒子之间的外边距，给一个盒子设置margin

不要给两个都设置,合并后以较大的为准

.bro1 {

background-color: aqua;

margin-bottom: 30px;

}

.bro2 {

background-color: aquamarine;

}

5. 嵌套的外边距合并情况

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

解决方案：

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

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

注意！overflow:hidden;溢出隐藏 BFC原理 */ overflow: hidden;

BFC(Block Fomatting Context)为块级格式化上下文的的简称。

简单点说，把BFC看成一个渲染区域或者容器，在BFC这个容器内部的的元素无论如何布局都不会影响其外部的元素。

五、盒子模型计算大小

可以分成两种情况：

1、box-sizing: content-box 盒子大小为 content (width/heigth)+ padding + border, content-box:此值为其默认值，其让元素维持W3C的标准Box Mode。
2、box-sizing: border-box 盒子大小为 width/heigth 就是说 padding 和 border 是包含到width里面的。

1.盒子模型的分类

1.1W3C标准盒子（content-box）：

在这种盒模型下，我们所说的元素的 width ，实际上只包含 content

盒子总宽度 = margin + border + padding + width

1.2.IE盒子（border-box）：

又称怪异盒模型（边框盒子），是指块元素box-sizing属性为border-box的盒模型。

在这种盒模型下，我们所说的元素的 width ，实际上包含了 content + padding + border

盒子总宽度= margin + width

六、盒子阴影

语法格式：

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

注意:

前两个属性是必须写的。其余的可以省略。
默认是外阴影 (outset) ，不用设置，想要内阴影设为 inset 。
X轴与Y轴如果有值，就改变了（正值向右向下）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 300px;
            margin: 50px auto;
            border: 2px solid #666;
            /* box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色  内/外阴影； */
            box-shadow: 10px 30px 50px 10px greenyellow;
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

结果为：