Web前端开发技术基础（CSS）2-CSDN博客

本文链接：https://blog.csdn.net/weixin_65152588/article/details/134056812

CSS盒子模型

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

如图为一个盒模型，图中各属性说明：

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。（图中为蓝色部分）

在我们要给盒子设置宽高时，就是对盒子的Content部分设置宽高，如上图，我们给盒子设置了width为1314px，height为896px，在实际计算盒子大小时，我们还要加上外面的padding，border和margin值才是盒子真正的大小。

CSS position布局

position 属性指定了元素的定位类型。

position 属性的五个值：

static
relative
fixed
absolute

元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法

static定位

HTML 元素的默认值，即没有定位，遵循正常的文档流对象。

静态定位的元素不会受到 top, bottom, left, right影响。

fixed定位

元素的位置相对于浏览器窗口是固定位置。

即使窗口是滚动的它也不会移动

relative定位

相对定位元素的定位是相对其正常位置。

<!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>
        .left {
            position: relative;
            right: 20px;
        }
        
        .right {
            position: relative;
            left: 20px;
        }
    </style>
</head>
<body>
    <h1>原标题</h1>
    <h1 class="left">距离原标题右边20px</h1>
    <h1 class="right">距离原标题左边20px</h1>
</body>
</html>

在以上实例中，我们定义了三个h1标签，并给后面两个标签添加了relative定位，left类的h1标签设置了right：20px声明；意味着它会距离原位置右边20px，也就是向左移动20px，right类的h1标签同理，它会向右移动20px。

absolute定位

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>

<!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>
        .a{
            position:absolute;
	        left:100px;
            top:150px;
        }
        
    </style>
</head>
<body>
    <h1 class="a">距离左边的页面100 px和距离页面的顶部150 px</h1>
</body>
</html>

用绝对定位,一个元素可以放在页面上的任何位置。如上，我们定义了一个h1标签，并用绝对定位将它定位到了位于html页面左边100px和顶部150px的位置。

CSS 弹性布局

以下只列出弹性布局中常用的属性，具体内容详见菜鸟教程CSS3 弹性盒子 | 菜鸟教程 (runoob.com)

display	指定 HTML 元素盒子类型。
flex-direction	指定了弹性容器中子元素的排列方式
justify-content	设置弹性盒子元素在主轴（横轴）方向上的对齐方式。
align-items	设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
flex-wrap	设置弹性盒子的子元素超出父容器时是否换行。
align-content	修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐
flex-flow	flex-direction 和 flex-wrap 的简写
order	设置弹性盒子的子元素排列顺序。
align-self	在弹性子元素上使用。覆盖容器的 align-items 属性。
flex	设置弹性盒子的子元素如何分配空间。