博客
关于我
前端基础知识学习FreeCodeCamp
阅读量:354 次
发布时间:2019-03-04

本文共 2202 字,大约阅读时间需要 7 分钟。

CSS Flexbox 和 Grid 教程

目录

  • Basic HTML 和 HTML5
  • Basic CSS
    • Position
    • Float
    • Animation
  • Applied Visual Design
  • Applied Accessibility
    • Tabindex
  • Responsive Web Design Principles
    • Media Queries
    • Make Typography Responsive: Viewport units
    • Relative device height or width vs. Percentage
  • CSS Flexbox
    • Flex Container
    • Flex Items
  • CSS Grid
    • Grid Container Properties
    • Grid Item Properties

  • Basic HTML 和 HTML5

    HTML5 是网页开发的基础,理解它是掌握前端开发的关键。


    Basic CSS

    CSS 是 CSS全称,即 Cascading Style Sheets(层叠样式表),用于定义网页的样式和布局。

    Position

    • Position: static:默认值,元素不会移动。
    • Position: relative:相对于常见位置。
    • Position: absolute:相对于 viewport。
    • Position: fixed:相对于 viewport,不随滚动移动。

    Float

    • Float 属性用于将元素在文本流中左边或右边排列。

    Animation

    • Animation 可以创建简单的动画效果。

    Applied Visual Design

    视觉设计是网页美观的关键。


    Applied Accessibility

    Tabindex

    • Tabindex 属性允许用户通过 tab 键导航网页,提升网页的可访问性。

    Responsive Web Design Principles

    Media Queries

    • Media Queries 是检测设备屏幕尺寸的常用方法。
    • 常见的响应式布局示例:@media (max-width: 768px) { ... }

    Make Typography Responsive

    • 使用 Viewport units(vw, vh)来实现响应式字体大小。
    • 注意区别: viewport units 是相对设备的高度或宽度,而百分比是相对父容器。

    CSS Flexbox

    Flex Container

    • 使用 display: flex 将元素转换为 flexbox 容器。
    • Flex-direction 属性控制 flexbox 的方向:
      • flex-direction: row:默认,元素从左到右排列。
      • flex-direction: column:元素从上到下排列。

    Flex Items

    • Flex items 是 flexbox 中的内容元素。
    • Justify-content 属性定义 flexbox 内的对齐方式:
      • justify-content: flex-start:左对齐。
      • justify-content: center:居中。
      • justify-content: flex-end:右对齐。
      • justify-content: space-around:均匀分布。
      • justify-content: space-between:两端对齐。

    Align-items

    • Align-items 定义 flexbox 内的垂直对齐方式:
      • align-items: flex-start:顶部对齐。
      • align-items: flex-end:底部对齐。
      • align-items: center:居中。
      • align-items: stretch:自动填充容器高度。
      • align-items: baseline:根据文本基线对齐。

    Flex-wrap

    • Flex-wrap 控制 flexbox 内的布局:
      • flex-wrap: nowrap:默认,不换行。
      • flex-wrap: wrap:允许元素换行。
      • flex-wrap: wrap-reverse:反向换行。

    CSS Grid

    Grid Container Properties

    • Display: grid:将元素转换为 grid 容器。
    • Grid-template-columnsGrid-template-rows 定义 grid 的列和行。
      • 示例:grid-template-columns: 100px 200px;
      • 示例:grid-template-rows: 50px 100px;

    Grid Column 和 Row Gap

    • Grid-column-gapGrid-row-gap 设置 grid 中的间隙。

    Grid Item Properties

    • Grid-columnGrid-row 定义 grid 中的位置。
    • Justify-selfAlign-self 控制 grid 中的对齐方式。

    其他

    给每个区域起个名字

    • Grid-template-areas 可以为 grid 的区域命名,方便定位。

    以上内容完整涵盖了 CSS Flexbox 和 Grid 的核心知识,帮助开发者更好地理解和应用这些布局系统。

    转载地址:http://ftjr.baihongyu.com/

    你可能感兴趣的文章
    Nodejs概览: 思维导图、核心技术、应用场景
    查看>>
    nodejs模块——fs模块
    查看>>
    Nodejs模块、自定义模块、CommonJs的概念和使用
    查看>>
    nodejs生成多层目录和生成文件的通用方法
    查看>>
    nodejs端口被占用原因及解决方案
    查看>>
    Nodejs简介以及Windows上安装Nodejs
    查看>>
    nodejs系列之express
    查看>>
    nodejs系列之Koa2
    查看>>
    Nodejs连接mysql
    查看>>
    nodejs连接mysql
    查看>>
    NodeJs连接Oracle数据库
    查看>>
    nodejs配置express服务器,运行自动打开浏览器
    查看>>
    NodeMCU教程 http请求获取Json中文乱码解决方案
    查看>>
    Nodemon 深入解析与使用
    查看>>
    NodeSession:高效且灵活的Node.js会话管理工具
    查看>>
    node~ http缓存
    查看>>
    node不是内部命令时配置node环境变量
    查看>>
    node中fs模块之文件操作
    查看>>
    Node中同步与异步的方式读取文件
    查看>>
    node中的get请求和post请求的不同操作【node学习第五篇】
    查看>>