盒子是什么? -- 第四课
文章目录
- 前言
- 一、盒子是什么？
- 二、元素介绍
- 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的基础讲解到这里就结束了,能坚持学到这里的朋友们都是对编程有着一定的兴趣的,希望我们在之后的时间中继续携手共进,提升自我!