当前位置: 首页 > article >正文

CSS 知识点总结1

CSS 知识点总结1

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

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 布局,创建灵活的页面结构。
  • 定位:使用相对定位和绝对定位,精确控制元素的位置。
  • 盒模型:通过 paddingmarginborder 控制元素的间距和边框。
  • 响应式设计:通过 max-width 和百分比宽度,确保页面在不同设备上表现良好。
  • 过渡效果:为交互元素添加平滑的过渡效果,提升用户体验。

http://www.kler.cn/a/588739.html

相关文章:

  • 【软考-架构】7、系统配置与性能评价
  • CAD球体密堆积3D插件V2.0
  • SpringBoot手动注册定时任务
  • ActiveMQ监听器在MQ重启后不再监听问题
  • Pytorch:Dataset的加载
  • 百度贴吧IP和ID是什么意思?怎么查看
  • NPU、边缘计算与算力都是什么啊?
  • [leetcode] 面试经典 150 题——篇3:滑动窗口
  • 一分钟了解深度学习
  • Lisp语言的网络管理
  • 利用Java爬虫根据关键词获取商品列表:实战指南
  • 一份C#的笔试题及答案
  • 【NLP】 4. NLP项目流程与上下文窗口大小参数的影响
  • Kafka可视化工具KafkaTool工具的使用
  • Lua语言的嵌入式调试
  • qt 自带虚拟键盘的编译使用记录
  • 深入解析 React Diff 算法:原理、优化与实践
  • C或C++中实现数据结构课程中的链表、数组、树和图
  • matlab 模糊pid实现温度控制
  • nginx请求限流设置:常见的有基于 IP 地址的限流、基于请求速率的限流以及基于连接数的限流