css

bfc（Block Formatting Context）

实现 bfc 方法

1. body 元素
2. 设置浮动，不包括 none
3. 设置定位，absoulte 或者 fixed
4. 设置 overflow，即 hidden，auto，scroll
5. 行内块显示模式，inline-block
6. 表格单元格，table-cell
7. 弹性布局，flex

相对单位大小

单位	相对于
em	在 font-size 中使用是相对于父元素的字体大小，在其他属性中使用是相对于自身的字体大小，如 width
ex	字符“x”的高度
ch	数字“0”的宽度
rem	html 根元素的字体大小
lh	元素的 line-height
vw	视窗宽度的 1%
vh	视窗高度的 1%
vmin	视窗尺寸的 1%
vmax	视图尺寸的 1%

percent: 如果将元素的字体大小设置为百分比，那么它将是元素父元素字体大小的百分比。如果使用百分比作为宽度值，那么它将是父值宽度的百分比
使用百分比作为元素外边距（margin）或填充（padding）的单位时，值是以包含块的内联尺寸进行计算的，也就是元素的水平宽度。请记住一个事实，当你使用百分比作为元素外边距或填充的单位时，你将得到一个相同尺寸的外边距或填充。

object-fit

当使用 object-fit 时，替换元素可以以多种方式被调整到合乎盒子的大小。cover fill contain
在对替换元素使用各种 CSS 布局时，你可能会发现他们的表现方式与其他元素有一些细节上的差异。例如，flex 或者 grid 布局中，默认情况下元素会被拉伸到充满整块区域。但是图像不会被拉伸，而会对齐到网格区域或者弹性容器的起始处。

/* 为了强制图像拉伸，以充满其所在的网格单元，你必须做类似于下面的事情：*/
img {
width: 100%;
height: 100%;
}

EMMENT语法

1. 生成标签直接输入标签名 按 tab 键即可 比如 div 然后按 tab 键，就可以生成
2. 如果想要生成多个相同标签 加上 * 就可以了，比如 div*3 就可以快速生成3个 div
3. 如果有父子关系的标签，可以用 > 比如 ul > li 就可以了
4. 如果有兄弟关系的标签，用 + 就可以了 比如 div+p
5. 如果生成带有类名或者 id 名字的，直接写 .demo 或者 #two tab 键就可以了
6. 如果生成的类名是有顺序的，可以用自增符号 $
7. 如果想要在生成的标签内部写内容可以用 {} 表示

snipaste工具

Snipaste 是一个简单但强大的截图工具，也可以让你将截图贴回到屏幕上
常用快捷方式：

1. F1 可以截图，同时测量大小，设置箭头 书写文字等
2. F3 在桌面置顶显示
3. 点击图片，alt 可以取色（按下 shift 可以切换取色模式）
4. 按下 esc 取消图片显示

盒子宽度（在父元素宽/高固定的情况下）

如果盒子本身没有指定 width/height 属性，则此时 padding 不会撑开盒子大小

解决嵌套元素垂直外边距塌陷问题

对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值
解决方案：

1. 可以为父元素定义上边框
2. 可以为父元素定义上内边距
3. 可以为父元素添加 overflow: hidden

清除浮动

1. 额外标签法也称为隔墙法，是W3C推荐的做法
2. 父级添加 overflow 属性
3. 父级添加 after 伪元素
4. 父级添加双伪元素

<div class="fahter clearfix">
  <div class="big">big</div>
  <div class="small">small</div>
  <div class="clear">额外标签法</div>
</div>

/* 方式一: 额外标签法*/
.clear{
  clear: both;
}
/* 方式二 */
.fahter{
  width: 400px;
  border: 1px solid deeppink;
  overflow: hidden;
}
/* 方式三 */
.clearfix::after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
  content: "";
  display: block;
  height: 0;
  clear:both;
  visibility: hidden;
}
.clearfix{
  *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}
/* 方式四 */
.father{
  border: 1px solid black;
  *zoom: 1;
}
.clearfix::after,.clearfix::before{
  content: "";
  display: block;
  clear: both;
}

CSS属性书写顺序

1. 布局定位属性： display / position / float / clear / visibility / overflow (建议 display 第一个写，毕竟关系到模式)
2. 自身属性： width / height / margin / padding / border / background
3. 文本属性： color / font / text-decoration / text-align / vertical-align / white-space / word-break
4. 其他属性（CSS3）： content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient...

相对定位

相对定位是元素在移动位置的时候，是相对于它原来的位置来说的（自恋型）

选择器 { position: relative; }

相对定位的特点：

1. 它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）
2. 原来在标准流的位置继续占有，后面的盒子仍然以标准的方式对待它（不脱标，继续保留原来位置）

