写代码啦
CSS 知识总结
回复数(0) 浏览数(63)
{{topic.upvote_count || 0}} 编辑 回复

最近稍微学习了一些 CSS 的基础知识,了解了一个大概。现在对最近学的这些知识做一个梳理总结,加强一下学习的记忆。

CSS 的历史

  1. CSS ,Cascading Style Sheets,层叠样式表。是由李爵士的同事提出的。
  2. 层叠的意思。
    • 样式层叠:可以同时对同一选择器做样式声明。
    • 选择器层叠:可以用不同的选择器对同一个元素做样式声明。
    • 文件层叠:可以使用多个CSS文件对同一HTML文件做声明。
  3. CSS 版本
    目前运用最广泛的是CSS2.1版本,现在开始已经不是以一整个版本升级了,而是分成各个模块,各个模块自主升级。

文档流

  1. 英文是Normal Flow,也就普通流,文档流是中文翻译。简单说指的就是元素按照它在HTML中的位置进行排布的过程。
  2. 流动方向。
    • inline: 元素从左到右,到达最右才会换行。
    • block:元素从上到下,每一个都另起一行。
    • inline-block:元素也是从左到右,到达最后换行,但是不会把元素分成两块。

盒模型

  1. content-box:内容盒。content-box的宽度就是内容的宽度。
  2. border-box:边框盒。border-box的宽度是内容的宽度+padding的宽度+border的宽度。

CSS 布局

CSS 目前用的大概是三种布局。

  1. Float 布局。
    • 子元素上加 float:left; 和 width
    • 父元素上加 .clearfix
      .clearfix::after{ content:''; display: block; clear: both; }
  2. Flex 布局
    • 父元素container的样式
      • 让一个元素变成Flex容器
        display: flex | inline-flex;
      • 改变items的流动方向(主轴)
        flex-direction: row | row-reverse | column | column-reverse;
      • 改变折行
        flex-wrap: nowrap | wrap | wrap-reverse;
      • 主轴对齐方式(默认是横轴)
        justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly
      • 次轴对齐方式(默认是纵轴)
        align-items: stretch | flex-start | flex-end | center | baseline
      • 多行内容
        align-content: flex-start | flex-end | center | stretch | space-betwteen | space-around
    • 子元素items的属性
      • item 上面加上 order
      • item 上面加上 flex-grow 控制自己长胖
      • item 上面加上 flex-shrink 控制自己变瘦
      • Flex 的属性还有很多,用到的时候可以去查询 MDN。
  3. Grid 布局
    • Grid 也分 containeritems
    • 成为 container
      display: grid | inline-grid;
    • 行和列
      grid-template-columns: 40px 50px auto 50px 40px; grid-template-raws: 25% 100px auto;
    • Grid 的属性很多,用法也很灵活,详细可以用的时候再查询,先了解一个大概就行。

CSS 定位

布局是屏幕平面的,定位是垂直于屏幕的。

  1. div 的分层
    • 最底层:background
    • border
    • 块级子元素
    • 浮动元素
    • 内联子元素
  2. position 属性
    • static:默认值,是指这个元素待在文档流里。
    • relative:相对定位。元素升起来,但是不脱离文档流。意思就是你占的位置是不变的,只是看起来不在原来的位置。
    • absolute:绝对定位。定位基准是最近的那个定位不是static的父元素。
    • fixed:固定定位。定位基准是viewport,但是这个定位有问题,手机上尽量不要使用。
    • sticky:粘滞定位。可以用来做导航,但是兼容性很差,用的少。

CSS 动画

  1. 动画的原理
    动画就是一幅幅静止的图片以一定的速度连续播放时,肉眼因为有视觉残像就会误以为画面在动。
  2. 浏览器渲染过程
    • 根据 HTML 文件构建一棵 HTML 树。
    • 根据 CSS 文件构建一棵 CSS 树。
    • 然后将两棵树合并成一棵渲染树(render tree)。
    • Layout 布局(文档流、盒模型、计算元素的大小和位置)。
    • Paint 绘制(边框颜色、文字颜色、其他颜色)。
    • Composite 合成
  3. 动画有两种做法
    • 用 transform 过渡
      • transition: 属性名 时长 过渡方式 延迟
      • 可以用 all 代替所有属性。
      • 过渡方式有很多,常用的有 linear、ease系列,具体什么含义可以参考 MDN 教程。
    • 用 animation
      • animation: 时长 | 过渡方式 | 延迟 | 次数 | 方向 | 填充模式 | 是否暂停 | 动画名
      • 时长: 1s或者1000ms
      • 过渡方式:跟transition取值一样,如linear
      • 次数:3或者2.4或者infinite,infinite可以让它一直动
      • 方向:reverse | alternate | alternate-reverse
      • 填充模式:none | forwards | backwards | both
      • 是否暂停:paused|running
      • keyframes 有两种写法
      • 第一种写法是 from to
        @keyframes slidein { from { transform: translateX(0%); } to { transform: translateX(100%); } }
      • 第二种写法是百分数
        @keyframes identifier { 0% { top: 0; left: 0; } 30% { top: 50px; } 68%, 72% { left: 50px; } 100% { top: 100px; left: 100%; } }

以上就是我最近初步学习 CSS 的一些知识整理和心得了,记录下来,以后有问题方便查询。

