福建省晋江市建设局网站网络营销推广与策划

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 和百分比宽度，确保页面在不同设备上表现良好。
• 过渡效果：为交互元素添加平滑的过渡效果，提升用户体验。