前端学习第四天-CSDN博客

本文链接：https://blog.csdn.net/weixin_74113429/article/details/141852910

笔记仅供参考和复习，b站学习视频总结的，纯干货，具体代码自己实践操作

一、CSS盒子模型

所有HTML元素可以看作盒子，CSS盒模型本质上是一个盒子，它包括：

外边距（margin）、边框（border）、内边距（padding）、实际内容（content）

外边距：这个盒子与外部的距离

边框：边框大小

内边距：内容与边框之间的距离

div{
    padding: 50px 10px;

}

第一个值是上下，第二个值是左右；

二、弹性盒子模型

定义

弹性盒子是CSS3的一种新的布局模式，为了更好的布局；

内容

弹性盒子由弹性容器和弹性子元素组成

弹性容器通过设置display属性的值为flex，将其定义为弹性容器

弹性容器内包含了一个或多个弹性子元素，主要针对于一个大元素中有很多子元素，对子元素进行设置；

<div class="flex-container">
    <div class="flex-item">flex item 1</div>
    <div class="flex-item">flex item 2</div>
    <div class="flex-item">flex item 3</div>
</div>

<style>
    .flex-container{
        display: flex;
        width: 400px;
        height: 250px;
        background-color: grey;
    }
    .flex-item{
        width: 100px;
        height: 50px;
        background-color: blue;
    }
</style>

display属性

display：flex 开启弹性盒，设置后子元素默认水平排列

flex-direction属性

指定弹性子元素在父容器中的位置

flex-direction：row｜row-reverse｜column｜column-reverse

row：横向从左到右排列（左对齐），默认方式
row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面）
column：纵向排列
column-reverse：反转纵向排列，从后往前排

  .flex-container{
        display: flex;
        width: 400px;
        height: 250px;
        background-color: grey;
        flex-direction: row-reverse;
    }

justify-content属性

应用在弹性容器上，把弹性项沿着弹性容器的主轴线对齐

justify-content：flex-start｜flex-end｜center

flex-start：弹性项目向行头紧挨着填充。默认值，居上摆放
flex-end：弹性项目向行尾紧挨着填充。居下摆放
center：弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）

align- items属性

设置或检索弹性盒子元素在纵轴方向上的对齐方式（水平方向上居左、居右、居中）

align-items：flex-start｜flex-end｜center

让一个小盒子在一个大盒子中居中，要设置的属性：

.container{

dispaly: flex;

justify-content: center;

align-items: center;

}

子元素上的属性

flex-grow/flex

根据弹性盒子元素所设置的权重作为比率来分配剩余空间

默认为0，设置该属性的数字越大，占用的空间就越大，则设置的宽高不起作用

三、浮动

定义元素在哪个方向浮动，任何元素都可以浮动，浮动以后脱离文档流

float：left｜right

元素向左浮动

脱离文档流之后，元素相当于在页面上面增加一个浮层来放置内容，即有两层页面

当容器不足时，会在下一行摆放

浮动和弹性的区别

对父元素：
1. 弹性：父元素会自动调整大小，使子元素仍在父元素盒子中；
2. 浮动：会脱离文档流，向下摆放，父元素不能调整，影响整体布局；
对子元素：
1. 弹性：提供多种属性和工具帮助摆放；
2. 浮动：实现等距分隔或等距环绕需手动计算并设置每个元素的外边距；
清除浮动：
1. 浮动：由于浮动元素会脱离文档流，因此在使用浮动布局时需要特别注意清除浮动的影响。常见的清除浮动方法包括使用空标签清除法、父元素设置overflow属性、使用伪元素清除法等。
2. 弹性布局：由于弹性布局对父元素没有不良影响，因此不需要进行额外的清除浮动操作。

弹性布局适用于复杂的页面布局，浮动布局则更适用简单的文本环绕

四、清除浮动

浮动副作用

当元素设置float浮动后，该元素就会脱离文档流并向左/向右浮动

1.浮动元素会造成父元素高度塌陷

2.后续元素会受到影响

清除浮动

当父元素出现塌陷时，必须清除副作用：

父元素设置高度
受影响的元素增加clear属性
overflow清除浮动
伪对象方式

父元素设置高度

给父元素设置高度，撑开元素本身大小

受影响的元素增加clear属性

clear：left｜right｜both

清除左或右浮动

overflow清除浮动（最广泛）

如果有父级塌陷，并且同级元素也收到影响，可以使用overflow清除浮动

这种情况下，父布局不能设置高度，在父级标签样式里加：overflow：hidden；

伪对象方式

如果有父级塌陷，并且同级元素也收到影响，还可以使用伪对象方式

为父标签添加伪类after，设置空的内容，并且使用clear：both；

这种情况下，父布局不能设置高度

.container::after{
    content:"";
    display: block;
    clear: both;
}

五、定位

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

值	描述
relative	相对定位
absolute	绝对定位
fixed	固定定位

其中，绝对定位和固定定位会脱离文档流

设置定位之后，可用left、top、bottom、right调整位置，相对定位和绝对定位是相对于具有定位的父级元素进行位置调整，如果父级元素不存在定位，则继续向上逐级寻找，直到顶层文档。

z-index

该属性设置元素的堆叠顺序，拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

相对定位和绝对定位的区别

定义

相对定位：相对于它本身所在的文档流的位置进行定位，不会脱离文档流，定位前的位置仍然保留。当元素设置position:absolute、float:left、float:right中任意一个时，都会让元素以display:inline-block的方式显示（特点是：可以设置长宽，默认宽度不占满父元素）。
绝对定位：相对于它的祖先结点进行定位，会脱离文档流，文档不会保留其定位前的位置。

口诀

子绝父相