盒子是什么? -- 第四课

文章目录

前言
一、盒子是什么？
二、元素介绍
- 1.边框 - border
- 2.内边距 - padding
- 3. 外边距属性 -- margin
三、拓展知识
- 1.块元素垂直外边距的合并
- 2. 嵌套块元素垂直外边距的合并
四、背景属性
五、元素的浮动
- 1.浮动
- 2.清除浮动
- 3.元素定位
- 4. 特殊定位 -- 黏性定位
- 5. z-index层叠等级属性
总结

前言

前面一节我们学习了css 的基础用法,接下来让我们接着来了解一个重要的概念 – 盒子模型!

一、盒子是什么？

盒子模型是CSS中的一种概念，用于描述HTML元素的布局和呈现方式。它将每个HTML元素视为一个矩形的盒子，由四个边框（border）、内边距（padding）、外边距（margin）和内容（content）组成。

边框（border）是盒子的最外层，用来包裹内容和内边距，在边框内部是盒子的内容。
内边距（padding）是边框和内容之间的区域，用于控制内容与边框之间的距离。
外边距（margin）是盒子与其他盒子之间的距离，用于控制盒子与盒子之间的间隔。
内容（content）是盒子中实际显示的内容，可以包含文字、图片、其他HTML元素等。

通过盒子模型，我们可以使用CSS属性来控制边框的样式、颜色和宽度、内边距的大小、外边距与其他盒子之间的空间关系，以及调整内容的布局和排列方式。了解和理解盒子模型对于CSS的学习和网页布局非常重要，它使我们能够更好地控制和定位HTML元素，实现各种样式和布局效果。

二、元素介绍

1.边框 - border

border-width：设置边框的宽度，可以使用具体的单位值（如px、em）或预设值（thin、medium、thick）。
border-style：设置边框的样式，常见的样式包括：solid（实线）、dotted（点线）、dashed（虚线）、double（双线）等。
border-color：设置边框的颜色，可以使用具体的颜色值（如#FF0000、red）或预设值（transparent、inherit）。
border：可以同时设置边框的宽度、样式和颜色。例如：border: 1px solid #000; 表示边框宽度为1像素，样式为实线，颜色为黑色。
border-radius：设置边框的圆角效果，可以使用具体的单位值或百分比值。例如：border-radius: 5px; 表示添加一个5像素的圆角。
border-top、border-left、border-bottom、border-right：分别设置盒子的上、左、下、右边框的样式、宽度和颜色。

<!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>
        div{
            width: 200px;
            Height: 200px;
            background-color:antiquewhite;

            /* 边框 */
            /* 综合设置 */
            /* border: 5px dashed red; */

            /* 单独设置上边框 */
            /* border: 5px dashed red; */
            
            /* 单独设置 */
            border-style: dashed;
            border-color: red;
            border-width: 5px;
        }
    </style>
</head>
<body>
    <div>

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

2.内边距 - padding

内边距属性（padding）是CSS中用于控制盒子内边距大小的属性。它定义了盒子内容与边框之间的空间。

padding属性可以使用具体的单位值（如px、em）或百分比值来指定内边距的大小。例如，padding: 10px; 表示在盒子的内容周围添加10像素的内边距。
padding属性可以分别指定上、右、下、左(顺时针)四个方向的内边距，也可以使用缩写形式同时指定四个方向的内边距。例如，padding-top: 10px; 表示只为盒子的顶部添加10像素的内边距。而padding: 10px 20px 10px 20px; 则表示上、右、下、左四个方向的内边距分别为10像素、20像素、10像素、20像素。
通过调整padding的值，我们可以控制盒子内部内容与边框之间的间距。这对于调整页面布局和美化设计有很大的帮助。比如，通过增加内边距可以在盒子内部创建一定的空隙，使内容与边框之间有一定的距离，可以增加页面的可读性和美观性。

<!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>
        div{
            width: 200px;
            height: 200px;
            /* 边框也会影响盒子的大小 */
            border: 5px dashed black;
            text-align: center;
            /* 内边距 - 是会影响盒子大小的*/
            padding: 10px;
            
            /* 上 右 下 左 -- 顺时针 */
            /* 上 左-右 下 -- 三个数值 */
            /* 上-下 左-右 -- 两个数值 */
            padding: 10px 20px 30px 40px;
        }
    </style>
</head>
<body>
    <div>
        这是一个div标签
    </div>
</body>
</html>

3. 外边距属性 – margin

外边距属性（margin）用于设置元素的外边距。外边距是指元素与其他元素之间的间距。

外边距属性有以下几个常用的值：

margin-top：设置元素的上外边距。
margin-right：设置元素的右外边距。
margin-bottom：设置元素的下外边距。
margin-left：设置元素的左外边距。
margin：用于同时设置四个方向的外边距。例如，margin: 10px; 表示所有方向都设置为 10px 的外边距。
margin:auto;：将元素水平居中。

