rotate旋转 css
格式
transform:scale(x缩放,y缩放)
transform:scale(倍数)
定位改变盒子的display状态 0924
被定位了的盒子,会被转换为行内块模式
具有以下特点
- 可设置宽高样式
- 默认宽度由内容决定
- 思考,默认的块与内联元素的特点
定位小结
定位与垂直外边距合并 0924
顶部外边距踏陷的解决办法新增
主要操作父标签:
- 浮动
- 脱标定位
代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.outer{
position: absolute;
/*position: fixed;*/
width: 400px;
height: 400px;
background-color: red;
}
.inner{
width: 200px;
height: 200px;
background-color: blue;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
堆叠顺序 z-index
绝对定位0924
用法
position: absolute
特点
- 脱离标准流
- 以定位了的父级作为参照进行偏移
演练
- 父不定位,子绝对定位
- 父不定位,margin偏移,子绝对定位
- 父相对定位,子绝对定位
- 父相对定位,并偏移,子绝对定位
设置旋转的中心点 transform-origin
单词 origin
默认是
transform-origin: 50% 50%
等价于
transform-origin: center center
网页布局总结
小结
- 一行一行的显示的,使用标准流
- 横向排列的,使用浮动
- 你压我,我压你的,使用定位
位移方法translate
2维坐标系
translat
综合写法 2d转换
一边移动一边旋转
先移动再旋转,如果先转再移动,会由于方向发生变化导致出现未知的路径