单独制做移动端页面是目前移动端界面开发的主流方式。响应式开发(pc端和移动端共用一套网站)是移动端界面发开的此要方式。css
1.移动端单独制做:html
2.响应式:web
传统模式宽度计算:盒子的宽度 = CSS中设置的width + border + padding移动web开发
CSS3盒子模型: 盒子的宽度= CSS中设置的宽度width 里面包含了 border 和 padding浏览器
也就是说,咱们的CSS3中的盒子模型, padding 和 border 不会撑大盒子了。app
/*CSS3盒子模型*/ box-sizing: border-box; /*传统盒子模型*/ box-sizing: content-box;
移动端能够所有CSS3 盒子模型。
PC端若是彻底须要兼容,咱们就用传统模式,若是不考虑兼容性,咱们就选择 CSS3 盒子模型。less
移动端公共样式:svg
移动端 CSS 初始化推荐使用 normalize.css/ Normalize.css:保护了有价值的默认值 Normalize.css:修复了浏览器的bug Normalize.css:是模块化的 Normalize.css:拥有详细的文档
/*CSS3盒子模型*/ box-sizing: border-box; -webkit-box-sizing: border-box; /*点击高亮咱们须要清除清除 设置为transparent 完成透明*/ -webkit-tap-highlight-color: transparent; /*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/ -webkit-appearance: none; /*禁用长按页面时的弹出菜单*/ img,a { -webkit-touch-callout: none; }
代码以下:模块化
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { margin: 0; padding: 0; } section { width: 100%; max-width: 980px; min-width: 320px; margin: 0 auto; } section div { float: left; width: 50%; height: 400px; } section div:nth-child(1) { background-color: pink; } section div:nth-child(2) { background-color: purple; } </style> </head> <body> <section> <div></div> <div></div> </section> </body> </html>
若是是pc端页面布局,仍是采用传统方式;若是是移动端或者是不考虑兼容的pc则采用flex。布局
总结:就是经过给父盒子添加flex属性,来控制子盒子的位置和排列方式
代码以下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div { display: flex; width: 80%; height: 300px; background-color: pink; justify-content: space-around; } div span { /* width: 150px; */ height: 100px; background-color: purple; margin-right: 5px; flex: 1; } </style> </head> <body> <div> <span>1</span> <span>2</span> <span>3</span> </div> </body> </html>
效果以下:
默认状况下,项目都排在一条线(又称”轴线”)上。flex-wrap属性定义,flex布局中默认是不换行的。
该属性是控制子项在侧轴(默认是y轴)上的排列方式 在子项为单项(单行)的时候使用。
设置子项在侧轴上的排列方式 而且只能用于子项出现 换行 的状况(多行),在单行下是没有效果的。
单行和多行区别:
flex-flow:row wrap;
flex 属性定义子项目分配剩余空间,用flex来表示占多少份数。
align-self 属性容许单个项目有与其余项目不同的对齐方式,可覆盖 align-items 属性。
span:nth-child(2) { /* 设置本身在侧轴上的排列方式 */ align-self: flex-end; }
数值越小,排列越靠前,默认为0。
注意:和 z-index 不同。
.item { order: <number>; }
代码以下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div { display: flex; width: 80%; height: 300px; background-color: pink; /* 让三个子盒子沿着侧轴底侧对齐 */ /* align-items: flex-end; */ /* 咱们想只让3号盒子下来底侧 */ } div span { width: 150px; height: 100px; background-color: purple; margin-right: 5px; } div span:nth-child(2) { /* 默认是0 -1比0小因此在前面 */ order: -1; } div span:nth-child(3) { align-self: flex-end; } </style> </head> <body> <div> <span>1</span> <span>2</span> <span>3</span> </div> </body> </html>
效果以下: