弹性盒子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>弹性盒子</title>
<style>
.box{
width: 400px;
height: 400px;
background: bisque;
margin: 50px auto;
overflow: hidden;
padding-left: 0;
display: flex;
/* 水平正向，默认值。 */
flex-direction: row;
/* 水平反向排列 */
/* flex-direction: row-reverse; */
/* 表示垂直正向，交叉轴为水平正向 */
/* flex-direction: column; */
/* 表示垂直反向反向 */
/* flex-direction: column-reverse; */
/* 换行 */
/* 默认值，不换行 */
flex-wrap: nowrap;
/* 交叉轴正向换行 */
/* flex-wrap: wrap; */
/* 交叉轴反向换行 */
/* flex-wrap: wrap-reverse; */
/* 主轴方向的对齐方式 */
/* 默认值，开始方向对齐 */
/* justify-content: flex-start; */
/* 结束方向对齐 */
/* justify-content: flex-end; */
/* 居中对齐 */
/* justify-content: center; */
/* 两端对齐 */
/* justify-content: space-between; */
/* 左右等间距对齐 */
/* justify-content: space-around; */
/* 等间距对齐 */
justify-content: space-evenly;
/* 单行交叉轴对齐方式 */
/* 交叉轴开始方向对齐 */
/* align-items: flex-start; */
/* 结束方向对齐 */
/* align-items: flex-end; */
/* 居中方向对齐 */
/* align-items: center; */
/* 文字基线对齐，略微往上了 */
/* align-items: baseline; */
/* 如果项目元素没有设置高度，将占满整个容器高度，默认值 */
/* align-items: stretch; */
/* 多行内容在交叉轴对齐方式 */
/* 交叉轴开始方向对齐 */
/* align-content: flex-start; */
/* 结束方向对齐 */
/* align-content: flex-end; */
/* 居中方向对齐 */
/* align-content: center; */
/* 两端对齐 */
/* align-content: space-between; */
/* 左右等间距对齐 */
/* align-content: space-around; */
/* 默认值，每一项元素会占满容器 */
/* align-content: stretch; */
}
.q{
/* width: 120px; */
width: 240px;
height: 50px;
line-height: 50px;
background: red;
text-align: center;
/* margin-top: 10px; */
margin: 10px;
list-style: none;
}
/* 调整每一个元素在弹性盒子中的顺序，默认为0, */
/* 弹性盒子的扩展比例 */
/* 弹性盒子收缩的比例 */
#one{
order: 1;
/* flex: 1; */
flex-shrink: 2;
background: #1235dd;
}
#two{
order: 2;
/* flex: 2; */
flex-shrink: 4;
background: #5e273a;
}
span{
width: 80px;
height: 100px;
}
.box2{
display: flex;
width: 600px;
height: 400px;
text-align: center;
justify-content: space-around;
}
.w1{
width: 80px;
height: 100px;
background: red;
}
.w2{
background: green;
}
.w3{
background: blue;
}
</style>
</head>
<body>
<!-- 弹性盒子： -->
弹性盒子：行级元素，行内块级元素，块级元素都可以
<ul class="box">
<li id="one" class="q">1</li>
<li id="two" class="q">2</li>
<li class="q">3</li>
<!-- <li class="q">4</li>
<li class="q">5</li>
<li class="q">6</li> -->
</ul>
<div class="box2">
<span class="w1">111</span>
<div class="w1">2222</div>
<span class="w2">222</span>
<span class="w3">3333</span>
</div>
</body>
</html>
盒子模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子模型</title>
<style>
.lou{
width: 150px;
height: 80px;
background: blue;
}
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.box{
width: 300px;
height: 300px;
}
.box div{
width: 150px;
height: 300px;
float: left;
border: 1px solid #000;
}
.a{
background: red;
}
.b{
background: blue;
overflow: hidden;
text-align: auto;
position: absolute;
}
.box轴
</style>
</head>
<body>
块级元素相邻的上下设置外边距时，会选取最大的一个外边距
行级元素只有左右有外边距，上下没有外边距
行内块级元素跟块级元素一样
盒子背景会包括边框与里面内容
没有设置怪异盒子时，实际宽高等于设置的宽高加上内边距加上边框
内间距padding：三值时：上 左右 下
外边距margin：
盒子与盒子的间距兄弟关系
重叠性当两个盒子为兄弟结点时，margin在垂直方向
<div style="background: red;height: 50px;"></div>
<div class="lou"></div>
<div style="background: black;height: 50px;"></div>
<div class="box轴">
<div class="a"></div>
<div class="b"></div>
<li></li><li></li>
</div>
</body>
</html>
浮动：让块级元素能够待在一行 文字没有浮动时，会围绕浮动周围
浮动特点:
1浮动元素会脱离正常文档流，浮动元素会像浮云一样浮起来。
2浮动元素后面正常元素会自动补位。
3浮动元素会被父元素所约束，所以浮动没有完全脱离文档流。
动的特点：
当浮动元素上一行是正常元素，这个浮动元素只能待在当前行，不能跑到上一行。
左浮动：元素会向左跑，会从上一行最右边跑出来，直到遇到有浮动的元素，才会停止。
右浮动：元素会向右跑，会从上一行最左边跑出来，直到遇到有浮动的元素，才会停止。
清除浮动：
清除元素哪一侧不能右浮动。
文档加载顺序，从上往下加载，样式与元素内容一起加载.
高度塌陷：由于元素中子元素设置了浮动，会造成父元素高度塌陷
防止高度塌陷：
直接给父元素设置高度
用伪元素加上清除浮动
浮动与定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮动</title>
<style>
ul{
width: 300px;
background: #ccc;
list-style: none;
padding-left: 0;
/* border: 1px solid red; */
}
ul::after{
content: '';
clear: both;
}
ul li{
/* float: left; */
}
.a{
width: 100px;
height: 100px;
background: red;
float: left;
}
.b{
width: 100px;
height: 100px;
background: green;
float: left;
}
.c{
width: 100px;
height: 100px;
background: blue;
float: left;
/* clear: left; */
}
</style>
</head>
<body>
<ul>
<li class="a"></li>
<li class="b"></li>
<li class="c"></li>
<li style="clear: left;"></li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>定位</title>
<style>
.box{
width: 300px;
height: 300px;
border: 1px solid red;
position: relative;
}
.posi1,.posi2,.posi3{
width: 100px;
height: 100px;
}
.posi1{
background: red;
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}
.posi2{
background: green;
position: absolute;
top: 50px;
left: 50px;
}
.posi3{
background: blue;
position: absolute;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<!-- 定位：规定元素的位置 -->
<!-- 定位用于没有规律的元素而布局 -->
<!-- 定位的三种类型：相对定位，绝对定位，固定定位 -->
<!-- 相对定位： 脱离文档流 但没完全脱离文档流 原来的位置还会保留 相对于自己原来的位置定位-->
<!-- 绝定定位：会完全脱离文档流，以最近含相对定位的父级元素为参考，进行定位，原来的位置不会保留，如果父级元素没有含相对定位，会相对于浏览器进行定位 -->
固定定位：
<!-- 层级z-index：默认为0,最高为999. -->
<div class="box">
<div class="posi1"></div>
<div class="posi2"></div>
<div class="posi3"></div>
</div>
</body>
</html>
css3进阶
### 1过渡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 200px;
height: 200px;
background: pink;
transition-property: all;
transition-duration: 3s;
transition-timing-function: linear;
transition-delay: 200ms;
transition: all 2s ease-in 500ms;
}
.box:hover{
width: 400px;
height: 400px;
transform: translate(50px,50px);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
2位移
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container{
width: 100%;
height: 500px;
background: red;
}
.box{
width: 200px;
height: 200px;
background: tomato;
transition: all 3s;
}
.container:hover .box{
/* transform: translate(50px,50px); */
/* transform: rotate(90deg); */
/* transform: rotateX(45deg); */
transform: rotateY(60deg);
/* transform: scale(0.5); */
/* transform: scaleX(1.5); */
/* transform: skewX(45deg); */
}
</style>
</head>
<body>
<div class="container">
<span>span</span>
<div class="box"></div>
<span>span</span>
</div>
</body>
</html>
3渐变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 300px;
height: 30px;
border: 1px solid red;
margin: 50px auto;
background: linear-gradient(135deg,#ddcc54,red,#aaff88);
background: linear-gradient(315deg,#ddcc54,#aaff88);
background: linear-gradient(270deg,#ddcc54 20%,#aaff88 45%,green 60%,blue);
}
.box2{
width: 600px;
height: 40px;
border: 1px solid red;
margin: 20px auto;
/* background: linear-gradient(90deg,rgba(241,132,22,1) 15%,rgba(233,199,144,0) 30%,rgba(152,168,177,0) 60%,rgba(22,33,11,1)); */
/* 重复渐变 */
background: repeating-linear-gradient(90deg,green,red 50%);
}
.box1{
width: 400px;
height: 400px;
border: 1px solid red;
margin: 50px auto;
border-radius: 50%;
/* 圆形渐变 */
background: radial-gradient(circle,#711ebe,#00fff2,red,blue);
/* 椭圆形渐变 */
/* background: radial-gradient(ellipse,#711ebe,#00fff2,red); */
}
</style>
</head>
<body>
<div class="box">
</div>
<div class="box2"></div>
<div class="box1">
</div>
</body>
</html>
4过渡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
.box{
width: 100px;
height: 100px;
background: red;
margin: 60px auto;
transition: background 5s ease 2s,width 2s linear;
}
.box:hover{
width: 500px;
background: #ffd596;
}
</style>
</head>
<body>
<!-- 过渡元素从一种样式变换成另一种样式时的元素添加效果 -->
<!-- 过渡必须触发事件才能实现 -->
四大要素：
1.css属性名,默认是all,不是必须值
2.过渡要完成的时间：s,ms.必须值
3.过渡完成的速度曲线：
linear匀速
ease,先慢后快
ease-in,慢速
sase-out 快速
ease-in-out 低速进出，中间匀速
4.过渡开始的时间：s,ms.
<div class="box"></div>
</body>
</html>
5动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container{
/* animation: name（名称） duration（动画完成的时间） timing-function （完成的速率ease/linear/ease-in/ease-out） delay （启动时延迟的时间）
iteation-count（播放的次数n/infinite） direction（是否反向播放normal/reverse反向播放/alternate/正反交替播放） fill-mode （forwards结束后停的状态）play-state;
animation-play-state: paused|running;指定暂停的动画 */
/* animation: name duration timing-function delay iteration-count direction fill-mode; */
width: 200px;
height: 200px;
background: tomato;
animation: move 3s alternate backwards;
}
@keyframes move{
form{
transform: translateX(0);
}
to{
transform: translateX(100px);
}
}
</style>
</head>
<body>
<!-- js动画
动画软件flash
标签自带动画marquee
绘画canvas配合js脚本
animation -->
<!-- 动画
帧一秒钟切换图片的数量，每张图片代表一帧
关键帧 在每一段动画过程中，都需要设置一个特别的帧来区分前后动画的关系 -->
<div class="container"></div>
<div class="x">xxxxxx</div>
</body>
</html>
