1.布局
css盒子模型
20140415151801.jpg
.box{
padding: 20px;
margin: 20px;
border:10px solid salmon;
background: aqua;
width: 200px;
}
box-sizing
- border-box:为元素设定的宽度和高度决定了元素的边框盒。
- content-box:宽度和高度分别应用到元素的内容框
2.开发准备
覆盖浏览器默认样式
*{
margin:0;
padding:0;
border:0;
font-size:100%;
box-sizing:border-box;
}
提取公共样式
.flex{
display:flex;
}
.flex-column{
flex-direction:column
}
.mt-10{
margin-top:10px;
}
...
3.居中
3.1 水平居中
文字水平居中
.text-center{
text-align: center;
}
块水平居中
.box-center{
margin：0 auto
}
3.2垂直居中
文字垂直居中
设置高度
<div class="vertical">
<span>垂直居中</span>
</div>
.vertical{
height:32px
line-height:32px
}
不设置高度
.vertical span{
display:inline-block;
padding:10px
}
块垂直居中
使用定位
<div class="vertical">
<div class="box">
这是一个快
</div>
</div>
.vertical{
width: 200px;
height: 200px;
background: cadetblue;
font-size: 12px;
position: relative;
}
.vertical .box{
height: 100px;
width: 100px;
background: #91c8c9;
position: absolute;
top: calc(50% - 50px);
left: calc(50% - 50px);
}
transform属性
.vertical .box{
height: 100px;
width: 100px;
background: #91c8c9;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
4.伪类&伪元素
伪类
通过选择器找到那些不存在与DOM树中的信息以及不能被常规CSS选择器获取到的信息。
- nth-child
/**常用于表格**/
p:nth-child(odd)
p:nth-child(even)
/**灵活运用**/
p:nth-child(3n) 3的倍数项
li:nth-child(n+3) 大于等于三的
- first-child last-child
- hover focus visited
- not 常搭配其他伪类使用
/**常用**/
p:not(:first-child)
p:not(:nth-child(3n)
a:not([href="//www.baidu.com"])
伪元素
伪元素在DOM树中创建了一些抽象元素，这些抽象元素是不存在于文档语言里的
- :after :before
/**清除浮动**/
.box:after{
content: '';
clear: both;
display: block;
}
p:after{
clear:both;
}
/**画三角形的应用**/
p:nth-child(1):before {
display: block;
content: '';
border-width: 8px ;
border-style: solid;
border-color: transparent transparent transparent darkorange;
position: absolute;
left: 100%;
top: calc(50% - 8px);
}
p:nth-child(1):after {
display: block;
content: '';
border-width: 8px ;
border-style: solid;
border-color: transparent transparent transparent #fff;
position: absolute;
left: calc(100% - 1px);
top: calc(50% - 8px);
}
/**图片错误处理应用**/
<img src="" :class="{error,error}" alt="自然风景" onerror="error=true">
img.error {
display: inline-block;
transform: scale(1);
content: '';
color: transparent;
}
img.error::before {
content: '';
position: absolute;
left: 0; top: 0;
width: 100%; height: 100%;
background: #f5f5f5 url(../assets/error_img.svg) no-repeat center / 50% 50%;
}
img.error::after {
content: attr(alt);
position: absolute;
left: 0; bottom: 0;
width: 100%;
line-height: 2;
background-color: rgba(0,0,0,.5);
color: white;
font-size: 12px;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
//... 略
}
5.转换
2D转换
- translate()
根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。 - rotate()
在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转 - scale()
该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数： - skew()
分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。 - matrix()
matrix()方法和2D变换方法合并成一个。包含旋转，缩放，移动（平移）和倾斜功能。
3D转换
- rotateX()
- rotateY()
6.过渡
应用场景：元素由一种状态变为另一种状态的转变过程
// 抽屉效果
.drawer{
height: 100%;
width: 400px;
background: aqua;
border-radius: 20px 0 0 20px;
position: absolute;
right: 0;
transition: all 0.4s linear;
&.hide{
right:-400px
}
}
// 一些鼠标悬浮效果
button{
width: 100px;
height: 40px;
line-height: 40px;
font-size: 14px;
border: none;
background: white;
transition:all 0.4s;
&:hover{
background: #228ab3;
color:white;
}
}
// 消息弹出框
.message{
position: absolute;
width: 300px;
border-radius: 6px;
background: #fff;
color:#555;
text-align: center;
right: -300px;
top:60px;
box-shadow: 0px 4px 5px 0px #e9e9e9;
transition: all 0.4s;
span{
padding: 10px;
}
&.show{
right: 50px;
}
}
7.动画
@keyframes规则创建动画：指定的变化时发生时使用％，或关键字"from"和"to"，这是和0％到100％相同。0％是开头动画，100％是当动画完成。
@keyframes mymove
{
from {top:0px;}
to {top:200px;}
0%{top:0px;}
20% {top:20px;}
80% {top:180px;}
100% {top:200px;}
}
animation 调用动画
.move{
background: aqua;
width: 100px;
height: 100px;
position: absolute;
animation: mymove 2s ease infinite alternate;
}
// 旋转
@keyframes mymove
{
0%{top:0px;transform:rotateX(0deg) rotateY(0deg) rotate(0deg)}
100% {top:200px;transform: rotateX(230deg) rotateY(230deg) rotate(360deg)}
}
8.剪裁
clip-path
// 多边形-右上、右下，左下，左上
clip-path: polygon(50% 0,100% 100%, 0% 100%, 50% 0);
// 圆-半径，圆心坐标
clip-path: circle(50% at 50% 50%);
// 椭圆-x轴半径、y轴半径、圆心坐标
clip-path: ellipse(30% 20% at 50% 50%);
// 矩形-距上，距右，距下，距左
clip-path: inset(100px 50px 50px 50px);
// 实例 inset(<top> <right> <bottom> <left> round <top-radius> <right-radius><bottom-radius> <left-radius>)
clip-path:inset(25% 0% 25% 0% round 0% 25% 0% 25%);
