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. php pdo

    定义:PDO(PHP Data Object)是PHP5才支持的扩展,它为PHP访问各种数据库定义了一个轻量级的.一致性的接口. PDO是PHP5中的一个重大功能,PHP6中将只默认使用PDO来处理数 ...

  2. 【转】Nginx系列（四）--工作原理

    原博文出于:    http://blog.csdn.net/liutengteng130/article/details/46724081  感谢! 上篇文章介绍了Nginx框架的设计之管理进程以及 ...

  3. homework-附加题：第12章基本数据类型阅读总结

    基本数据类型是构建其他所有数据类型的构造块,本人认为这部分是计算机编程的基础,值得得到大家的注意. 首先,在本章中作者提到了避免使用magic number.使用magic number这种做法是极其 ...

  4. 注意 sizeof 中不要有复杂运算操作

    http://github.tiankonguse.com/blog/2014/12/05/c-base/ 一个比较有意思的问题 #include<stdio.h> ; int f() { ...

  5. UVA 315 315 - Network（求割点个数）

     Network  A Telephone Line Company (TLC) is establishing a new telephone cable network. They are con ...

  6. Spring EL hello world example

    The Spring EL is similar with OGNL and JSF EL, and evaluated or executed during the bean creation ti ...

  7. 应用反射写的tostring方法

    应用反射写的tostring方法 应用反射写的tostring方法,方便以后查询 代码 package com.chzhao.reflecttest; import java.lang.reflect ...

  8. SPOJ 375 (树链剖分 - 边权剖分 - 修改单边权)

    题目链接:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=28982#problem/I 给你一棵有边权的树,有两个操作:一个操作是输出l到 ...

  9. EasyUI datetimebox设置默认值为当前时间

    设置value="${notices.release_time}" <input class="easyui-validatebox easyui-datetime ...

  10. 用Rufus来制作Windows10的U盘安装盘

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:用Rufus来制作Windows10的U盘安装盘.