绝对定位

绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的

选择器 { position: absolute; }

绝对定位的特点：

1. 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document 文档）
2. 如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置
3. 绝对定位不再占有原来的位置（脱标）

z-index属性只有定位的盒子才有这个属性

绝对定位、固定定位与浮动的特殊性

1. 行内元素添加绝对或者固定定位，可以直接设置高度和宽度
2. 块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小

icomoon

1. 网站上选择内容并下载，加入 font 文件夹，cssStyle 样式
2. 复制图标内容 加 font-family 属性
（追加图标: 选 selection.json 文件上传，追加后下载替换）

三角形

width: 0;
height: 0;
border-color: transparent red transparent transparent;
border-style: solid;
border-width: 22px 8px 0 0;

width: 0;
height: 0;
border: 30px solid transparent;
border-top-color: red;

vertical-align

• 图片、表单和文字对齐
  图片和表单都属于行内块元素，默认的 vertical-algin 是基线对齐
  
  此时可以给图片、表单这些行内块元素的 vertical-align 属性设置为 middle 就可以让文字和图片垂直居中对齐了
• 解决图片底部默认空白缝隙问题
  bug: 图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐
  • 给图片添加 vertical-align: middle / top / bottom
  • 把图片转换为块级元素 display: block;

省略号

• 单行文本溢出显示省略号--必须满足三个条件

  /* 1. 先强制一行内显示文本 */
  white-space: nowrap;
  /* 2. 超出部分隐藏 */
  overflow: hidden;
  /* 3. 文字用省略号替代超出的部分 */
  text-overflow: ellipsis;
  

• 多行文本溢出显示省略号
  多行文本溢出显示省略号，有较大兼容性问题，适合于 webkit 浏览器或移动端（移动端大部分是 webkit 内核）

  overflow: hidden;
  text-overflow: ellipsis;
  /* 弹性伸缩盒子模型显示 */
  display: -webkit-box;
  /* 限制在一个块元素显示的文本的行数 */
  -webkit-line-clamp: 2;
  /* 设置或检索伸缩盒对象的子元素的排列方式 */
  -webkit-box-orient: vertical;
  

类选择器 伪类选择器 属性选择器权重一样

元素选择器 伪元素选择器权重一样

css3新属性

1. CSS3滤镜 filter

filter CSS属性将模糊或颜色偏移等图形效果应用于元素

filter: 函数();  例如: filter: blur(5px);  blur 模糊处理 数值越大越模糊

2. CSS3 过渡（谁做过渡给谁加）

transition: 要过渡的属性 花费时间 运动曲线 何时开始;

3. 2D转换之移动 translate

2D 移动是 2D 转换里面的一种功能，可以改变元素在页面中的位置，类似定位

transform: translate(x, y);
transform: translateX(n);
transform: translateY(n);

1. 定义 2D 转换中的移动，沿着X和Y轴移动元素
2. translate 最大的优点：不会影响到其他元素的位置
3. translate 中的百分比单位是相对于自身元素的 translate(50%, 50%);
4. 对行内标签没有效果

4. 2D转换之旋转 rotate

2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转

transform: rotate(度数);

1. rotate 里面跟度数，单位是deg 比如 rotate(45deg)
2. 角度为正时，顺时针，负时，为逆时针
3. 默认旋转的中心点是元素的中心点

5. 2D转换中心点 transform-origin

我们可以设置元素转换的中心点

transform-origin: x y;

1. 注意后面的参数 x 和 y 用空格隔开
2. x y 默认转换的中心点是元素的中心点 (50%, 50%)
3. 还可以给 x y 设置像素或者方位名词 (top bottom left right center)

6. 2D转换之缩放 scale

缩放，顾名思义，可以放大和缩小。只要给元素添加上了这个属性就能控制它放大还是缩小

transform: scale(x, y);

1. 注意其中的 x 和 y 用逗号分隔
2. transform: scale(1, 1); 宽和高都放大了一倍，相当于没有放大
3. transform: scale(2); 只写一个参数，第二个参数则和第一个参数一样，相当于 scale(2, 2);
4. transform: scale(0.5, 0.5); 缩小
5. scale缩放最大的优势: 可以设置转换中心点缩放，默认以中心点缩放的， 而且不影响其他盒子

动画的基本使用

制作动画分为两步：

1. 先定义动画
2. 再使用(调用)动画

1. 用 keyframes 定义动画(类似定义类选择器)

@keyframes 动画名称 {
	0% {
		width: 100px;
	}
	100% {
		width: 200px;
	}
}

2. 动画常用属性