外边距属性的值可以使用绝对单位（如像素(px)、厘米(cm)）或相对单位（如百分比(%)、em、rem）进行设置。

外边距还可以有负值，用于将元素向相反的方向移动。

外边距属性也可以应用于其他布局属性，例如浮动元素和定位元素,我们后面会来专门介绍。

注意：外边距不会影响元素的宽度和高度，只会影响元素与其他元素之间的间距。
tips: 在开发的时候一般会首先清除内外边距,方便后面的操作

<style>
	body{
	    margin: 0;
	    padding: 0;
	    /* 清除列表的样式 */
	    list-style: none;
	}
</style>

三、拓展知识

1.块元素垂直外边距的合并

在普通文档流中（没有对元素应用浮动和定位），当两个相邻或嵌套的块元素相遇时，其垂直方向的外边距会自动合并，发生重叠。这种现象被称为元素垂直外边距的合并

<!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>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }

        /* 上下外边距如果相同就会合并,如果不相同以大的为主 */
        .box1{
            width: 200px;
            height: 200px;
            background-color: antiquewhite;
            margin-bottom: 100px;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: brown;
            margin-top: 100px;
        }
    </style>
</head>
<body>
    <!-- 垂直外边距 -->
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

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

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

<!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>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        /* 
            1.父盒子有外边距,整体都会下去
            2.父盒子和子盒子都有外边距,以大的为标准
            3.只有子盒子有外边距,整体也都会下去
        */
        .box1{
            width: 400px;
            height: 400px;
            background-color: antiquewhite;
            margin-top: 50px;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: brown;
            /* 以大的边距为主 */
            margin-top: 100px;
        } 
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>

四、背景属性

在CSS中，不仅可以将网页元素的背景设置为某一种颜色，还可以将图像作为网页元素的背景，通过background-image属性实现。

background-color：设置背景颜色。
background-image：设置背景图片。
background-repeat：设置背景图片的重复方式，可以是repeat（默认，水平和垂直方向都重复）、repeat-x（水平方向重复）、repeat-y（垂直方向重复）或no-repeat（不重复）。
background-position：设置背景图片的位置。可以使用关键字（如left、center、right、top、bottom）或像素（px）来定位。
background-size：设置背景图片的尺寸。可以是具体尺寸（如200px 100px）或关键字（如cover、contain）。
background-attachment：设置背景图片的滚动方式。可以是fixed（固定不动）或scroll（随页面滚动）。
background-origin：设置背景图片的起始位置。可以是padding-box（从内边距开始显示）或border-box（从边框开始显示）。
background-clip：设置背景图片的剪裁方式。可以是border-box（剪裁到边框），padding-box（剪裁到内边距）或content-box（剪裁到内容区域）。
背景属性的值可以是单个值（如background-color: red;），也可以是多个值，多个值之间用空格分隔（如background: url(image.jpg) repeat-x top left;）。

需要注意的是，设置背景图片时需要指定图片的路径，并确保图片文件存在。同时，背景属性可以叠加使用，多个属性设置在一起可以实现更丰富的背景效果。

五、元素的浮动

初学者在设计一个页面时，通常会按照默认的排版方式，将页面中的元素从上到下——罗列。为元素设置浮动，可以使页面元素变得整齐有序。下面，将对元素的浮动进行详细讲解。

1.浮动

元素的浮动是指将元素从常规文档流中脱离出来，并根据指定的方向进行移动。浮动元素会像漂浮在其他元素上方一样显示，可以左浮动、右浮动或者不浮动。常用的浮动属性有float:left、float:right和float:none。

浮动元素的特点：

浮动元素会尽可能地向左或向右移动，直到其外边界与包含块（容器）或其他浮动元素的外边界相接触。
浮动元素不会覆盖之前的浮动元素，而是会尽可能地占据剩余的空间。
浮动元素不会影响其他非浮动元素的布局，但会影响其他浮动元素的位置。

浮动元素常用的应用场景包括：

实现多列布局，比如网页导航栏、新闻列表等。
实现图片和文字环绕效果。
实现浮动定位效果，将元素固定在页面的某个位置。
需要注意的是，浮动元素脱离文档流后可能会导致父元素无法撑开高度，从而影响页面布局。可以使用clearfix技巧来解决这个问题，或者使用其他布局方式来避免使用浮动。

<!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>
        .box1{
            width: 400px;
            height: 400px;
            background-color: antiquewhite;
            /* 
                设置浮动 -- 脱离标准文档流,相当于浮起来了,这样原来的位置就空出来了 -- 浮起来之后就不会独占一行了 
                如果对行内元素添加了浮动,行内元素就拥有了行内块元素的特性
                浮动主要是用来调整盒子的位置
                行内块除了调整位置还有其他的作用 
            */
            float: left;
        }
        .box2{
            width: 600px;
            height: 500px;
            background-color: aqua;
            /* 取消浮动之后块元素还是独占一行 */
            /* float: left; */
        }        
        .box3{
            width: 600px;
            height: 100px;
            background-color:yellowgreen;
            float: left;
        }
        .nav1{
            width: 200px;
            height: 200px;
            background-color:pink;
            float: left;
        }
        .nav2{
            width: 200px;
            height: 200px;
            background-color:green;
            float: right;
        }
    </style>
