啊啊啊,我写了好久的东西被我没保存下来直接没了我快。。。!!!!我好烦人,我写了一个多小时。就是移动端布局上那个。😭😭😭移动端布局几种方法:
-
流式布局(百分比布局):
①先设置body的min-width和max-width
②把每一个最大的那个父元素宽度设置为百分比(即所有元素的宽度设置为百分比,高度定死)
③图片的宽度一定要设置为100%,让它的高度自适应
④有的时候两个盒子的宽度都设置为50%,但是屏幕伸缩的时候会把另外的盒子挤下来,因为可能设置了padding值,margin值或者border所以屏幕伸缩就会宽度不够了。
⑤所以C3提供了特殊的盒子模型:
box-sizing:border-box内容包含了:padding,border和内容
⑥margin值可以定位百分比也可以定死看实际情况 -
flex弹性布局:
先设置body的min-width和max-width布局
原理:通过给父元素添加flex的属性,来控制子元素的位置和排列方式。任何盒子都可以设置flex属性,当我们父元素设置了flex属性后,子元素的float和vertical-align都会失效。
父项属性:
①flex-direction设置主轴方向,默认为x轴方向
属性值:
row
row-reverse
column
column-reverse
②flex-wrap设置子元素是否换行,默认为不换行,如果父元素的长度不够,会缩小子元素
属性值:
wrap
nowrap
③jus