属性	描述
@keyframes	规定动画
animation	所有动画的简写属性，除了 animation-play-state 属性
animation-name	规定@keyframes 动画的名称（必须的）
animation-duration	规定动画完成一个周期所花费的秒或毫秒，默认是0（必须的）
animation-timing-function	规定动画的速度曲线，默认是 ease
animation-delay	规定动画何时开始，默认是0
animation-iteration-count	规定动画被播放的次数，默认是1，还有 infinite
animation-direction	规定动画是否在下一周期逆向播放，默认是 normal，alternate 逆播放
animation-play-state	规定动画是否正在运行或暂停，默认是 running，还有 pause
animation-fill-mode	规定动画结束后状态，保持 forwards， 回到起始 backwards

3D移动 translate3d

3D 移动在 2D 移动的基础上多加了一个可以移动的方向，就是 z 轴方向

1. transform: translateX(100px); 仅在 x 轴上移动
2. transform: translateY(100px); 仅在 y 轴上移动
3. transform: translateZ(100px); 仅在 z 轴上移动（注意： translateZ 一般用 px 单位）
4. transform: translate3d(x, y, z); 其中 x, y, z 分别指要移动的轴的方向的距离

透视 perspective

在 2d平面产生近大远小视觉立体，但是只是效果二维的

1. 如果想要在页面产生 3d 效果需要透视（理解成 3d 物体投影在 2d 平面内）
2. 模拟人类的视觉位置，可认为安排一只眼睛去看
3. 透视我们也称为视距：视距就是人的眼睛到屏幕的距离
4. 距离视觉点越近的电脑平面成像越大，越远成像越小
5. 透视的单位是像素

透视写在被观察元素的父盒子上面的
d: 就是视距，视距就是一个距离人的眼睛到屏幕的距离
z: 就是 z 轴，物体离屏幕的距离，z 轴越大（正值）我们看到的物体就越大

3D旋转 rotate3d

3d 旋转指可以让元素在三维平面内沿着 x 轴，y 轴，z 轴或者自定义轴进行旋转

1. transform: rotateX(45deg); 沿着 x 轴正方向旋转45deg
2. transform: rotateY(45deg); 沿着 y 轴正方向旋转45deg
3. transform: rotateZ(45deg); 沿着 z 轴正方向旋转45deg
4. transform: rotate3d(x, y, z, 45deg); 沿着自定义轴旋转45deg，x y z 是表示旋转轴的矢量，是标志着你是否希望沿着该轴旋转，最后一个标志旋转的角度

3D呈现 transform-style

1. 控制子元素是否开启三维立体环境
2. transform-style: flat; 子元素不开启 3d 立体空间 默认的
3. transform-style: preserve-3d; 子元素开启立体空间
4. 代码写给父级，但是影响的是子盒子

私有前缀

浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无需添加

1. -moz-: 代表 firefox 浏览器私有属性
2. -ms-: 代表 ie 浏览器私有属性
3. -webkit-: 代表 safari, chrome私有属性
4. -o-: 代笔 Opera 私有属性

-moz-border-radius: 10px;
-ms-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;

移动端

移动端布局和之前我们学习的 pc 端有所区别

1. 单独制作移动端页面（主流）

• 流式布局（百分比布局）
• flex 弹性布局（强烈推荐）
• less + rem + 媒体查询布局
• 混合布局

2. 响应式页面兼容移动端（其次）

• 媒体查询
• bootstarp

flex

线性渐变

background: linear-gradient(起始方向, 颜色1, 颜色2, ...);
background: -webkit-linear-gradient(left, red, blue);
background: -webkit-linear-gradient(left top, red, blue);

背景渐变必须添加浏览器私有前缀
起始方向可以是：方位名词或者度数，如果省略就是 top

媒体查询

@media mediatype and|not|only (media featue) {
	CSS-Code;
}

1. 用 @media 开头 注意 @ 符号
2. mediatype 媒体类型
3. 关键词 and not only
4. media feature 媒体特性必须有小括号包含

引入资源

当样式比较繁多的时候，我们可以针对不同的媒体使用不同 stylesheets。原理就是直接在 link 中判断设备的尺寸，然后引用不同的 css 文件

<!-- link 相比内部样式还可以利用浏览器缓存加快用户访问的速度 -->
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="myStyleSheet.css" />

rem

1. rem 适配方案技术使用

1. less + 媒体查询 + rem
2. flexible + rem （推荐）

2. rem实际开发适配方案 元素大小取值方法

• 最后的公式：页面元素的 rem 值 = 页面元素值（px）/（屏幕宽度 / 划分的份数）
• 屏幕宽度/划分的份数 就是 html font-size 的大小
• 或者：页面元素的 rem 值 = 页面元素值（px）/ html font-size 字体大小