先来概要一下学习思路:

本系列内容,将针对微信小程序中的WXSS学习,所以在学习CSS时每一个知识点都在小程序IDE中进行实践,达到最好的学习效果。

由于wxss与CSS有些许不同,在学习CSS过程中我们因尽力避免,在wxss中没有的属性花费太多时间。

接触display属性:

它是CSS中最重要的属性

每个元素都有默认的display值

对于大多数元素它们的默认值是block与inline。

block被叫做块级元素,inline被叫做行内元素。

block块级元素:它会尽可能撑满容器的左右边距,也就会让其他元素不能与它同排。

其他常用的块级元素包括 p 、 form 和HTML5中的新元素: header 、 footer 、 section 等等。

inline行内元素:它只会包裹内容而不会占用其他空间,

  • 设置宽度width   无效。
  • 设置高度height  无效,可以通过line-height来设置。
  • 设置margin 只有左右margin有效,上下无效。
  • 设置padding 只有左右padding有效,上下则无效。注意元素范围是增大了,但是对元素周围的内容是没影响的。

http://blog.csdn.net/freshlover/article/details/7076831

http://www.cnblogs.com/lhl98/p/3432794.html

以上链接对块与内元素有较好的讲解。

我们在微信IDE中进行实践就可以有较为清楚的“自我认知”。

对CSS进行wxss思路学习,display属性。的更多相关文章

  1. CSS HTML元素布局及Display属性

    本篇文章主要介绍HTML的内联元素.块级元素的分类与布局,以及dispaly属性对布局的影响. 目录 1. HTML 元素分类:介绍内联元素.块级元素的分类. 2. HTML 元素布局:介绍内联元素. ...

  2. (十二)学习CSS之display属性

    参考:http://www.w3school.com.cn/cssref/pr_class_display.asp 浏览器支持 所有主流浏览器都支持 display 属性. 注释:如果规定了 !DOC ...

  3. CSS学习笔记05 display属性

    HTML标记一般分为块标记和行内标记两种类型,它们也称块元素和行内元素. 块元素 每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度.高度.对齐等属性,常用于网页布局和网页结构的搭建.并且块级 ...

  4. CSS display属性学习

    ---恢复内容开始--- http://www.w3school.com.cn/cssref/pr_class_display.asp 所有主流浏览器都支持 display 属性,如IE,Firefo ...

  5. CSS学习笔记:display属性

    目录 一.display属性概述 1. 块级元素和行内元素的区别 2.常见的块级元素和行内元素 3. display属性常见的属性值 二.测试display取各属性值的效果 1. 测试inline和b ...

  6. 转: 详解css中的display属性

    在一般的CSS布局制作时候,我们常常会用到display对应值有block.none.inline这三个值.下面我们来分别来认识和学习什么时候用什么值.这里通过CSS display知识加实例讲解方法 ...

  7. !!!css如何让img图片居中?css的display属性实现图片居中(代码实例)

    在我们开发前端页面的时候,为了让页面效果美观,会让图片呈现居中效果.那么css怎么让img图片居中显示呢?本篇文章给大家带来css如何让img图片居中?css的display属性实现图片居中(代码实例 ...

  8. CSS中的display属性

    CSS中的display属性 display:block是可以把非块级元素强制转换为块级元素显示,如内嵌元素span,原来不支持设置宽高,宽度是由内容撑开的,几个span元素是在同一行内的,如果给sp ...

  9. Code笔记之:CSS+HTML display 属性

    display属性值:none 此元素不会被显示. block 此元素将显示为块级元素,此元素前后会带有换行符. inline 默认.此元素会被显示为内联元素,元素前后没有换行符. inline-bl ...

随机推荐

  1. 使用 crosswalk-cordova 打包sencha touch 项目,再也不用担心安卓兼容问题!

    国内的安卓手机品牌众多,安卓操作系统碎片化也很严重,我们使用sencha touch 开发的应用不可避免的出现了各种无解的兼容性问题. 有时候我就在想,有没有既能支持cordova,又能让我们把Chr ...

  2. 关于python协程的一个例子的学习

    例子来自https://blog.tonyseek.com/post/event-manage-with-greenlet/ 加了一些注释看懂了: 注释中的数字表示执行的顺序,这个简单的例子用到了py ...

  3. Access“输入的表达式中含有一个无效日期值”

    环境:access2003 + win7 有图有真相: 明显地看到,日期那里显示了“星期X”,问题的根源就在这里... 更改计算机的日期显示设置为不显示星期~ 方法:点击右下角的时钟-点击“更改日期和 ...

  4. SimpleDateFormatter Java中的用法

    转载 http://www.cnblogs.com/jayzee/p/3171195.html 有一点需要补充的是,SimpleDateFormatter是有时制的 如果hh:mm,则选用的是12小时 ...

  5. Android应用安全之外部动态加载DEX文件风险

    1. 外部动态加载DEX文件风险描述 Android 系统提供了一种类加载器DexClassLoader,其可以在运行时动态加载并解释执行包含在JAR或APK文件内的DEX文件.外部动态加载DEX文件 ...

  6. Reveal查看任意app的高级技巧(转)

    原文:http://zhuanlan.zhihu.com/iOSRe/19646016 Reveal查看任意app的高级技巧 hangcom · 12 小时前 Reveal是一个很强大的UI分析工具, ...

  7. Cocoa Drawing Guide学习part1——基础和图形上下文 (转)

    原文:http://noark9.github.io/2013/12/28/cocoa-drawing-guide-study-part-1/ 简介 cocoa drawing由AppKit提供并且也 ...

  8. Angular.js表单以及与Bootatrap的使用

    首先从angular.js的目录开始,如下图,知道了我们要学什么,然后再开始有目的的学习与对比. 1.从表达式开始: ng-app指令初始化一个 AngularJS 应用程序. ng-init指令初始 ...

  9. jquery判断radioButton是否被选中

    so easy HTML: <input type='radio' style='width:20px' id='other' name='projectType' value='其他' /&g ...

  10. python面向对象编程(下)

    本篇详细介绍了Python 中类的成员.成员修饰符.类的特殊成员以及两个综合运用实例. 环境为:python3.5.1 类的成员 类的成员包括三大类:字段.方法和property属性 注:关于这三类成 ...