对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 ...
随机推荐
- U3D包大小优化之microlib
当迩想把最小类库发上来,迩需要把Stripping Level设置为Use micro mscorlib 这里是MICROLIB所能使用的包的类库列表:http://docs.unity3d.com/ ...
- VR是TAA的终结者吗?
在刚刚发布的Unreal Engine 4.14中,其第一个重要的特性就是增加了在VR开发中对Forward Shading的支持.我们都知道在很多方面Deferred Shading都优于Forwa ...
- reinstall_xbt: Linux中如何查看文件的最初创建时间
Linux中如何查看文件的最初创建时间 与文件相关的几个时间: 1.访问时间,读一次这个文件的内容,这个时间就会更新.比如对这个文件使用more命令.ls.stat命令都不会修改文件的访问时间. ...
- 视觉SLAM中的数学基础 第四篇 李群与李代数(2)
前言 理解李群与李代数,是理解许多SLAM中关键问题的基础.本讲我们继续介绍李群李代数的相关知识,重点放在李群李代数的微积分上,这对解决姿态估计问题具有重要意义. 回顾 为了描述三维空间里的运动,我们 ...
- golang 图片处理,剪切,base64数据转换,文件存储
本文主要介绍: 1. 图片文件的读写. 2. 图片在go缓存中如何与base64互相转换 3. 图片裁剪 本文中,为了方便查看,去掉所有错误判断 base64 -> file ddd, _ := ...
- [LeetCode] 桶排序的特殊解,例 Sort Color
Sort Colors Given an array with n objects colored red, white or blue, sort them so that objects of t ...
- 【转载】[JS]让表单提交返回后保持在原来提交的位置上
有时候,在网页中点击了页面中的按钮或是刷新了页面后,页面滚动条又 会回到顶部,想看后面的记录就又要拖动滚动条,或者要按翻页键,非常不方便,想在提交页面或者在页面刷新的时候仍然保持滚动条的位置不变,最好 ...
- 发现新大陆-JMX
今天接触到这个东西,觉得好有趣,可以用很多第三方的显示层jar包直接在UI界面上操作指定的java对象,网上将这个东西的也挺多的,我个人觉得这个比webServer还强大了.webserver只是公布 ...
- get新技能: 如何设置元素高度与宽度成特定比例。宽度改变,高度自动按比例改变。 例如设置宽高比16:9。
设置宽高比在很多时候是有用的. 下面的栗子,我们设置一个容器的宽高比为16:9 //HTML代码片段 <div class="container"> <div c ...
- Microsoft Visual Studio 2013 VSTS单元测试指南
安装vs2013时并未安装VSTS工具包,所以在工具栏:工具->拓展和更新 进行下载安装 vs13已经用了两年了,相比于之前老师推荐的vc6.0感觉要强出很多,刚上手时感觉比较困难,在使用一 ...