对CSS进行wxss思路学习,display属性。
先来概要一下学习思路:
本系列内容,将针对微信小程序中的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属性。的更多相关文章
- CSS HTML元素布局及Display属性
本篇文章主要介绍HTML的内联元素.块级元素的分类与布局,以及dispaly属性对布局的影响. 目录 1. HTML 元素分类:介绍内联元素.块级元素的分类. 2. HTML 元素布局:介绍内联元素. ...
- (十二)学习CSS之display属性
参考:http://www.w3school.com.cn/cssref/pr_class_display.asp 浏览器支持 所有主流浏览器都支持 display 属性. 注释:如果规定了 !DOC ...
- CSS学习笔记05 display属性
HTML标记一般分为块标记和行内标记两种类型,它们也称块元素和行内元素. 块元素 每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度.高度.对齐等属性,常用于网页布局和网页结构的搭建.并且块级 ...
- CSS display属性学习
---恢复内容开始--- http://www.w3school.com.cn/cssref/pr_class_display.asp 所有主流浏览器都支持 display 属性,如IE,Firefo ...
- CSS学习笔记:display属性
目录 一.display属性概述 1. 块级元素和行内元素的区别 2.常见的块级元素和行内元素 3. display属性常见的属性值 二.测试display取各属性值的效果 1. 测试inline和b ...
- 转: 详解css中的display属性
在一般的CSS布局制作时候,我们常常会用到display对应值有block.none.inline这三个值.下面我们来分别来认识和学习什么时候用什么值.这里通过CSS display知识加实例讲解方法 ...
- !!!css如何让img图片居中?css的display属性实现图片居中(代码实例)
在我们开发前端页面的时候,为了让页面效果美观,会让图片呈现居中效果.那么css怎么让img图片居中显示呢?本篇文章给大家带来css如何让img图片居中?css的display属性实现图片居中(代码实例 ...
- CSS中的display属性
CSS中的display属性 display:block是可以把非块级元素强制转换为块级元素显示,如内嵌元素span,原来不支持设置宽高,宽度是由内容撑开的,几个span元素是在同一行内的,如果给sp ...
- Code笔记之:CSS+HTML display 属性
display属性值:none 此元素不会被显示. block 此元素将显示为块级元素,此元素前后会带有换行符. inline 默认.此元素会被显示为内联元素,元素前后没有换行符. inline-bl ...
随机推荐
- shell来start、stop、restart应用程序模板
这里使用shell中的case语法: case分支语句格式如下: case $变量名 in 模式1) 命令列表 ;; 模式2) 命令列表 ;; *) ;; esac case行尾必须为单词“in”,每 ...
- MyBatis 入门
什么是 MyBatis ? MyBatis 是支持定制化 SQL.存储过程以及高级映射的优秀的持久层框架.MyBatis 避免了几乎所有的 JDBC 代码和手工设置参数以及抽取结果集.MyBatis ...
- C#调用Java类
C#调用Java类 (2011-01-07 14:02:05) 转载▼ 分类: Java学习 1. 在Eclipse中新建名称为hello的java project,此工程仅包含一个文件hell ...
- STL中的set/multiset小结
(1)使用set/multiset之前必须包含头文件<set>:#include<set> (2)namespace std{ template <class T, cl ...
- ruby -- 问题解决(八)解决Paperclip::NotIdentifiedByImageMagickError
好吧!又见 Paperclip::NotIdentifiedByImageMagickError,之前遇过一次... 最近又遇到一次,解决了之后,忘了写博客,然后再次遇到的时候,有一种被车撞到的节奏. ...
- [python]爬代理ip v2.0(未完待续)
爬代理ip 所有的代码都放到了我的github上面, HTTP代理常识 HTTP代理按匿名度可分为透明代理.匿名代理和高度匿名代理. 特别感谢:勤奋的小孩 在评论中指出我文章中的错误. REMOTE_ ...
- SQL Server 2012:SQL Server体系结构——一个查询的生命周期(第3部分)(完结)
一个简单的更新查询 现在应该知道只读取数据的查询生命周期,下一步来认定当你需要更新数据时会发生什么.这个部分通过看一个简单的UPDATE查询,修改刚才例子里读取的数据,来回答. 庆幸的是,直到存取方法 ...
- 谈HTTP的KeepAlive
为什么要使用KeepAlive? 终极的原因就是需要加快客户端和服务端的访问请求速度.KeepAlive就是浏览器和服务端之间保持长连接,这个连接是可以复用的.当客户端发送一次请求,收到相应以后,第二 ...
- IOS高级编程之一:多点触摸与手势验证
前段时间学习了IOS基础的一些控件的使用作为基础,现在开始学习一些高级编程的东西,手势处理器.文件I/O.定位.网络通信.多线程这些,分享一些学习的重点,还是很实用的. 今天就先介绍个简单点得,手势处 ...
- “康园圈--互联网+校园平台“项目之sprint2
一.sprint2任务列表 1.部署框架,并上传代码到github. 2.原型设计 * 设计首页界面原型(包括功能公告.快速通道等展示栏) * 设计店铺浏览页面原型 * 设计店内浏览页面原型 * 设计 ...