less页面宽度计算 常见页面宽度

前端-微信小程序常见页面布局

• 一、div该不该给宽度width，有何区别？

• 1.外层父级div不建议给width
• 2.哪些div可以给定width

• 二、采用边距margin、padding结合css3盒子display flex的方式去调整布局

• 例子：

• 布局解析

• 三、常用css属性

• 1.文字换行隐藏，省略号显示

• 1）多行
• 2）单行

• 2.元素水平居中

• 1）普通方式
• 2）弹性盒子方式

一、div该不该给宽度width，有何区别？

在我们写页面布局时，难免出现div宽度计算的繁琐、宽度是否溢出导致页面可以左右滑动和手机型号不同的自适应渲染等问题。但是有些div又必须给出指定width，比如img。那么什么情况下该给出div的宽度？

1.外层父级div不建议给width

原因：外层div若是给定固定width，必须知道当前开发工具下手机模拟器下的屏幕宽度，不然无法自适应；就算width与开发工具的屏幕宽度吻合，能自适应，子div若是需要给定width时又需繁琐的计算，计算错误会导致页面布局失调。另外，div容器的宽度 = div的width + div的 内边距padding，计算繁琐，二次开发时又要计算这些值的准确性。

解决方案：外层div不给定宽度width。一般情况下，我们的页面内容距离屏幕是有一定距离的，我们可以只给定内边距padding，div会铺满整个屏幕，里面的内容一般也不用再给margin或padding。同时结合css3的盒子display flex布局（后面会讲到该布局），使得页面内容布局变得更简洁。另外，最外层div的width如有需要可以给100%。

2.哪些div可以给定width

1）image图片图标可以给width。一般情况下，图片是由UI设计师给出的，像素会大些，需要给定width和height限制住图片的渲染范围大小。如上图的avatar是个放用户头像的div。
2）text、font文案也可以给定width。一般情况下，从数据取到的数据长度不一，渲染到页面的效果不一，我们会给定width或者最小宽度min-width或者最大max-width。后面会讲到关于文案溢出等问题的解决方案。
3）其他div不建议给width，我们可以采用增加边距margin、padding结合display flex的方式去调整布局。

二、采用边距margin、padding结合css3盒子display flex的方式去调整布局

由于我们不建议每个div都给定width，为了能达到页面内容与手机屏幕自适应的效果，我们采用边距margin、padding结合css3盒子display flex的方式去调整布局。

例子：

布局解析

1）最外层，如上所诉，不给定width，采用padding撑开盒子，根据里面内容去自适应。

2）.user-info是.avatar、.info和.go的父级div，采用css3盒子display flex布局方式。CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

3）图像和图标给定width和height，限制渲染范围。若图片过大会渲染失调。

4）.info：同其父级的属性差不多，也是一个弹性盒子。属性flex 1的作用：自适应其他同级div的宽度width，使得能铺满整个父级div。

三、常用css属性

1.文字换行隐藏，省略号显示

1）多行

.txet
	display -webkit-box
    -webkit-box-orient vertical
    -webkit-line-clamp 3
     word-wrap break-word
     word-break break-all
     overflow hidden

2）单行

.text
	overflow hidden
     text-overflow ellipsis
     white-space nowrap

2.元素水平居中

1）普通方式

.a
	margin 0 auto

2）弹性盒子方式

.a
	display flex
    flex-direction column