[ 理解CSS| 青训营笔记]

这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天

学习前传

• CSS
  • CSS 简介
  • CSS 选择器及常用的
  • CSS的高级使用

学习简介

学会并使用CSS，运用到实际开发中

css是什么

• CSS: Cascading Style Sheets 层叠样式表, 用来定义页面元素的样式

HTML语法

• 不区分大小写(推荐小写)
• 空标签可以不闭合或者加/闭合(<input>,<img />)
• 属性值用双引号闭合
• 部分标签属性值可以省略(required, readonly…)

CSs选择器复习

• 通配选择器*

• 标签选择器tagName

• id选择器#id

• 类选择器.class

• 属性选择器

  • 没有值只有键[disabled]
  • 完全匹配值[type="pwd"]
  • 开头[type^="pwd"]
  • 结尾[type$="pwd"]

• 伪类选择器

  • 状态伪类:a有LVHA,在按下后有:force状态(LVFHA)
  • 结构伪类:first-child…

• 选择器组合

  • AB同时满足AB
  • A B选择B如果B是A的子孙
  • A>B选择B如果B是A的子元素
  • A~B选择B如果B在A后且与A同级
  • A+B选择B如果他紧随在A后面

CSS布局相关技术

• 常规流(文档流)

  • 行级
  • 块级
  • 表格布局
  • FlexBox
  • Grid布局

• 浮动

• 绝对定位

Flex Box

• flex-dirextion: row|row-reverse|column|column-reverse: 摆放流向
• justify-content: flex-start|flex-end|center|space-between|space-around|space-evenly: 主轴对齐方式
• align-items: flex-start|flex-end|center|stretch|baseline侧轴对齐
• align-self: 为特定元素设置侧轴对齐方式
• order: 手动指定顺序
• flex-grow: 当容器有剩余空间的时候的伸展能力
• flex-shrink: 当容器剩余空间不足的时候的压缩能力(默认是1)
• flex-base: 容器的自然长度
• flex: 缩写

Grid 布局

• 使用display: grid创建网格容器
• 使用grid-template-X: 将容器划分为网格
• 设置每一个子元素占用那些行列
• 使用grid-area: X/X/X/X或grid-column/row-start/end指定元素所占位置, 允许重叠

Float 布局

本质是做图文环绕的, 在没有先进布局的时候还用来做各种布局, 现在已经不需要float做布局了, 除了图文环绕, 其他不需要用float做

总结

第二天青训营学习完后，我觉得最受用的是CSS中的布局，每次遇到页面布局就头疼，因为不会页面的布局基本上就写不出来一个页面，所以布局是非常重要的一环。