CSS 知识点总结１

CSS 知识点总结１

今天写了两个页面,用到的知识点,总结一下

1 Flexbox 布局

• display: flex; ：启用 Flexbox 布局，用于创建灵活的容器。
• flex-direction: column; ：将子元素垂直排列。
• justify-content ：控制子元素在主轴上的对齐方式。
• justify-content: space-between;：子元素在主轴两端对齐，剩余空间均匀分布。
• justify-content: center;：子元素在主轴居中。
• align-items ：控制子元素在交叉轴上的对齐方式。
• align-items: center;：子元素在交叉轴居中。
• align-items: flex-end;：子元素在交叉轴末端对齐。
• gap: 10px; ：设置子元素之间的间距。

2 Grid 布局

• display: grid; ：启用 Grid 布局，用于创建网格容器。
• grid-template-columns: repeat(2, 1fr); ：定义两列，每列宽度相等。
• gap: 30px; ：设置网格项之间的间距。

3 盒模型

• padding: 20px; ：设置内边距。
• margin: 20px; ：设置外边距。
• margin: 0 auto; ：水平居中元素。
• border-radius: 10px; ：设置圆角。
• border: 1px solid #ddd; ：设置边框。

4 定位

• position: relative; ：设置相对定位，为子元素的绝对定位提供参考。
• position: absolute; ：设置绝对定位，脱离文档流。
• left: 12px;：距离左侧 12px。
• top: 50%;：距离顶部 50%。
• transform: translateY(-50%);：精确垂直居中。

5 过渡效果

• transition: box-shadow 0.3s ease; ：设置 box-shadow 属性的过渡效果。
• transition: border-color 0.3s ease; ：设置 border-color 属性的过渡效果。

6 字体和颜色

• font-family: Arial, sans-serif; ：设置字体。
• font-size: 16px; ：设置字体大小。
• color: #333; ：设置字体颜色。
• background-color: #fbfbfadd; ：设置背景颜色（带透明度）。

7 响应式设计

• max-width: 800px; ：限制容器的最大宽度，确保在不同屏幕尺寸下保持布局。
• width: 90%; ：设置宽度为父容器的 90%。

8 其他

• min-height: 100vh; ：设置容器的最小高度为视口高度。
• cursor: pointer; ：设置鼠标悬停时为手型，表示可点击。
• outline: none; ：移除聚焦时的默认边框。

总结

• 布局 ：广泛使用 Flexbox 和 Grid 布局，创建灵活的页面结构。
• 定位 ：使用相对定位和绝对定位，精确控制元素的位置。
• 盒模型 ：通过 padding、margin 和 border 控制元素的间距和边框。
• 响应式设计 ：通过 max-width 和百分比宽度，确保页面在不同设备上表现良好。
• 过渡效果 ：为交互元素添加平滑的过渡效果，提升用户体验。