- 我的博客地址:u.mr90.top
常见布局
- 流式布局(百分比布局)–重点宽度
- 加最大值或者最小值控制max-width/min-width
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
- 二倍精灵图
-
将精灵图缩放为原来的一半
-
在测算距离
-
在缩放代码里面的精灵图大小
background-size:缩放为原来的一半用px
-
*flex布局
flex布局
- 原理:给父级添加flex属性来控制子盒子
- 弹性布局,任何一个容器都可以指定fiex布局
- 当为父元素设为flex后,
float,clear,vertical-align
属性将失效 - flex容器,孩子为flex项目(flex item)
flex父级属性
flex-diection
:设置主轴
的方向
- 默认主轴水平向右
row
,侧轴是水平向下的y轴 - 翻转
row-reverse
column
主轴变为y轴
justify-content
设置主轴
上的子元素排列方式flex-start/flex-end/center
sapce-around
平分剩余的空间,space-between
先两边贴边再分配剩余的空间space-evenly
将元素平均分配
flex-wrap
设置子元素是否换行,默认是不换行
的(nowrap)wrapalign-items
设置侧轴上的子元素的排列方式(单行
)flex-start/flex-end/center/stretch
align-content
出现子项换行的情况,设置侧轴上的子元素的排列方式(多行
),在单行下是没有效果的
- flex-start
- flex-end
- space-between
- space-around
- stretch
- flex-flow:flex-direction,flex-wrap
flex子项属性
- flex子项目占的份数
flex=number
默认为0从剩余空间分配份数 align-self
控制某个子项在侧轴上的的排列方式order
数值越小越靠前
,默认为0
背景渐变
- 背景线性渐变
background:-webkit-linear-gradient(left,red,blue)
background: -webkit-gradient(linear,left top,right top,from(#34c2aa),to(#6cd557));
background: linear-gradient(to right,#34c2aa,#6cd557);