先来概要一下学习思路:
本系列内容,将针对微信小程序中的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 ...
随机推荐
-
Count Color(线段树+位运算 POJ2777)
Count Color Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 39917 Accepted: 12037 Descrip ...
-
linux系统下重启tomcat的shell脚本
linux系统下重启tomcat的shell脚本: #!/bin/shtomcat_home=/opt/apache-tomcat- #找到tomcat进程的id并kill掉 ps -ef |grep ...
-
coding
public class zengzhiwei { public static void main(String args[]) { int i; System.out.println("h ...
-
linux shell pushd popd dirs命令
1.dirs 1)功能显示当前目录栈中的所有记录(不带参数的dirs命令显示当前目录栈中的记录) 2)语法(1)格式:dirs [-clpv] [+n] [-n](2)选项-c 删除目录栈 ...
-
ext3文件系统,reiserfs,xfs,jsf那种性能好点
ext2 是一个旧的 Linux 档桉系统,没有日志功能. 启用的时间通常需要很久.目前有许多 日志型态 的档桉系统可以以更快的速度及更好的效率完成系统启用和检查. ext3 为 ext2 的日志版, ...
-
Contest - 第10届“新秀杯”ACM程序设计大赛网络资格赛 赛后信息(晋级名单·正式版)
2014_acm_fresh_0057 刘畅 20131620 2014_acm_fresh_0099 汪哲 20132185 2014_acm_fresh_0086 陈顺 2014111776 20 ...
-
Gstreamer 中的playback插件
1. PLAYBACK插件基本介绍 在早期的版本中同时存在playbin和playbin2,但是在最新的版本中,playbin2已经稳定,取代了playbin, playbin不再进行维护.下面是官网 ...
-
18.Llinux-触摸屏驱动(详解)
本节的触摸屏驱动也是使用之前的输入子系统 1.先来回忆之前第12节分析的输入子系统 其中输入子系统层次如下图所示, 其中事件处理层的函数都是通过input_register_handler()函数注册 ...
-
Django数据同步过程中遇到的问题:
1.raise ImproperlyConfigured('mysqlclient 1.3.13 or newer is required; you have %s.' % Database.__ve ...
-
算法学习笔记:knn理论介绍
阅读对象:了解指示函数,了解训练集.测试集的概念. 1.简介 knn算法是监督学习中分类方法的一种.所谓监督学习与非监督学习,是指训练数据是否有标注类别,若有则为监督学习,若否则为非监督学习.所谓K近 ...