微信小程序学习笔记——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之后会自适应扩充父类。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值