flex-direction

传送门

border

传送门

  •  边框

    • 粗细:thin(细线)、medium(中粗线)和thick(粗线)
    • 类型:九个确定值:none(无边框线)、 dotted(由点组成的虚线)、 dashed(由短线组成的虚线)、 solid(实线)、 double(双线,双线宽度加上它们之间的空白部分的宽度就等于border-width定义的宽度)、 groove(3D沟槽状的边框)、 ridge(3D脊状的边框)、 inset(3D内嵌边框,颜色较深)、 outset(3D外嵌边框,颜色较浅)
    • 自定义宽度,如:1pt、5px、2cm等
    • 颜色:十六进制的颜色代码、英文颜色

语法:
margin : auto | length
参数:
margin:10px 11px 9px 8px; ,按顺序分别代表对象与父容器的上、右、下、左的距离值为10px,11px,9px,8px。
auto :  值被设置为相对边的值
length :  由浮点数字和单位标识符组成的长度值 | 百分数。百分数是基于父对象的高度。对于内联对象来说,左右外延边距可以是负数值。

先看margin,margin有4个值:margin:10px 11px 9px 8px; ,按顺序分别代表对象与父容器的上、右、下、左的距离值为10px,11px,9px,8px。
如果只写两个值:margin:10px 5px; ,表示对象与父容器的上下距离值都是10px,与左右的距离值都是5px。
那么这时候我们来看margin:0 auto; ,这个就表示上下的距离值是0,而左右就是自动适应,也就是我们常说的自动居中。
而你所说的margin:auto; , 就表示上下左右都自动适应。

微信小程序-布局的更多相关文章

  1. 微信小程序布局篇

    刚刚接触小程序,小程序与HTML5有一定的差别,小程序就几个标签,而HTML5一大堆标签,还不断更新,但是新增标签功能强大.做一下微信小程序的布局练练手.感觉还是挺不错的,也封装了很多东西功能出来,与 ...

  2. 微信小程序布局

    尺寸单位与设计原则 首先,我们现在页面中引入一张图片    但是实际上,这个图片的大小是32*18的,之所以会显示这么大,是因为image组件默认的宽度为300px,默认的高度为225px,如果我们需 ...

  3. 微信小程序 - 布局练习

    1.小程序的布局就多了一个flex布局,其他和之前html没太大区别 ,先看代码: (1)wxml <view class='container'> <view class='sel ...

  4. 微信 小程序布局 swiper 页面

    JS // pages/classify/swiper.js Page({ /** * 页面的初始数据 */ data: { current:0   }, titleBtn:function(e){ ...

  5. 微信 小程序布局 scroll-view

      //滚动触底事件 <scroll-view scroll-y lower-threshold="0" bindscrolltolower="scrollBott ...

  6. 近期热门微信小程序demo源码下载汇总

    近期微信小程序demo源码下载汇总,乃小程序学习分析必备素材!点击标题即可下载: 即速应用首发!原创!电商商场Demo 优质微信小程序推荐 -秀人美女图 图片下载.滑动翻页 微信小程序 - 新词 GE ...

  7. 微信小程序--家庭记账本开发--04

    界面的布局 在微信小程序开发过程中,界面的布局是十分重要的,无论是一个什么样的程序,界面的美观合理才能提供给客户一个较好的使用体验,就微信小程序布局自己看了许多小程序布局,自己将学习心得记录如下: 下 ...

  8. 微信小程序新单位rpx与自适应布局

    rpx是微信小程序新推出的一个单位,按官方的定义,rpx可以根据屏幕宽度进行自适应,在rpx出现之前,web页面的自适应布局已经有了多种解决方案,为什么微信还捣鼓出新的rpx单位?在解释这个单位前,我 ...

  9. 微信小程序:原生热布局终将改变世界

    关于本文的所有观点都是网上收集,与作者本人没有任何关系! 最近朋友圈已经被微信小程序刷屏了,这也难怪,腾讯的产品拥有广泛的影响力,谁便推出个东西,都会有很多人认为会改变世界,这不,张小龙刚一发布微信小 ...

随机推荐

  1. Java经典编程题50道之三十九

    写一个函数,求一个字符串的长度,在main函数中输入字符串,并输出其长度. public class Example39 {    public static void main(String[] a ...

  2. TzObjectInspector 一例

    TzObjectInspector Github上的一个开源组件!可以做到类似Delphi IDE属性,事件面板的样式!作者持续更新中... 看起来是这个样子: 这个东西用起来并不像想象的那样可以直接 ...

  3. Linux服务器上安装MySql数据库(默认安装,密码为空),首次使用需要修改密码

    1,在/etc/my.cnf末尾  加入skip-grant-tables,保存,跳过身份验证. 2,重启MySql,使刚才修改的配置生效. 3,终端输入mysql,然后再输入use mysql; 4 ...

  4. TP5整合 WorkerMan 以及 GatewayWorker

    TP5整合GatewayWorker Windows版安装 a)使用composer create-project topthink/think testTG,来安装thinkphp5. b)进入t ...

  5. python_crawler,批量下载文件

    这个第一个python3网络爬虫,参考书籍是<python网络数据采集>.该爬虫的主要功能是爬取某个网站,并将.rar,.doc,.docx,.zip文件批量下载. 后期将要改进的是,用后 ...

  6. 剑指offer 丑数

    思路:可以发现,每个丑数都是由以前的丑数得到.当前丑数一定是之前丑数能够得到的最小丑数. AC代码 class Solution { public: int GetUglyNumber_Solutio ...

  7. scrapy回调函数传递参数

    scrapy.Request 的callback传参的两种方式 1.使用 lambda方式传递参数 def parse(self, response): for sel in response.xpa ...

  8. AES对称加密

    import javax.crypto.Cipher; import javax.crypto.spec.IvParameterSpec; import javax.crypto.spec.Secre ...

  9. 借助TZImagePickerController三方库理解自定义相册

    借助TZImagePickerController三方库理解自定义相册 1.整体架构分析 整体框架大致可以分为几个部分 <1>工具类-TZImageManager:这个类主要是工作是提供一 ...

  10. R︱sparkR的安装与使用、函数尝试笔记、一些案例

    本节内容转载于博客: wa2003 spark是一个我迟早要攻克的内容呀~ ------------------------------------- 一.SparkR 1.4.0 的安装及使用 1. ...