position：
在 CSS 中，position 属性用于定义元素的定位方式。它有几个取值：
static: 默认值。元素按照正常文档流进行定位，不会被特殊地定位。relative: 相对定位。元素相对于它正常位置进行定位，但是在文档流中仍保留原有的空间。absolute: 绝对定位。元素相对于最近的非static（非默认定位）的父元素进行定位。如果没有符合条件的父元素，那么相对于初始包含块（通常是<html>元素）进行定位。fixed: 固定定位。元素相对于浏览器窗口进行定位，即使页面滚动，它也会保持在窗口的固定位置。sticky: 粘性定位。元素根据用户的滚动位置在父元素中定位，但是仍然在文档流中占据空间。在滚动到元素定位的范围时，它会变为固定定位，直到滚动回超出范围。
float
float 是 CSS 中的一个属性，用于控制元素在布局时沿着包含块的左侧或右侧浮动。float 属性有两个主要的取值：left 和 right。
当一个元素设置了 float: left; 或 float: right; 时，它会尽量靠近包含块左侧或右侧，并且其他元素会围绕它排列。这在创建多列布局、图文混排等场景中常被使用。
然而，使用 float 也有一些需要注意的问题：
- 元素脱离文档流： 浮动元素脱离了正常的文档流，可能会导致父元素的高度塌陷，影响布局。
- 清除浮动： 在浮动元素后面的元素可能不按预期排列，可以通过
clear属性来清除浮动。 - 父元素包裹： 父元素可能无法包裹浮动元素，需要使用
clearfix或其他清除浮动的方法。 - 响应式设计： 在响应式设计中，使用
float可能不够灵活，可以考虑使用更现代的布局方式，比如 Flexbox 或 Grid。
display
display 是 CSS 中一个非常重要的属性，用于定义元素的显示类型（display type）。这个属性控制元素在页面上的表现形式，例如是块级元素还是行内元素。
以下是 display 属性常见的取值：
1.block： 元素会生成一个块级框，独占一行，可以设置宽度、高度以及垂直方向的外边距和内边距。常见的块级元素有 <div>、<p>、<h1> 等。
div { display: block; }
2. inline： 元素会生成一个行内框，与相邻的行内元素在一行上，只占据内容的空间，不可设置宽度、高度、垂直方向的外边距和内边距。常见的行内元素有 <span>、<a>、<strong> 等。
span { display: inline; }
3.inline-block： 元素会生成一个行内级块容器，可以设置宽度、高度以及垂直方向的外边距和内边距，但仍然保持行内元素的特性。常用于创建水平排列的块级元素。
div { display: inline-block; }
4. none： 元素不会在页面上显示，即隐藏元素。它不占据任何空间，对布局无影响。
div.hidden { display: none; }
5. flex： 元素成为一个伸缩盒子，并可以使用弹性布局。常用于创建灵活的、响应式的布局。
div { display: flex; }
6. grid： 元素成为一个网格容器，可以使用网格布局。用于创建复杂的二维布局。
div { display: grid; }
6. display 属性的灵活使用可以帮助开发者实现各种不同的布局效果，根据元素在页面上的显示需求选择适当的 display 属性值。
flex弹性布局
五分钟掌握 css3 flex弹性布局 超详细！_哔哩哔哩_bilibili （原文连接）
justify-content
在默认的情况下div是自上而下的布局，当开启{display:flex}之后就会横向排解。
当添加
{justify-content:center;}之后就会居中
靠右对齐
justify-content:space-between;
左右两边对齐，且项目之间的间距相等
space-around; 项目之间的间距为左右两侧间距到容器的二倍
space-evenly 项目之间的间距与容器与项目的间距相等
align-items
flex-star; 与交叉轴的位置距离默认
center 交叉轴居中排列
flex-end 靠着交叉轴底部对齐
当两项都设置为center的时候就会整体居中
align-items:center;
justify-content:center;
flex-direction
row 默认值按行排列
row-reverse; 项目的排列会反转，其实是反转了交叉轴的横轴
之上的排列都是按照横向交叉轴来的，当设置 column; 意为更换排列的交叉轴
因此 column-reverse; 就会在垂直方向反转交叉轴
flex-wrap
nowrap 默认情况强行占满父元素，不换行
wrap 项目会根据自身情况进行合理排列
项目属性
order 设置排列的优先级
flex-grow
flex-shrink
flex-basis
align-self
center 让单个项目居中
flex-end 靠着底端对齐
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
