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. ACM1994

    /* Problem Description 为自行解决学费,chx勤工俭学收入10000元以1年定期存入银行,年利率为3.7% .利率按年计算,表示100元存1年的利息为3.7元.实际上有时提前有时 ...

  2. 《Genesis-3D开源游戏引擎-官方录制系列视频教程：进阶实例篇》

    注:本系列教程仅针对引擎编辑器:v1.2.2及以下版本 G3D进阶实例   第四课<2D编辑与脚本的统一入口> 使用G3D完成一个简单的类飞机大战游戏,介绍了G3D2d游戏制作的流程包括: ...

  3. js变量申明提前及缺省参数

    现在最先的行为准则:js变量申明必须带var:然后开始随笔: 函数中的变量申明在编译的时候都会提到函数开头. 例如: function foo(){ console.log('some code he ...

  4. 第二百六十六天 how can I 坚持

    有些小郁闷,上班没事干,技术.要买房,还要结婚,买了房哪还有彩礼钱,还得借钱,愁人. 该咋办,毕梦琪. 哎.今天还和程秀通说好的去看房呢,整天犹豫不定的.烦. 今天平安夜啊.吃了个苹果,一生平平安安, ...

  5. SAE 合并图片

    $domain = 'picleader'; //图片库的域名 $stgurl = 'http://lemonluoxing-picleader.stor.sinaapp.com/'; //绝对路径 ...

  6. Hibernate配置文件——hibernate.cfg.xml

    <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE hibernate-configuratio ...

  7. WinJS.Binding.List与kendo.data.ObservableArray

    avalon0.8一个最大目标是实现对数组的深层监控,可是面临的困难重重,至今还没有什么起色.于是看一下其他两个MVVM框架的做法(knockout, emberjs, angular都不能监听家庭数 ...

  8. JDBC学习笔记(3)——复习和练习

    复习和练习 复习部分 一.获取数据库连接 1)方式一 // 获取数据库连接 @Test public void testGetConnection() throws Exception { // 1. ...

  9. 在线判题 (模拟）http://202.196.1.132/problem.php?id=1164

    #include<stdio.h> #include<math.h> #include<string.h> #include<stdlib.h> #de ...

  10. jquery easyui的异步tree

    1.创建一个简单的tree 结果如图: <script> $(function(){ $('#tt').tree(){ url:'要提交的url地址', checkbox:true, li ...