1.代码演示：

element.html如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>display</title>

<link rel="stylesheet" type="text/css" href="element.css"/>

</head>

<body>

    <span class="s1">span1</span>

    <span class="s1">span2</span>

    <div class="s2">div1</div>

    <div class="s2">div2</div>

</body>

</html>

同时element.css文件，如下：

@charset "utf-8";

/* CSS Document */

.s1 {

    background-color:pink;

    display:block;  /*我希望使用s1类选择器的元素，按照块元素显示*/

}

.s2 {

    background-color:gray;

    width: 100px;

}

效果图：

2.我稍微修改一下上面代码，演示如下：

elememt.html不变，element.css如下：

@charset "utf-8";

/* CSS Document */

.s1 {

    background-color:pink;

    display:block;  /*我希望使用s1类选择器的元素，按照块元素显示*/

}

.s2 {

    background-color:gray;

    width: 100px;

    display:inline;

}

效果图：

css笔记13：display用法的更多相关文章

  1. Ext.Net学习笔记13：Ext.Net GridPanel Sorter用法

    Ext.Net学习笔记13:Ext.Net GridPanel Sorter用法 这篇笔记将介绍如何使用Ext.Net GridPanel 中使用Sorter. 默认情况下,Ext.Net GridP ...

  2. CSS学习笔记（9）--详解CSS中:nth-child的用法

    详解CSS中:nth-child的用法 前端的哥们想必都接触过css中一个神奇的玩意,可以轻松选取你想要的标签并给与修改添加样式,是不是很给力,它就是“:nth-child”. 下面我将用几个典型的实 ...

  3. jQuery学习笔记之Ajax用法详解

    这篇文章主要介绍了jQuery学习笔记之Ajax用法,结合实例形式较为详细的分析总结了jQuery中ajax的相关使用技巧,包括ajax请求.载入.处理.传递等,需要的朋友可以参考下 本文实例讲述了j ...

  4. 理解与应用css中的display属性

    理解与应用css中的display属性 display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none block inline inline-block inherit 下面, ...

  5. HTML+CSS笔记 CSS笔记集合

    HTML+CSS笔记 表格,超链接,图片,表单 涉及内容:表格,超链接,图片,表单 HTML+CSS笔记 CSS入门 涉及内容:简介,优势,语法说明,代码注释,CSS样式位置,不同样式优先级,选择器, ...

  6. CSS中的display属性（none,block,inline,inline-block,inherit）

    css中的display属性(none,block,inline,inline-block,inherit) display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none bl ...

  7. css before after基本用法【转】

    <HTML><HEAD> <meta http-equiv="content-Type"content="text/html;charset ...

  8. 细说CSS中的display属性

    相信大部分奋战在前端的,尤其在前端攻城的过程中,有一种越陷越深的感觉,不错,一如前端深似海,从此妹子是浮云啊,前端上手容易,深入难啊!下面我就CSS中的display属性讲下我自己所积累的,与大家共享 ...

  9. CSS中的display属性

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

随机推荐

  1. Winxp下搭建SVN服务器

    本文介绍一种在winxp下搭建SVN服务器的方法. (1) 需要下载Slik-Subversion和TortoiseSVN两个软件.我使用的版本是Slik-Subversion-1.8.3-1-win ...

  2. Tkinter教程之Label篇

    本文转载自:http://blog.csdn.net/jcodeer/article/details/1811293 #Tkinter教程之Label篇'''1.Label的第一个例子text属性使用 ...

  3. [转]Erlang不能错过的盛宴

    Erlang不能错过的盛宴 (快步进入Erlang的世界) 作者:成立涛 (litaocheng@gmail.com) 作为程序员,我们曾经闻听很多“业界动态”,“技术革新”,曾经接触很多“高手箴言” ...

  4. HDU4456-Crowd（坐标旋转+二位树状数组+离散化）

    转自:http://blog.csdn.net/sdj222555/article/details/10828607 大意就是给出一个矩阵 初始每个位置上的值都为0 然后有两种操作 一种是更改某个位置 ...

  5. 第二百八十一、二、三天 how can I 坚持

    又是三天,真搞不懂人到底是是什么,到底想要啥,好压抑. 周五,李东勇他们来北京开年会,晚上下班,去了趟团结湖公园,好冷,快冻死了,等着他们来了,见面,感觉好亲切,晚上一块吃了个火锅,玩的很happy. ...

  6. GUI、模块化与结对编程（homework-03）

    摘要: 在本次作业博客里,我将主要阐述作业3的收获.作业3表面是将之前的程序转换为图形界面(之前程序见http://www.cnblogs.com/shone/p/3348372.html),然而本质 ...

  7. Java邮件服务学习之二：SMTP和POP3

    一.SMTP SMTP(Simple Mail Transfer Protocol)即简单邮件传输协议,它是一组用于由源地址到目的地址传送邮件的规则.SMTP协议属于TCP/IP协议簇,它帮助每台计算 ...

  8. [iOS 多线程 & 网络 - 2.1] - 解析json

    A.iOS中json的基本使用 1.解析json数据 (1)json反序列化 对象{}格式 {key : value, key : value,...} 的键值对的结构可以反序列化为OC中的NSDic ...

  9. Linux平台部署varnish 高性能缓存服务器

    一:varnish部署前准备: 1.1相关软件以及系统,web服务 系统要求:Centos 6(以上) (64位) 相关中间件:varnish-4.0.2 1.2相关系统依赖包安装检查准备 1.2.1 ...

  10. HDU 4463 Outlets （最小生成树）

    题意:给定n个点坐标,并且两个点已经连接,但是其他的都没有连接,但是要找出一条最短的路走过所有的点,并且路线最短. 析:这个想仔细想想,就是应该是最小生成树,把所有两点都可以连接的当作边,然后按最小生 ...