学习菜鸟教程
火狐-moz- 谷歌 Safari -webkit- 前面都加这个，可能才生效
边框
border: 1px solid #ddd 粗细 样式 样色 经常和border-radius 一块用
border-radius: 50px 20px 第一个左右 第二个右左 border-top-left-radius …
box-shadow: 10px 5px 10px 0 #888888 第一个右边 第二个下边 第三个模糊半径 第四个扩散半径 第五个颜色
border-image:url(./logo.png) 10 60 round 10-上下切片数量 60左右 round循环 stretch 单张拉伸
背景
背景图像边界框的相对位置 border-box
背景图像的相对位置的内容框 content-box
多个背景图片写法
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
background-clip 限制背景从哪开始，content-box padding-box
渐变
必须至少定义两种颜色节点
background-image: linear-gradient(#e66465, #9198e5); 从上到下
background-image: linear-gradient(to right, red , yellow); 从左到右
background-image: linear-gradient(to bottom right, red, yellow); 左上角到右下角
如果使用多个颜色，就在后面加就行了
使用角度，就把里面的to xxx 换成，45deg 这样的，看下面的箭头，指向哪朝哪变
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); 透明度，0透明，1不透明
文本属性
text-overflow:ellipsis 和 text-overflow:clip
字体
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight:bold;
2D和3D转换
transform:translate(50px,100px);
多列
column-count: 3 三列
column-gap: 40px 两列之间的间隙是40px
column-rule:1px solid lightblue 边框宽度 样式 和颜色
column-rule-style:solid 列与列之间的边框样式
column-rule-width:1px 边框宽度
column-rule-color: red 边框颜色
column-span: all; 在一个文本内容分多列显示的区域内，有一个标题元素你希望它完整地显示在所有列之上，不被拆分成多列显示，就可以给这个标题元素设置 column-span: all; 样式，使得标题更加醒目、整体性更强。
column-width:100px; 指定列的宽度
调整尺寸 Resize
resize:both; 自己拉动
overflow:auto; 是否能滚动
方框大小调整(Box Sizing)
box-sizing:border-box; 高度和宽度应用于元素的所有部分: 内容、内边距和边框
box-sizing:content-box; 高度和宽度只应用于元素的内容
也就是说，同等情况下，content-box 比 border-box 要宽
外形修饰（outline-offset ）
border:2px solid black;
outline:2px solid red;
outline-offset:15px; 两个圈的间距 在border外面，在加一个外圈
图片
img src="paris.jpg" alt="Paris" width="400" height="300" alt是超链接
块级元素，容纳块级元素和行级元素
所有行级元素，只有变成块级元素，才能容纳行级元素哦
用到 display: block; 从左到右排列，不会独占一行，除非空间不够换行
还有dispaly: inline-block 这个好用：行级元素特性保留、块级元素特性增加
两个差别图
有的行级元素，没有固定的display的固定值，比如a标签，默认情况下其宽度是由内容撑开的。当不用inline-block的时候，就不能padding值了，像button和input都有display的默认值inline-block
所有行级元素
span：一个通用的内联容器
a：超链接
img：用于在网页中插入图像
b：使文本加粗
i：使文本倾斜
em：强调文本，通常也表现为斜体
strong：加强语气，通常表现为加粗
sub：定义下标文本 sup：定义上标文本
其他的还有 button、input、select
所有块级元素
div 太常见了
p：段落
h1-h6：标题
ul和ol：无需列表 有序列表 li元素表示
from：表单
table：表格
nav：专门用于定义导航链接的区域
section：用于对文档进行分区
两个span不会换行
两个div会换行
响应式图片
max-width: 100%;
height: auto;
下面这个图片会随着页面的大小响应式缩放 放大的哦
图片文本
.文本左上角 {
position: absolute;
top: 8px;
left: 16px;
font-size: 18px;
}
.img {
width: 100%;
height: auto;
opacity: 0.3;
}
图片滤镜
filter: grayscale(100%); 其他效果百度下，还有黑白的 阴影的
font-size 还管按钮大小
鼠标悬停按钮
.button1:hover {
transition-duration: 4s; 颜色变化持续时间
cursor: pointer; 鼠标悬停小手
background-color: #4CAF50; 鼠标放上去的颜色
color: white; 完全显示后，里面字体的颜色
}
鼠标悬停出现阴影
.button2:hover {
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
.disabled {
opacity: 0.6; 1最大，完全不透明
cursor: not-allowed; 禁用
}
动画
transition: 0.5s; 表示动画
定位
position: absolute; 绝对定位，不占空间，参考离他最近的上层定位如relative、absolute或fixed，没有就根据浏览器窗口定位
position: relative; 相对定位。 相对于自身来说，例如，设置position: relative; left: 10px; 该元素会在自身的基础上向左偏移 10 像素
实现上面gif的效果
*padding-right 和 right 的区别*
padding-right是会影响页面布局的。right一般和position: absolute;或position: relative;用，right属性是用来确定元素的右侧边缘与定位参考点
按钮动画 - 波纹效果
这个gif，真实的效果应该是，先收，在还原。收在0s内，所有没感觉
渲染的时候，先after，把阴影放的远远的，完全透明看不见。
点击的时候，收回来，padding和magin都是0，transition：0s 所有你没感觉 。 如果你把transition变成1就能看到一个浅到深的效果，因为，opacity是由0过渡到1
松开鼠标 还回去。 opacity是由1过渡到0 由深入浅的动画效果
.button:after是一个伪元素。当你没有显式地设置它的宽度和高度时，它的尺寸会由其内容和内边距padding、外边距margin等属性来决定
元素非激活的状态下，有默认值。 激活结束后会还原
.button:active {
background-color: #3e8e41;
box-shadow: 0 5px #666; 像下5个像素，元素向下移动4个 就有按压的效果了
transform: translateY(4px);
}
:active:after可能不会产生任何效果，如果没有对应的伪元素来应用样式
块级元素，另起一行。 行级元素在一行
弹性盒子
display: flex; 把块级元素 变成行级元素 比如，两个div用flex 就不会换行了
其他的还有
display: inline; 把行级元素 变成块级。 span换行
display: block; 把块级元素变成行级。 div在一行
dispaly: inline-block 变成行-块级属性
direction: rtl;
direction 属性为 rtl (right-to-left),弹性子元素的排列方式也会改变
flex-direction
row-默认的 左对齐 row-reverse 右对齐 和左对齐相反方向
column - 上下排列 column-reserve 下上排列
align-items 侧轴 管竖直方向
stretch 如果没有设置height值，会拉满所在行的尺寸，受到min/max-height限制
flex-start 默认的
flex-end
center
justify-content 内容对齐 主轴 管水平方向
行内轴，是文本书写方向的轴
flex-wrap 属性
用于指定弹性盒子的子元素换行方式
nowrap 只能在一行，会压缩，可能溢出
wrap 换行，超出的
wrap-reverse 反转
align-content
用于修改 flex-wrap 属性的行为
弹性子元素排序
order: -1 数值小的排在前面。可以为负值
align-self
元素自身在竖直方向上的对齐方式
flex 属性用于指定弹性子元素如何分配空间
多媒体查询
screen用于电脑屏幕，平板，智能手机等
@media screen and (max-width: 480px) {
body { 浏览器窗口宽度小于480，背景颜色变红色
background-color: red;
}
div.example { 浏览器窗口宽度小于480，隐藏某原色
display: none;
}
}
大于480右侧菜单浮动到右侧，小于在下面
动态添加文本或图片
网格布局
display 属性设置为 grid 或 inline-grid 后，它就变成了一个网格容器，这个元素的所有直系子元素将成为网格元素
grid是块级元素，同级的grid不能再一行
inline-grid 是块级元素，能在一行
grid-template-columns: auto auto auto； 三列，几个auto就几个列 单位是fr
grid-template-columns: 2fr 1fr 1fr; 三列，一个占一半，剩下两个各个四分之一
grid-template-columns: 30px 200px auto 100px; 指定列的大小
上面都是列，行也是类似的
网格间距
grid-gap: 30px 100px; 上下间距30px 左右100px 是grid-row-gap 和 grid-column-gap 属性的简写
grid-row-gap: 50px; 上下间距50px
grid-column-gap:45px; 左右45px
网格区域
grid-column-start：从哪一列网格线开始
grid-column-end：从哪一列网格线结束
grid-row-start：从哪一行网格线开始
grid-row-end：从哪一行网格线结束
3 * 3的grid布局，行和列都各有四条网格线
.item1 {
grid-column: 1 / span 2; 列 1代表起始线 2代表跨度，就是到第三条线结束，两个单元格
grid-row: 1 / span 2; 行 同上
}
可以配合 align-content