{{topic.upvote_count || 0}}

最近稍微学习了一些 CSS 的基础知识,了解了一个大概。现在对最近学的这些知识做一个梳理总结,加强一下学习的记忆。

CSS 的历史

  1. CSS ,Cascading Style Sheets,层叠样式表。是由李爵士的同事提出的。
  2. 层叠的意思。
    • 样式层叠:可以同时对同一选择器做样式声明。
    • 选择器层叠:可以用不同的选择器对同一个元素做样式声明。
    • 文件层叠:可以使用多个CSS文件对同一HTML文件做声明。
  3. CSS 版本
    目前运用最广泛的是CSS2.1版本,现在开始已经不是以一整个版本升级了,而是分成各个模块,各个模块自主升级。

文档流

  1. 英文是Normal Flow,也就普通流,文档流是中文翻译。简单说指的就是元素按照它在HTML中的位置进行排布的过程。
  2. 流动方向。
    • inline: 元素从左到右,到达最右才会换行。
    • block:元素从上到下,每一个都另起一行。
    • inline-block:元素也是从左到右,到达最后换行,但是不会把元素分成两块。

盒模型

  1. content-box:内容盒。content-box的宽度就是内容的宽度。
  2. border-box:边框盒。border-box的宽度是内容的宽度+padding的宽度+border的宽度。

CSS 布局

CSS 目前用的大概是三种布局。

  1. Float 布局。
    • 子元素上加 float:left; 和 width
    • 父元素上加 .clearfix
      .clearfix::after{ content:''; display: block; clear: both; }
  2. Flex 布局
    • 父元素container的样式
      • 让一个元素变成Flex容器
        display: flex | inline-flex;
      • 改变items的流动方向(主轴)
        flex-direction: row | row-reverse | column | column-reverse;
      • 改变折行
        flex-wrap: nowrap | wrap | wrap-reverse;
      • 主轴对齐方式(默认是横轴)
        justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly
      • 次轴对齐方式(默认是纵轴)
        align-items: stretch | flex-start | flex-end | center | baseline
      • 多行内容
        align-content: flex-start | flex-end | center | stretch | space-betwteen | space-around
    • 子元素items的属性
      • item 上面加上 order
      • item 上面加上 flex-grow 控制自己长胖
      • item 上面加上 flex-shrink 控制自己变瘦
      • Flex 的属性还有很多,用到的时候可以去查询 MDN。
  3. Grid 布局
    • Grid 也分 containeritems
    • 成为 container
      display: grid | inline-grid;
    • 行和列
      grid-template-columns: 40px 50px auto 50px 40px; grid-template-raws: 25% 100px auto;
    • Grid 的属性很多,用法也很灵活,详细可以用的时候再查询,先了解一个大概就行。

CSS 定位

布局是屏幕平面的,定位是垂直于屏幕的。

  1. div 的分层
    • 最底层:background
    • border
    • 块级子元素
    • 浮动元素
    • 内联子元素
  2. position 属性
    • static:默认值,是指这个元素待在文档流里。
    • relative:相对定位。元素升起来,但是不脱离文档流。意思就是你占的位置是不变的,只是看起来不在原来的位置。
    • absolute:绝对定位。定位基准是最近的那个定位不是static的父元素。
    • fixed:固定定位。定位基准是viewport,但是这个定位有问题,手机上尽量不要使用。
    • sticky:粘滞定位。可以用来做导航,但是兼容性很差,用的少。

CSS 动画

  1. 动画的原理
    动画就是一幅幅静止的图片以一定的速度连续播放时,肉眼因为有视觉残像就会误以为画面在动。
  2. 浏览器渲染过程
    • 根据 HTML 文件构建一棵 HTML 树。
    • 根据 CSS 文件构建一棵 CSS 树。
    • 然后将两棵树合并成一棵渲染树(render tree)。
    • Layout 布局(文档流、盒模型、计算元素的大小和位置)。
    • Paint 绘制(边框颜色、文字颜色、其他颜色)。
    • Composite 合成
  3. 动画有两种做法
    • 用 transform 过渡
      • transition: 属性名 时长 过渡方式 延迟
      • 可以用 all 代替所有属性。
      • 过渡方式有很多,常用的有 linear、ease系列,具体什么含义可以参考 MDN 教程。
    • 用 animation
      • animation: 时长 | 过渡方式 | 延迟 | 次数 | 方向 | 填充模式 | 是否暂停 | 动画名
      • 时长: 1s或者1000ms
      • 过渡方式:跟transition取值一样,如linear
      • 次数:3或者2.4或者infinite,infinite可以让它一直动
      • 方向:reverse | alternate | alternate-reverse
      • 填充模式:none | forwards | backwards | both
      • 是否暂停:paused|running
      • keyframes 有两种写法
      • 第一种写法是 from to
        @keyframes slidein { from { transform: translateX(0%); } to { transform: translateX(100%); } }
      • 第二种写法是百分数
        @keyframes identifier { 0% { top: 0; left: 0; } 30% { top: 50px; } 68%, 72% { left: 50px; } 100% { top: 100px; left: 100%; } }

以上就是我最近初步学习 CSS 的一些知识整理和心得了,记录下来,以后有问题方便查询。

63
回复 编辑