微信小程序学习笔记——CSS点滴记录

border

对元素设置边框，写法如下：

border: 1px solid #0ff;

设置border的顺序为border-width、,border-style和border-color，width直接设置宽度，color直接设置颜色，style有多种选择，如solid(实线)、dashed(虚线)等。直接设置border是对元素四边全部设置，也可以用border-top、border-left等设置单独某一边。

overflow

如果内容溢出显示区域的话，相应的设置，写法如下：

overflow: hidden;  全局设置
overflow-x: scroll;  左/右边缘进行裁剪
overflow-y: visible;  上/下边缘的裁剪
overflow-wrap: normal;    内容超过指定容器的边界时是否断行

overflow有hidden、scroll、visible、auto等属性，默认是visible。

overflow-wrap有normal和break-word两种，normal为允许内容顶开或溢出指定的容器边界，break-word为内容将在边界内换行。如果需要，单词内部允许断行

flex

让所有弹性盒模型对象的子元素都有相同的长度，忽略它们内部的内容。其实我感觉和安卓的weight有点像，下面举个简单的例子，就是左中右三个布局横向展示，左右自适应宽度，中间区域扩充父类。代码如下：

<view style="display:flex; flex-direction:row; margin-top:50px;height:30px">
<view  style="background-color:#f0f;width:50px"></view>
<view  style="background-color:#f00;flex:1"></view>
<view  style="background-color:#ff0;width:40px"></view>
</view>

运行结果如下：


可以看到中间红色设置flex:1之后会自适应扩充父类。