flex布局
盒子设置属性display:flex；开启弹性盒子布局，弹性盒子布局由 容器 和 项目组成；弹性盒子有两个轴：主轴 和 交叉轴；
属性：
flex-direction 定义主轴方向 值： row, row-reverse, column, column-reverse
justify-content 定义项目在主轴上的对齐方式 值：flex-start, flex-end, center, space-between,space-around,space-evenly
space-between 子项之间间距相等 ，但第一个和最后一个 与容器边缘没有间距
space-around 子项之间间距相等，子项和容器的边缘间距是子项之间间距的一半
space-evenly 子项之间间距相等，子项和容器边缘的间距也相等
align-items 定义项目在交叉轴上的对齐方式 flex-start, flex-end, center, baseline，stretch
align-content 定义多行项目在交叉轴上对齐方式
flex-wrap 是否换行 nowrap , wrap , wrap-reverse
flex 定义项目弹性比率
flex:1代表什么
所有设置该属性的子项 在 弹性容器中 平均分配剩余空间，它们的基础大小为0，允许扩展和收缩 来适应容器的大小
flex-grow：1 子项的扩展能力
flex-shrink：1 子项的收缩能力
flex-basis ：0%子项在分配剩余空间之前的基础大小
rem布局
rem 相对单位 相对于html 根元素的 字体大小的单位 默认字体大小16px，则1rem = 16px
应用场景：
通过设置根元素的字体大小，可以在不用设备和屏幕上实现响应式布局
rem布局 常用于设计随屏幕大小缩放的页面，只要修改根元素字体大小，能够调整整个页面的比例
1. 确定根元素的字体大小
确定网页中 <html> 元素的 font-size。浏览器默认的字体大小通常是 16px。如果没有在 CSS 中修改它，那么 1 rem 就等于 16px。
html {
font-size: 16px; /* 默认值 */
}
2. 计算 1 rem 的值
1 rem = 16px
3. 使用 rem 单位进行布局
在 CSS 中使用 rem 单位时，实际的像素值就是设定的 rem 乘以根元素的 font-size
div {
width: 2rem;
margin: 1.5rem;
}
在根元素的 font-size 为 16px 的情况下：
width: 2rem= 2 × 16px = 32pxmargin: 1.5rem= 1.5 × 16px = 24px
4. 响应式设计中的动态计算
可以通过媒体查询调整 html 的 font-size，从而让 rem 值动态变化
html {
font-size: 16px;
}@media (max-width: 768px) {
html {
font-size: 14px;
}
}@media (max-width: 480px) {
html {
font-size: 12px;
}
}在这种情况下：
- 1
rem= 16px 在大屏幕上- 1
rem= 14px 在中等屏幕上- 1
rem= 12px 在小屏幕上
vw、vh
vw 和 vh 是相对于视口（viewport）宽度和高度的 CSS 单位，常用于创建响应式布局。vw 表示视口宽度的百分比，vh 表示视口高度的百分比。
1vw：等于视口宽度的 1%。如果视口宽度是 1000px，那么 1vw 就是 10px。
1vh：等于视口高度的 1%。如果视口高度是 800px，那么 1vh 就是 8px。
宽度和高度：
div {
width: 50vw; /* 元素宽度为视口宽度的50% */
height: 50vh; /* 元素高度为视口高度的50% */
}如果视口宽度是 1000px，高度是 800px，那么：
width: 50vw= 500pxheight: 50vh= 400px
响应式字体大小
vw 和 vh 还可以用来设置字体大小，使字体随着视口大小变化而变化。
h1 {
font-size: 5vw; /* 字体大小为视口宽度的5% */
}
常见布局使用
全屏布局
使用 100vw 和 100vh 创建一个占满整个视口的元素，常用于创建全屏背景或全屏幕的横幅。
.fullscreen {
width: 100vw;
height: 100vh;
background-color: #333;
}
保持比例的盒子
使用 vw 和 vh 可以创建保持一定比例的盒子。例如，一个正方形盒子：
.square {
width: 50vw;
height: 50vw; /* 保持正方形 */
background-color: lightblue;
}
这个盒子的宽高比将始终保持为1:1
注意事项
-
视口变化：当用户调整浏览器窗口大小，或在不同设备上查看时，
vw和vh的值会发生变化，因此元素大小会随着视口变化而调整。 -
移动设备：在一些移动设备上，浏览器的地址栏或工具栏的显示和隐藏可能会影响
vh的值，使得布局在视口大小变化时出现跳动。 -
兼容性：大多数现代浏览器都支持
vw和vh，但在使用时仍需注意可能的兼容性问题。
CSS单位中px、em和rem的区别？
px 表示屏幕上的像素 绝对单位 相对于显示器屏幕分辨率而言 一个虚拟的长度单位，是计算机系统数字化图像的长度单位
特点：
具有固定的大小，无论元素放在页面的哪个地方，1px 都是相同的大小
不会随父元素或根元素的字体大小变化而变化
适用场景：
适合用于设计中需要精确控制元素尺寸的情况，比如边框、固定尺寸的按钮等。
em 相对长度单位 相对于当前对象内文本的字体尺寸，如果当前对行内文本的字体尺寸未被设置，则相对于浏览器的默认字体尺寸。它会继承父元素的字体大小，不是一个固定的值
定义：em 是一个相对单位，相对于当前元素的 font-size 进行计算
特点：
1em等于当前元素的字体大小。如果元素的font-size为16px，那么1em = 16px。em单位是相对的，因此如果父元素的字体大小发生变化，使用em单位定义的尺寸也会随之变化。- 在嵌套元素中，
em是相对于父元素的字体大小计算的，因此嵌套元素的大小可能会级联放大或缩小。
适用场景：
用于需要根据元素的字体大小调整其内外边距、行高或其他尺寸的情况。
.parent {
font-size: 16px;
}.child {
font-size: 2em; /* 字体大小为 32px，因为 2em * 16px = 32px */
margin: 1.5em; /* 外边距为 24px */
}
rem 相对单位 相对于html根元素的字体大小单位
特点：
1rem等于根元素的字体大小。与em不同的是，rem不受父元素的影响，只与根元素的font-size有关。- 这使得
rem更加可控，避免了嵌套元素中字体大小的级联放大或缩小。
适用场景：
用于创建响应式设计，并希望在整个页面中保持一致的比例。
html {
font-size: 16px; /* 根元素字体大小为 16px */
}div {
font-size: 1.5rem; /* 字体大小为 24px，因为 1.5rem * 16px = 24px */
margin: 2rem; /* 外边距为 32px */
}
总结
px：绝对单位，适合需要精确控制的场景。em：相对单位，相对于当前元素的font-size，适合需要基于父元素调整的场景，但注意级联效应。rem：相对单位，相对于根元素的font-size，适合全局统一控制和响应式设计的场景。
扫一扫
4785
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
