CSS (4)
CSS 用户界面样式
鼠标样式 cursor
cursor: default/pointer/move/text
轮廓 outline
outline：1px solid red;
边框外围的线。一般不用，去掉。 outline: 0;
防止拖拽文本域textarea
textarea {
resize: none;
/*outline: none;*/
} 垂直对齐
vertical-align 不影响块级元素的内容对齐，只针对行内或行内块元素。通常用来控制图片/表单与文字的对齐
图片和文字默认基线对齐，如
用vertical-align改成中线对齐：
img {
vertical-align: middle;
} 
去除缝隙
图片或表单等行内块元素，底线和父盒子的基线对齐，这样的话底部会空出一点缝隙。
解决方法有：
- 转成块级元素 display：block;
img {
vertical-align: top;
} 英文单词换行
若盒子不够大，里面的英文会进行换行。
word-break：normal
break-all 允许在单词中间换行
keep-all 只能在半角空格或连字符处换行
强制一行显示
white-space： nowrap;
搭配使用text-overflow
text-overflow：clip; 直接截断 ellipsis; 溢出显示省略号
字体图标 （iconfont）
图片不能进行很好的缩放，会失真。字体图标可以像图片一样改变透明度、旋转度等，但本质上是文字，可以随意改变颜色，产生阴影、透明效果等。 且本身体积比图片更小。十分适合在移动端。
字体声明：
@font-face {
font-family: 'icomoon';
src: url();
src: url() format(),
url() format(),
url() format(),
url() format();
font-weight: normal;
font-style: normal;
} 使用：
span {
font-family: icomoon;
font-size: 50px;
}
span::before {
font-family: icomoon;
font-size: 100px;
color: pink;
content: "\e93a";
} <span></span>
css滑动门
为了使得各种形状的背景能够自适应元素中文本的多少，进行拉伸。
核心技术是精灵图和padding撑开宽度。
一般方法：
<li>
<a href="#">
<span>导航栏</span>
</a>
</li> a 设置背景左侧，padding撑开合适的宽度。
span设置背景右侧，padding撑开合适宽度，剩下的由文字撑开
a包含span是为了整个导航栏可以点击。
a {
display: inline-block;
line-height: 33px;
background: url("") no-repeat;
padding-left: 15px;
/*不能写死宽度*/
text-decoration: none;
}
a span {
display: inline-block;
line-height: 33px;
background: url("") no-repeat right;
padding-right: 15px;
} 伪元素
本质上是插入了一个标签元素
:before和:after添加的内容是默认inline
CSS 过渡
transition: 要过渡的属性 花费时间 运动曲线 何时开始；
transition: all 0.5s ease 0s;
transform
水平移动100px:
transform: translate(100px);
如果写50%，是根据自己的宽度移动的，不是父级
得出盒子居中对齐新方法：
transform: translate(-50%, -50%);
缩放：
transform: scale(2,4); 宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍
旋转：
transform: rotate(180deg);
设置选择中心点（默认中心）：
transform-origin: left top;
/*左上角*/ 也可以设置精确像素。 只写一个参数也行，就变成按左轴转。
3D变形
坐标系：
rotateX() rotateY() rotateZ()
透视
给2D旋转加一点立体感
eg. perspective: 1000px;
视距越小，效果越明显
transform: translate3d(x,y,z);
控制移动，x/y可以是px或者百分数，z必须是px
z移动相当于近大远小的效果
backface-visibility
在旋转体有前后两个面的时候会用到。
定义当前元素不面向屏幕时是否可见。
div {
width: 200px;
height: 200px;
margin: 50px auto;
position: relative;
}
div img {
position: absolute;
top: 0;
left: 0;
transition: all 1s;
}
div img:first-child {
z-index: 1;
backface-visibility: hidden;
}
div:hover img {
transform: rotateY(180deg);
} CSS 动画 animation
引用动画：
div {
animation: 动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向;
} 定义动画：
@keyframes name {
0% {
transform: translate3d(0,0,0);
}
50% {
transform: translate3d(600px,0,0);
}
51% {
transform: translate3d(600px,0,0) rotateY(180deg);
}
100% {
transform: translate3d(0,0,0);
}
} 伸缩布局flex
三等分：
section {
width: 80%;
height: 200px;
border: 1px solid #0086b3;
margin: 0 auto;
display: flex;
}
section div {
height: 100%;
flex: 1; /*占的份数,或者可以对每一个div进行单独份数设置*/
} <section>
<div></div>
<div></div>
<div></div>
</section> 
也可以固定一个块的宽度，剩余的块按份数划分。固定了宽度的是不缩放的。
flex默认主轴是横向row的，可以用flex-direction: column;改成竖向。
调整主轴对齐
justify-content：flex-start flex-end center space-between space-around
section {
width: 800px;
height: 600px;
border: 2px solid burlywood;
margin: 100px auto;
display: flex;
justify-content: space-around;
}
div {
width: 200px;
height: 200px;
}
div:first-child {
background-color: #eee;
}
div:nth-child(2) {
background-color: purple;
}
div:nth-child(3) {
background-color: indianred;
} 
调整侧轴对齐(垂直对齐)
align-items:
section {
width: 800px;
height: 600px;
border: 2px solid burlywood;
margin: 100px auto;
display: flex;
justify-content: space-around;
align-items: center;
} 
不设高度时可用stretch拉伸至父元素高度
section {
width: 800px;
height: 600px;
border: 2px solid burlywood;
margin: 100px auto;
display: flex;
justify-content: space-around;
align-items: stretch;
}
div {
width: 200px;
} 
控制盒子换行flex-wrap
盒子宽总和超过了父盒子宽度，每个盒子会被压缩宽度来显示。默认，即nowrap
section {
width: 800px;
height: 600px;
border: 2px solid burlywood;
margin: 100px auto;
display: flex;
flex-wrap: wrap;
} 
align-content
针对flex容器里面多行/轴的情况，align-items是对一行的情况。
必须父元素设置display:flex; 并且排列方式为横向 flex-direction:row; 并设置换行 flex-wrap:wrap; 才能起作用
section {
width: 800px;
height: 600px;
border: 2px solid burlywood;
margin: 100px auto;
display: flex;
flex-flow: row wrap;
align-content: space-around;
}
div {
width: 200px;
height: 200px;
} order属性
用css控制盒子的前后顺序。数字小的排在前面。
div:nth-child(5) {
background-color: darkorange;
order: -1;
} 一个问题
当设置了父元素的宽度，子元素设置宽度为100%后再在加上子元素上添加padding或margin值就会溢出。
