一、文字

文字超出部分打点

white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;

More

http://ruyic.com/blog/html/view.php?id=318

二、背景

repeat 重复

background-repeat: no-repeat; /* 相当于写了下面两个 */
background-repeat-x: no-repeat; /* 横坐标方向不重复 */
background-repeat-y: no-repeat; /* 纵坐标方向不重复 */

background-repeat: repeat-x; /* 只在x轴横向重复 */
background-repeat: repeat-y; /* 只在纵向重复 */

background-repeat: repeat; /* 默认值repeat，两个方向都重复 */

http://ruyic.com/blog/html/view.php?id=332

background-size 预设值

1. contain

2. cover

background-repeat: no-repeat; /* 去掉重复 */
background-size: contain; /* 保证图片能完整的显示到div盒子里面 */

background-repeat: no-repeat; /* 去掉重复 */
background-size:cover /* 意思背景图一定要把这个区域撑满 */

background-size 数值

background-repeat: no-repeat;
background-size: 300px 200px; /* 可以自己设置一些数值，宽300像素，高200像素 */

background-repeat: no-repeat;
background-size: 100%; /* 意思是横向上一定要撑满，纵向上按照比例缩放 */

background-repeat: no-repeat;
background-size: 100% 100%; /* 写两个100%，第一个表示横向撑满，第二个表示纵向撑满，于是背景图比例上就发生了变化 */

background-position 背景图的位置

预设值分别设置横向和纵向的位置

left

bottom

right

top

center

background-repeat: no-repeat;
background-position: center; /* 表示横向居中，同时纵向也居中 */

background-repeat: no-repeat;
background-position: center top; /* 横向居中，纵向靠上 */

也可以写数值，或百分比（百分比用的不多）

background-repeat: no-repeat; 
background-position: 0px 20px; /* 第二个数字表示纵向的Y坐标，离上边的距离 */

attachment 

background-attachment  通常用于设置背景图是否固定

background-repeat: no-repeat; /* 设置不重复 */
background-size: 100%; /* 横向100%，纵向自适应 */

background-attachment: fixed; /* 设置背景图是相对于视口的，有点类似于固定定位 */

速写属性（简写）

 background: url('./pic.jpg')   不重复   位置/尺寸   固定   颜色;  

位置和尺寸都可以写数值  50% 50%/100%  写一个斜杠

1. 斜杠前写位置

2. 斜杠后面写尺寸

background: url('pic.jpg') no-repeat 50% 50%/100% fixed #ffd200;

位置这里也不可以不写  50% 50%  可以简单的写预设值center，总之顺序要先写位置，再写尺寸才行

background: url('pic.jpg') no-repeat center/100% fixed #ffd200;

https://www.w3school.com.cn/cssref/pr_background-color.asp

background-color: color|transparent|initial|inherit;

 background: url('../img/logo.png') center/contain no-repeat;  

center 表示居中

contain  保证图片能完整的显示到div盒子里面

三、弹性盒

529  CSS3弹性盒模型

579  CSS3语言提升布局

1、弹性项目

display

触发弹性盒模型

flex

inline-flex

flex-direction

设置主轴方向（常用）

row 默认值，主轴水平方向，从左向右排列

cloumn 主轴垂直方向，自上向下排列

row-reverse 主轴还是水平方向，自右向左排列

column-reverse 主轴垂直方向，自下向上排列

flex-wrap

换行（常用）

nowrap 默认值，不换行

wrap 换行

wrap-reverse 倒着换行，有点怪的排列，这种应用很少出现基本上不用

justify-content

基于主轴做的对齐方式

flex-start 默认值，在主轴开头对齐

flex-end 在主轴结尾对齐

center 居中（主要用到）

space-between 在主轴上平均分配  多加几个子元素方便看到效果

space-around 设置子元素两侧的空间，space是空隙的意思，round之前见过

align-items

设置交叉轴的对齐方式，单行文本

flex-start 在交叉轴的上面

flex-end 交叉轴的下面

center 居中

baseline 基于文字底线对齐

stretch 默认值，伸展/拉长/拽宽/撑大的意思，如果子元素不设置高度，默认值auto，子项高度撑满父元素内容区

align-content

设置交叉轴的对齐方式，多行文本

flex-start 交叉轴起始端

flex-end 交叉轴的尾部

center 交叉轴的中间

space-between 上下顶头，中间平均分配

space-around 行与行之间上下平均分配空间

stretch 把元素的高去掉，这个值才生效（默认值）

2、项目属性

order

默认值是0

值越小排的越靠前，要排到默认值前面最好填负数

align-self 对齐

子项作为一个单独的个体，它基于交叉轴的分配状况

auto  默认值，父元素align-items的值

flex-start  交叉轴上面

flex-end 交叉轴下面

center 交叉轴中间

baseline 文字基线

stretch

 flex : 0 1 auto 

flex速写属性：拉伸比例  压缩比例  初始化尺寸

flex-grow

默认值是0

grow扩大/增加/长高的意思

flex-shrink

默认值是1

shrink收缩/退缩/减少的意思

flex-basis

默认值是auto

basis代表基础占有多少空间，用来代替width属性优先级高于width

四、鼠标

cursor

auto 默认，让浏览器来控制，比如遇到文字变成选择光标，在文本框变成输入状态

poiner 小手

e-resize 表示重新调整尺寸

help 帮助，鼠标箭头多了一个问号

not-allowed 禁止（分页）

text（分页）