个人学习css的一些笔记

写在前面

受够了每次改样式都要去找度娘的这件事了，决定开始重视css。明明很多都是以前查过、解决过的问题，隔一段时间就忘了。于是乎，本篇诞生了( 开篇撒花! ***)

8.26 CSS动画

过渡 transition

1.transition-propety

列举要设置动画的所有属性，如：left、margin-left、height 和 color。 大多数属性都是可以的。all 表示应用在所有属性上。

2.transition-duration

动画持续的时间。单位为秒 s 或者毫秒 ms

3.transition-delay

设定动画延迟开始的时间。可以是负值。那么动画将会从整个过渡的中间时刻开始渲染。例如，对于 transition-duration: 2s，同时把 delay 设置为 -1s，则过渡动画持续 1 秒钟，并且从正中间开始渲染。

4.transition-timing-function

• cubic-bezier

  贝塞尔曲线 原理(了解)

  • x表示时间：0为开始，1标志着结束（即对应transition-duration的结束时刻）

  • y表示过程的完成度：0为属性的初始值，1为属性的最终值（即对应属性的新值）

    Tip： 其实可以用时间-路程 (高中物理)模型来理解其坐标图,，曲线的斜率即为速度。因此不难理解贝塞尔曲线的斜率对应的就是属性改变的快慢

    

  cubic-bezier(x2, y2, x3, y3)

  • 接收两个中间点的坐标作为参数（起始和终止点默认为(0,0)，(1,1), 因此总共有4个点来确定曲线)

    注：如果参数只接收到一个点，该属性会失效

    

  • 坐标值可以有负值。(类似惯性的现象)

    cubic-bezier(0.5, -1, 0.5, 1.5)

    

  CSS 提供几条内置的曲线：linear、ease、ease-in、ease-out 和 ease-in-out。

  linear 其实就是 cubic-bezier(0, 0, 1, 1) 的简写，图像是一条斜率不变的直线，

  其它几个的贝塞尔曲线的简写如下：

  

  挂一个能找到合适的贝塞尔曲线的网站：http://cubic-bezier.com/

5.transitionend事件

CSS 动画完成后，会触发 transitionend 事件，可用HTML DOM的addEventListener(event, function)进行捕捉

6.Keyframes 关键帧动画

这个也有好多参数哎哟我去..

CSS基础

一切皆盒子

1.CSS选择器

1.1 选择器类型

• 行内选择器：style=""
• ID选择器：#my-id…
• class选择器：.my-class…
• 标签名样式：div, img, title …
• 伪类：
  • 简单伪类：:first-child, :last-child，:nth-of-type(n)…
  • 用户行为伪类：:hover, :focus, :touch…
• 伪元素：::before, ::after，::first-line，::first-letter…

此外，还有属性选择器等等，更多详情请参阅 选择器…

nth-of-type()中的nth并不是什么单词的缩写，详见

1.2 优先级

• 如果一个容器被多条css语句定义，优先顺序为：行内样式 > ID选择器 > 类(class)选择器 > 标签名样式

  不难发现，约束越严格，优先级越高

• ! important，可以更改CSS样式优先级，使该条样式属性声明具有最高优先级。

  box{
  	color:red !important;
  }

2.盒模型

2.1 块级、内联

• 块级(block)：<h1>, <p>…
• 内联(inline)：<a>,<span>…
• inline-block：通常用于不希望目标换行，但需要设定宽高的情况

盒模型

默认情况下，块级元素的宽度是父元素的100％，高度与本身内容一样。

• Content box 内容

• Padding box 内边距

• Border box 边宽

• Margin box 外边距

  父子关系

  1. 垂直方向上，margin-top/margin-bottom设置为auto时，自动计算为0，因此不能实现垂直居中

  2. 父元素高度设置为auto时，父元素将以子元素上下边框的距离作为自身高度。

     若是父元素设置了上/下内边距，或者是上/下边框，那么将以子元素的上下外边距间的距离作为高度

     tip: width,height未设置时都是auto

完整的css盒模型应用于块级盒子，内联元素仅使用盒模型的部分定义

替代盒模型

• 标准模型(默认)：width = content, 这里的width只是内容的宽度，不是实际宽度

• 替代模型：width = content+ border + padding

  设置：box-sizing: border-box 。如果你希望所有盒模型都使用替代模型，只需

  html{
      box-sizing: border-box;
  }

3.文本

匿名文本：指所有未包含在行内元素中的字符串

em框：高度由当前的font-size确定

内容区：简单起见以em框定义，注意替换元素还需加上边框(border)、内边距(padding)

行间距：只应用于非替换蒜素，line-height - font-size,实际上得到的值还需要分成两半(半间距)，应用到内容区的顶部和底部

常见属性：

text-indent 缩进

text-align 对齐方式

line-height 行高，行基线之间的距离。因为默认会继承该属性，通常不给单位会好些，会自动按块字体的大小缩放

vertical-align 垂直对齐文本。只应用于行内元素和替换元素

word-spacing 单词间隔

letter-spacing 字母间隔

text-transform 文本转换，大小写、首字母等

text-decoration 文本装饰，上、下划线，贯穿线等

text-shadow 文本阴影

direction 文本方向

样式化链接

• Link 未访问

• Visited 已访问

• Hover 光标停留

