css布局

定视口；插图

.box{
width: 180px;
height: 180px;
border: 1px solid;
background-image: url("img/30d5bc953b7afba77514.jpg");
}

边框圆角

border-radius: 50%;

x y 模糊 （外延） 颜色

box-shadow: 5px 5px 5px 10px #ccc;

渐变

background: linear-gradient(90deg,#269abc,yellow);

过渡

transition: all linear .5s;

浏览器兼容前缀

谷歌苹果 火狐 微软 欧朋
-webkit-transform: scale(.5);
-moz-transform: scale(.5);
-ms-transform: scale(.5);
-o-transform: scale(.5);
transform: scale(.5);

定义动画 名字 运行方式 时间 次数

animation: F42run linear 3s infinite;
@keyframes F42run {
from{
        background: red;
     }
to  {
        background: yellow;
     }
}

浮动

float:left;
float:right;
子级浮动导致父级高度塌陷
子级浮动不会穿过容器padding区域
元素浮动包裹性，如果需要浮动文本元素需要指定宽度，否则会折叠到最小宽度
浮动后的元素水平方向margin叠加
行内元素浮动后会自动变为块级元素
如果容器宽度不足以所有浮动（子级）元素水平排列，元素将自动向下换行显示
兄级浮动脱离文档流，覆盖弟级，弟级清浮动

浮动3个特性：影响别的元素、包裹性、子级浮动父级高度塌陷