Css

主要掌握样式属性,它负责给html元素排版、设定外观

1.层叠

原则: 后面的覆盖前面的

样式表加载顺序: 浏览器默认 < 外部样式表 < 内部样式表 < 内联样式

最高优先级: !important

2.样式的语法

选择器: { 样式: 值; }

3.选择器

已在jQuery中描述

4.屏幕自适应

@media: screen and (max-width: 1000px) and (min-width: 700px) { 选择器 { 样式: 值; } }

电脑、手机、平板: screen

打印机: print

1.盒子模型

填充: padding: top right bottom left;

边框: border: width style color;

边距: margin: top right bottom left;

[占地面积]: 内容 + padding + border + marging（取相邻最大的值）

: 盒子类型box-sizing

content-box: width, height指的是内容（default）

border-box: width, height指的是边框

2.块级元素（display:block）

排列方式: 自上而下

占地面积: 内容 + padding + border + marging（取相邻最大的值）

3.内联元素（display:inline）

排列方式: 从左向右,满了换行

占地面积: 水平方向与块级元素相同,垂直方向以line-height为准

4.多列排版

排列方式: 自上而下,满了换列

均匀分配: columns: 间距px 列数;

5.复杂定位

: ①找参照物 position

static: 在文档流中

relative: 参照物是static时的自己,在文档流中偏移

absolue: 参照物是已定位的父容器（非static）,不在文档流中,可能重叠

fix: 参照物是窗口,不在文档流中,可能重叠

sticky: 窗口之内正常；将要滚动到窗口外时,自动切换为fix（黏住）

: ②设置偏移

top/left/bottom/right: 两个相同边的距离

: ③重叠相关

z-index: 哪一层（谁在上，谁在下）

opacity: 透明度（不完全遮挡）

: ④浮动相关

float: 方向; （在父元素内部浮动）

clear: 方向; （指定方向，不追随浮动元素，自动换行）

1.背景

background: color url(image) repeat attachment position;

background-size: 图片大小

background-origin: 图片的范围（content-box/padding-box/border-box）

2.文字

颜色: color

字体: font-family

自定义字体: src: url('xxx.ttf')

大小: font-size

粗细: font-weight

斜体: font-style

（上、中、下）划线: text-decoration

单词大小写: text-transform

3.文字排列

行高: line-height

缩进: text-indent

水平对齐: text-align

垂直对齐: vertical-align

词间距: word-spacing

字间距: letter-spacing

处理空格（比如: 换行）: white-space

拆开单词（比如: 换行）: word-break

4.列表

list-style: type position url(image);

5.表格

标题位置: caption-side

隐藏空单元格: empty-cells

合并相邻边框: border-collapse

边框间距: border-spacing

如何计算列宽（内容/容器）: table-layout

1.边缘处理

文字阴影: text-shadow: 水平厚度垂直厚度模糊距离颜色;

边框阴影: box-shadow: 水平厚度垂直厚度模糊距离颜色;

文字裁剪: text-overflow: ellipsis/clip;（省略号/截取）

边框圆角: border-radius: 圆角半径;

2.二维变换(x轴, y轴)

移动: transform: translate(上px, 左px);

旋转: transform: rotate(顺时针角度deg);

缩放: transform: scale(x倍, y倍);

倾斜: transform: skew(x轴角度deg, y轴角度deg);

3.三维变换(x轴, y轴, z轴)

绕X轴旋转: transform: rotateX(顺时针角度deg);

绕Y轴旋转: transform: rotateY(顺时针角度deg);

绕Z轴旋转: transform: rotateZ(顺时针角度deg);

4.过渡(2帧动画)

缓慢切换: transition: 样式1 时间1s, 样式2 时间2s;

5.动画(n帧动画)

定义动画: @keyframes 名称{ 0%{样式1: 值1;} 40%{样式2: 值2;} 100%{样式3: 值3;} }

应用动画: animation: 名称时间s 速度函数(ease/linear) 播放次数;

1.复用

一个样式值: $变量: 样式值;

一段样式代码: @mixin 宏名(形参); ... @include 宏名(实参);

一个选择器的样式: @extend 某选择器;

2.增加可维护性

嵌套写法: 代替了祖孙选择器,样式结构看上去更清晰

文件导入: 将样式表分到多个文件中,可读性更好

注释灵活: 可留可删

3.灵活性

数学运算: 方便计算属性值

函数库: 方便各种运算

1.常用的度量单位:像素px, 几个字em, 百分比%
2.更多样式,可参考:https://www.w3school.com.cn/cssref/index.asp
3.关于sass,可参考:https://www.sasscss.com/guide