DAY4
- 盒子模型
-
内边距
<style> div{ padding-top/left/right:200px; padding: 10px 30px 60px /*上 左右 下*/ padding: 10px 30px 60px 90px; /* 上 右 下 左*/ } </style>
-
外边距
<style> ul li{ margin-bottom/right/left/top:30px; /*外边距不影响盒子内部大小*/ } </style>
- 外边距塌陷问题
<style> *{ margin: 0; padding: 0; } .father{ width:300px; height:300px; background-color:pink; } .son{ width:100px; height:100px; background-color:skyblue; margin-top:50px; } </style> <div class="father"> <div class="son"></div> </div>
解决方法:
-
给父元素加边框
border
-
给父元素加内边距
padding
-
给父元素加
overflow:hidden
-
css样式的继承性
* 不是所有样式都继承,只有改变之后对布局无影响的样式才会继承。 a链接最好在自身更改样式
-
flex布局
<style>
display:flex;
/*排列方式*/
flex-direction:row-reverse;
flex-direction:column;
flex-direction:column-reverse;
flex-direction:row;
/*让flex布局变为多行*/
flex-wrap:wrap;
flex-wrap:nowarp;
/*主轴上的布局*/
justify-content:center;
justify-content:end;
justify-content:space-between;
justify-content:space-around;
justify-content:space-evenly;
/*侧轴上的布局*/
单行
align-items:center;
align-items:start;(默认)
多行
align-content:end;
align-content:sapce-between;
align-content:space-around;
align-content:space-evenly;
</style>
-
浮动
<style> img { width: 100px; float: left; } </style>
-
float
<style> .father { width: 1000px; /* height: 1000px; */ background-color: pink; } .son { float: left; width: 200px; height: 200px; background-color: aqua; } .son2 { background-color: blue; float: left; /* 浮动,会脱离文档流 不再保留原来位置 会造成在其下方的兄弟元素位置发生变化 */ /* 当子元素发生浮动时,其父元素的高度发生塌陷 */ } .son3 { width: 400px; background-color: black; } </style> </head> <body> <div class="father"> <div class="son son1"></div> <div class="son son2"></div> <div class="son son3"></div> </div> </body>
-
float的解决方法:
1.父元素 overflow: hidden
2.clear: both;
-
-
渐变
<style> div { width: 400px; height: 800px; background-image: linear-gradient(to right, green, pink, yellow, red); } </style>
-
2d转换
.son { width: 300px; height: 300px; background-color: pink; /* 平移 */ /* transform: translate(-40px, 40px); */ /* transform: translateX(70px); */ /* transform: translateY(-60px); */ /* 旋转 */ /* transform: rotateZ(40deg); */ /* 复合写法 旋转永远放在最后一个 */ /* transform: translate(100px) rotateZ(45deg); */ /* transform: rotateZ(45deg) translate(100px); */ /* transform: scale(1.5); */ /* transform: scaleX(2); */ /* transform: scaleY(2); */ /* transform: skew(40deg); */ /* 向右下移动100px 旋转45度 缩放1.5 */ transform: translate(100px, 100px) scale(1.5) rotate(45deg); }
-
3d转换
<style> .father { width: 300px; height: 300px; border: 1px solid black; margin: 100px auto; transform-style: preserve-3d; perspective: 800px; /* perspective-origin: 100px 200px; */ } .son { width: 300px; height: 300px; background-color: pink; /* transform: translateZ(-200px); */ transform: rotateX(45deg); /* transform: rotateY(45deg); */ /* transform: rotate3d(1, 1, 0, 45deg); */ backface-visibility: hidden; transform-origin: bottom; } </style> </head> <body> <div class="father"> <div class="son">2222222</div> </div> </body>
-
过渡
<style>
.father {
width: 300px;
height: 300px;
border: 1px solid black;
margin: 100px auto;
transform-style: preserve-3d;
perspective: 800px;
/* perspective-origin: 100px 200px; */
}
.son {
/* transition 谁变化给谁加 */
transition: all 5s;
width: 300px;
height: 300px;
background-color: pink;
/* transform: translateZ(-200px); */
/* transform: rotateY(45deg); */
/* transform: rotate3d(1, 1, 0, 45deg); */
/* backface-visibility: hidden; */
}
.son:hover {
width: 800px;
transform: rotateX(45deg);
}
</style>
-
动画
<style> @keyframes myMovie { from { width: 200px; background-color: pink; } to { width: 800px; background-color: aqua; } } @keyframes myfirst { 0% { width: 200px; background-color: pink; } 20% { width: 400px; background-color: green; } 80% { width: 800px; background-color: red; } 100% { width: 1200px; background-color: aquamarine; } } div { width: 200px; height: 50px; background-color: aqua; animation: myMovie 5s infinite alternate steps(4); animation: myfirst 5s infinite alternate steps(400); } </style> </head> <body> <div> </div> </body>