• Focus 被选中(如使用键盘tab

• Active 链接激活后

  注意顺序：LoVe Fears HAte.

4.布局

1.flex

弹性盒子是一种用于按行或按列布局元素的一维布局方法。

• main axis 主轴
• cross axis 交叉轴

常用属性

• flex-direction 确定主轴方向

• flex-wrap 换行

• flex 常用例子如下：

  flex: 200px，则宽度至少为200px

  flex: 1，无单位的比例，动态尺寸，如有两个元素该值都设为1，则各占50%可用的空间

• flex-flow flex-direction和flex-wrap的缩写

  flex-direction: row;
  flex-wrap: wrap;

  等价于

  flex-flow: row wrap;

• order 元素排序，默认值为0，越大越靠后，可以是负值。例如将第一个按钮移到末尾

  button:first-child {
    order: 1;
  }

• justify-content: 控制元素在主轴的位置

• align-items: 控制元素在交叉轴的位置

flex全写

• flex-grow 即前文提到的无单位比例
• flex-shrink 处理溢出项这个是进阶用法，暂不研究
• flex-basis 即前文提到的元素最小值

2.grid(网格)

网格是由一系列水平及垂直的线构成的以一种布局模式。

• column 列
• row 行
• gutter 沟槽(间隙)

常用单位: fr

网格间隙

• grid-column-gap 列间隙

• grid-row-gap 行间隙

• grid-gap 同时定义行列间隙

  后来标准把前缀grid-去除，改成gap

重复构建行/列：repeat

显式网格与隐式网格（懵）

大小限制：minmax()

自动填充：auto-fill

基于线的元素放置

• grid-column 基于grid-column-start,grid-column-end的缩写
• grid-row 基于gird-row-start和gird-row-end的缩写

基于grid-template-areas属性的元素放置

• 需要填满网格的每个格子
• 一个连续的区域必须是一个矩形
• 格子留空时使用.占位

3.浮动

需要注意的应该就是浮动导致的高度计算问题了。

使用了float属性后，自身会脱离文档流(也就是在文档流中高度为0)，因此可能会出现以下情况

• 外部包裹的盒子没有撑开，如下图的蓝色框

  

• 浮动元素下方的盒子元素block使用margin-top会失效

  带有float属性的元素在文档流中高度为0，因此会出现意料之外的情况

解决办法：清除浮动。在使用了float属性的元素后添加一个盒子(如div)，再添加css属性clear即可

4.定位

文档流

static：占据正常的文档流，浏览器默认

relative：占据正常的文档流，在不改变文档流的情况下移动元素（通过top,bottom,left,right）

absolute：脱离正常的文档流，不占据文档流空间。常用于：弹出信息框，控制菜单，翻转面板，以及可以在页面上的任何地方拖放的UI功能……

• 上下文：top，left等属性都需要有一个参考对象。通常是选取离得最近、并且有显示定义position属性(非默认static)的父元素。

  **更改上下文： **如将参考对象更改为父元素<div>，可在父元素中设置position属性即可实现

  position: relative;

• z-index：调整重叠的absolute的堆叠顺序，默认值为0，数值越大越靠前

• 可实现绝对定位的垂直居中

  在子元素中使用top:0，bottom:0后再使用margin: auto,0即可实现，详情见《css权威指南第三版》p331

fixed：绝对定位的工作方式完全相同，只有一个主要区别：绝对定位固定元素是相对于元素或其最近的定位祖先，而固定定位固定元素则是相对于浏览器视口本身常用于顶部导航菜单

sticky：可用于使导航栏随页面滚动直到特定点，然后粘贴在页面顶部。蛮有意思的

5.多列布局

基本

column-count：列数

column-width：列宽

修改样式

column-gap：列间间隙

column-rule：列间添加分割线，线利用的是gap的空间(不占宽度)

break-inside：选择avoid时，可以避免列中内容(如文段)被分割成两部分

6.响应式设计

视口元标签

viewport。因为移动端常会谎报设备的视口宽度。如480px的设备可能会将视口宽度设为960px，这会导致你的媒体查询失效。因此需要加入下述内容

<meta name="viewport" content="width=device-width,initial-scale=1">

媒体查询

最简单的语法

@media media-type and (media-feature-rule){
    /* css rule go here */
}

例如，在width小于400px时把字体改成蓝色

@media screen and (max-width: 400px){
    body{
        color: blue;
    }
}

Flexible grid

使用灵活的网格，就不必再免去适配各种宽度的设备。

早期用于实现响应式布局的只有float，通常是让每一个元素都带有百分比，并且总和不超过100%，以实现适应各种宽度的屏幕

Modern layout technologies

多列布局(Multiple-column layout)，弹性布局(Flexbox)，网格布局(Grid)等….相比起以前只有float，要方便得多了

7.支持旧浏览器

构建回滚

传统的布局(如float)会被grid布局覆盖掉。因此可通过同时给出这两种布局的实现来支持旧浏览器

回滚方式

inline-block：可被flex和grid布局覆盖

table：暂时没用过

Multiple-column Layout(多列布局)

flex：可被grid布局覆盖

存在的问题

布局相关的属性可以覆盖，但像width等的属性可能会影响结果。比如在grid布局和float布局中都对宽度进行了一些限制，那么float中的对width限制会影响grid中的设定

解决办法：特性查询

检测当前环境是否支持grid，然后在实施一些相应的操作

@supports (display: grid) {
    .item{
        width: auto; /* 重新设置相关属性覆盖float的影响 */
    }
}

杂记

flex在对一系列元素排列时，对间隙的控制很有限。我甚至找不到相关属性，目前了解到的只有justify-content: space-around或者是justify-content: space-between

而grid的话，有gap属性，感觉好用点

杂记(暂不归类

盒模型

• padding
• border
• margin