【理解CSS | 青训营笔记】

呆淋
73 阅读5分钟

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

  1. CSS（Cascading Style Sheets）:用来定义页面元素的样式。
  • 设置字体和颜色
  • 设置位置和大小
  • 添加动画效果
  1. 在页面中使用CSS
  • 外联<link rel="stylesheet" href="test.css">
  • 嵌入<style> p{color:red;} </style>
  • 内联<p style="color:red;">test</style>
  1. CSS是如何工作的： 图片.png
  2. 选择器Selector：
  • 找出页面中的元素，以便给它们设置样式
  • 使用多种方式选择元素
    1. 按照标签名，类名或id
    2. 按照属性
    3. 按照DOM树中的位置

  1. 通配选择器 * { font-size: 20px; }

  2. 标签选择器 h1 { color: orange; }

  3. id选择器 #logo { font-size: 60px; }

  4. 类选择器 .done { color: gray; }

  5. 属性选择器 [disabled] { background: #eee; } input[type="password"] { border-color: red; } a[href^="#"] { color: #f54767;} a[href$=".jpg"] { color: deepskyblue;}

  6. 伪类（pseudo-classes）

  • 不基于标签和属性定位元素
  • 几种伪类
    • -状态伪类 a:link { color: black; }
    • 结构性伪类li:first-child { color: coral }
  1. 组合（Combinators）

图片.png 12. 颜色-RGB 例：白色 #000000 rgb(0,0,0)

  1. 颜色-HSL

图片.png 14.alpha透明度，写法：rgba(0,0,0,x) x取0-1值表示透明度

  1. 字体（font-family）：
  • 字体列表最后写上通用字体
  • 英文字体放在中文字体前
  1. 字体样式
  • font-size：字体大小
  • line-height：行高
  • text-align：文字布局
  • spacing：文字间距
  • text-indent：首行间隔
  • text-decoration：文字修饰
  • white-space：处理文字空格空间
  1. 继承：某些属性会自动继承其父元素的计算值，除非显式指定一个值
  2. 初始值：
  • css中，每个属性都有一个初始值
  • 可以使用initi关键字显式重置为初始值
  1. CSS求值过程

图片.png 20. 布局（Layout）

  • 确定内容的大小和位置的算法
  • 依据元素，容器，兄弟节点和内容等信息来计算
  1. 布局相关技术
  • 常规流：行级，块级，表格布局，FlexBox,Grid布局
  • 浮动
  • 绝对定位
  1. 布局相关样式：
  • width：宽度
  • height：高度
  • padding：元素内边距
  • border：容器边框
  • margin：元素外边距
  • overflow:元素超出部分样式
  1. 块级 vs 行级

图片.png

图片.png 24. display属性

  • block：块级盒子
  • inline：行级盒子
  • inline-block：本身是行级，可以放在行盒中，可以设置宽高，作为一个整体不会被拆散成多行
  • none：排版时完全被忽略
  1. 常规流Normal Flow：
  • 根元素，浮动和绝对定位的元素会脱离常规流
  • 其他元素都在常规流之内（in-flow）
  • 常规流的盒子，在某种排版上下文中参与布局
  1. flex-direction:设置主轴的方向
  • row:默认值从左到右
  • row-reverse：从右到左
  • column：从上到下
  • column-reverse：从下到上
  1. justify-content:设置主轴上的子元素排列方式
  • center： 居中排列
  • start： 从行首开始排列
  • end ：从行尾开始排列
  • flex-start： 从行首起始位置开始排列
  • flex-end ：从行尾位置开始排列
  • left： 一个挨一个在对齐容器得左边缘
  • right： 元素以容器右边缘为基准，一个挨着一个对齐
  • space-between：均匀排列每个元素，首个元素放置于起点，末尾元素放置于终点
  • space-around：均匀排列每个元素，每个元素周围分配相同的空间
  • space-evenly：均匀排列每个元素，每个元素之间的间隔相等

图片.png 28. flex-wrap:设置子元素是否换行 29. align-content:设置侧轴上的子元素的排列方式(多行) 30. align-items:设置侧轴上的子元素的排列方式(单行)

  • center：元素位于容器的中心
  • flex-start：元素位于容器的开头
  • flex-end:元素位于容器的结尾
  • baseline:元素位于容器的基线上
  • stretch:默认值,元素被拉伸以适应容器 图片.png
  1. flex-flow:复合属性，相当于同时设置了flex-direction和flex-wrap
  2. align-self:定义flex子项单独在侧轴（纵轴）方向上的对齐方式
  • auto:默认值,元素继承了它的父容器的 align-items 属性
  • stretch:元素被拉伸以适应容器
  • center:元素位于容器的中心
  • flex-start:元素位于容器的开头
  • flex-end:元素位于容器的结尾
  • baseline：元素位于容器的基线上
  • initial：设置该属性为它的默认值
  • inherit：从父元素继承该属性
  1. order：设置或检索弹性盒模型对象的子元素出现的順序（注：****如果元素不是弹性盒对象的元素，则 order 属性不起作用）
  2. Flexibility：可以设置子项的弹性，当容器有剩余空间时，会伸展，若容器空间不够则会收缩
  • flex-grow：有剩余空间时的伸展能力
  • flex-shrink：容器空间不足时收缩的能力
  • flex-basis:没有伸展或收缩时的基础长度
  1. grid是一个 CSS 所有网格容器的简写属性
  • 显式网格属性： grid-template-rows、grid-template-columns 和 grid-template-areas
  • 隐式网格属性： grid-auto-rows、grid-auto-columns 和 grid-auto-flow
  • 间距属性： grid-column-gap 和 grid-row-gap
  1. float浮动：right右浮动 left左浮动 none不浮动
  2. position定位
  • static：默认值
  • relative：相对自身原本位置偏移，不脱离文档流
  • absolute：绝对定位，相对非static祖先元素定位
  • fixed相当于视口绝对定位

这是我参与【第五届青训营】伴学笔记创作活动的第2天，今天复习总结了css的相关知识点，学前端css基础很重要。

avatar
文章
阅读
粉丝