续移动端布局

web移动端布局
transform变形
1.transform:translate(x,y)位移
在x轴和y轴上进行移动,也有x轴和y轴的单独写法
transform:translateX(数值+px)
transform:translateY(数值+px)
一定不要忘记px单位 x轴和y轴同事进行书写时 逗号不能掉
扩展:让盒子水平垂直居中的方法
方法一:
.father {
position: relative;
width: 500px;
height: 500px;
background-color: pink;
}
.son {
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
width: 200px;
height: 200px;
background-color: skyblue;
}
让top和left都各占50% 此时的50%是父盒子的 然后再给margin的负值让盒子反方向移动自身宽高的一半,来达到垂直及水平居中的目的
方法二:
.father {
position: relative;
width: 500px;
height: 500px;
background-color: pink;
}
.son {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
background-color: skyblue;
transform: translate(-50%,-50%);
}
与方法一基本相似 在margin的负值上采用了位移,相对于自身来进行位移,x轴和y轴上分别位移自身的宽度和高度的一半 在盒子的宽高发生变化时,可以自动适应,让盒子水平垂直居中 与方法一相比不用进行margin负值的修改
方法三:
.father {
position: relative;
width: 500px;
height: 500px;
background-color: pink;
}
.son {
position: absolute;
width: 200px;
height: 200px;
bottom: 0;
top: 0;
right: 0;
left: 0;
margin: auto;
background-color: skyblue;
}
使用margin来自动适配盒子的上下左右外边距,来达到垂直水平居中的目的,此方法比起前两种方法来讲在开发中使用的并不多,做了解即可
2.transform: rotate(-360deg);旋转
旋转属性后的属性值必需要加上deg单位 表示度数 前面为负号的时候 表示是逆时针旋转 前面为正号的时候 表示顺时针旋转
扩展:transform复合属性书写 位移在前 旋转在后 中间用空格隔开
例:transform: translate(1000px,0) rotate(360deg);
扩展:旋转中心点 transform-origin: right bottom; 属性值可以是方位名词 像素单位
3.transform: scale(倍数无单位)
transform: scale(1.2);表示放大1.2倍 如果是小于1的小数 表示是缩小到30%
它比宽度和高度最大的优势： 他是用中心点来进行缩放的，同样他不会影响其他的盒子。
线性渐变
例:background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .5))
默认值是to bottom 从上到下 也可以是to top从下到上 to right从左到右 to left从右到左 里面渐变的颜色可以是多个