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之后会自适应扩充父类。