</head>
<body>
    <!-- 
        标准文档流
        1.块元素 -- 独占一行
        2.行内元素 -- 不会独占一行
        3.行内块元素 -- 不会独占一行
    -->
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>

    <span class="nav1">123</span>
    <span class="nav2">456</span>
</body>
</html>

2.清除浮动

由于浮动元素不再占用原文档流中的位置，所以会对页面中其他元素的排版产生影响，如果要避免这种影响，就需要对元素清除浮动。

空标记:在浮动元素之后添加空标记，并对该标记应用"clear:both"样式，可清除浮动。这个空标记可以为<div>、<p>、<hr/>等任何块标记。
overflow:"overflow:hidden；”样式，也可以清除浮动对该元素的影响，该方法弥补了空标记清除浮动的不足。

请添加图片描述
3. after伪对象:使用after伪对象也可以清除浮动，但是该方法只适用于IE8及以上版本浏览器和其他非IE浏览器。

<!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{
            width: 1000px;
            /* 大盒子里面有很多的小盒子,因此不应该被赋予高度 */
            /* height: 400px; */
            border: 2px dashed black;
            background-color: aqua;
            margin: auto;
            /* 清除浮动 */
            overflow: hidden;
        }
        .test1{
            width: 500px;
            height: 400px;
            background-color: yellow;
            float: left;
        }
        .test2{
            width: 500px;
            height: 400px;
            background-color: violet;
            float: left;
        }
        .footer{
            height: 200px;
            background-color: turquoise;
        }
        /* 清除浮动 */
        /* .clear{
            clear: both;
        } */
    </style>
</head>
<body>
    <div class="box">
        <div class="test1"></div>
        <div class="test2"></div>
        <div class="clear"></div>
    </div>
    <div class="footer"></div>
</body>
</html>

3.元素定位

元素的定位是指通过设置元素的位置属性（position）来控制元素在页面中的位置。常用的定位属性有：static、relative、absolute和fixed。

static（默认值）：元素根据常规文档流进行布局，不受定位属性的影响。
relative：相对定位。元素相对于其正常位置进行定位，通过设置top、right、bottom和left属性来调整元素的位置。相对定位不会脱离文档流，其他元素的布局会受到影响。
absolute：绝对定位。元素相对于最近的已定位祖先元素（父元素或更高级别的祖先元素）进行定位，如果没有已定位的祖先元素，则相对于文档的body元素进行定位。通过设置top、right、bottom和left属性来调整元素的位置。绝对定位会脱离文档流，不会影响其他元素的布局。
fixed：固定定位。元素相对于浏览器窗口进行定位，始终保持在同一个位置，即使页面滚动。通过设置top、right、bottom和left属性来调整元素的位置。固定定位会脱离文档流，不会影响其他元素的布局。

需要注意的是，定位属性的值只有在设置为relative、absolute或fixed时才会产生效果。对于定位属性为relative或absolute的元素，可以通过设置z-index属性来控制元素的层级关系，z-index值较大的元素会覆盖在z-index值较小的元素上方。

定位可以用于实现一些特殊的布局效果，比如悬浮窗口、弹出菜单等。但过度使用定位可能会导致页面结构复杂，不易维护，所以在使用时需要谨慎考虑。

4. 特殊定位 – 黏性定位

黏性定位（sticky position）是CSS3中新增的一种定位方式，它是相对于普通文档流中的定位元素进行定位的，但是在滚动时会受到约束，可以在指定的位置“粘”住。

黏性定位有如下特点：

元素在滚动之前表现为相对定位，跟随普通文档流进行布局。
当滚动到指定位置时，元素会固定在指定位置，即成为固定定位。
当滚动超出指定位置时，元素会恢复为相对定位，跟随普通文档流进行布局。
使用黏性定位需要设置元素的position属性为sticky，并通过top、bottom、left、right等属性来指定元素在滚动到指定位置时的偏移量。例如：

.sticky-element {
  position: sticky;
  top: 100px; /* 指定元素在滚动到距离顶部100px的位置时固定 */
}

5. z-index层叠等级属性

定位导致重叠:当对多个元素同时设置定位时，定位元素之间有可能会发生重叠，如图所示。
解决重叠问题:z-index可以调整重叠定位元素的堆叠顺序，其取值可为正整数、负整数和0。z-index的默认值是0。

总结

css的基础讲解到这里就结束了,能坚持学到这里的朋友们都是对编程有着一定的兴趣的,希望我们在之后的时间中继续携手共进,提升自我!