css笔记13：display用法
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用法的更多相关文章
- Ext.Net学习笔记13：Ext.Net GridPanel Sorter用法
Ext.Net学习笔记13:Ext.Net GridPanel Sorter用法 这篇笔记将介绍如何使用Ext.Net GridPanel 中使用Sorter. 默认情况下,Ext.Net GridP ...
- CSS学习笔记（9）--详解CSS中:nth-child的用法
详解CSS中:nth-child的用法 前端的哥们想必都接触过css中一个神奇的玩意,可以轻松选取你想要的标签并给与修改添加样式,是不是很给力,它就是“:nth-child”. 下面我将用几个典型的实 ...
- jQuery学习笔记之Ajax用法详解
这篇文章主要介绍了jQuery学习笔记之Ajax用法,结合实例形式较为详细的分析总结了jQuery中ajax的相关使用技巧,包括ajax请求.载入.处理.传递等,需要的朋友可以参考下 本文实例讲述了j ...
- 理解与应用css中的display属性
理解与应用css中的display属性 display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none block inline inline-block inherit 下面, ...
- HTML+CSS笔记 CSS笔记集合
HTML+CSS笔记 表格,超链接,图片,表单 涉及内容:表格,超链接,图片,表单 HTML+CSS笔记 CSS入门 涉及内容:简介,优势,语法说明,代码注释,CSS样式位置,不同样式优先级,选择器, ...
- CSS中的display属性（none,block,inline,inline-block,inherit）
css中的display属性(none,block,inline,inline-block,inherit) display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none bl ...
- css before after基本用法【转】
<HTML><HEAD> <meta http-equiv="content-Type"content="text/html;charset ...
- 细说CSS中的display属性
相信大部分奋战在前端的,尤其在前端攻城的过程中,有一种越陷越深的感觉,不错,一如前端深似海,从此妹子是浮云啊,前端上手容易,深入难啊!下面我就CSS中的display属性讲下我自己所积累的,与大家共享 ...
- CSS中的display属性
CSS中的display属性 display:block是可以把非块级元素强制转换为块级元素显示,如内嵌元素span,原来不支持设置宽高,宽度是由内容撑开的,几个span元素是在同一行内的,如果给sp ...
随机推荐
- Codeforces Round #363
http://codeforces.com/contest/699 ALaunch of Collider 题意:n个球,每个球向左或右,速度都为1米每秒,问第一次碰撞的时间,否则输出-1 贪心最短时 ...
- Linux 中 x86 的内联汇编
工程中需要用到内联汇编,找到一篇不错的文章,趁机学习下. 原文地址:http://www.ibm.com/developerworks/cn/linux/sdk/assemble/inline/ 如果 ...
- SVM原理简介
本文只是简单介绍一下SVM的理论框架,想要详细了解当中细节问题处理可以参看后续章节或者网上各种详细资料.推荐Andrew Ng的斯坦福大学机器学习课程. 年代中期发展起来的基于统计学习理论的一种机器学 ...
- SCAU 07校赛 10317 Fans of Footbal Teams
10317 Fans of Footbal Teams 时间限制:1000MS 内存限制:65535K 题型: 编程题 语言: 无限制 Description Two famous footba ...
- J2EE开发常用开源框架技术（转）
1持久层:1)Hibernate这个不用介绍了,用的很频繁,用的比较多的是映射,包括继承映射和父子表映射对 于DAO在这里介绍个在它基础上开发的包bba96,目前最新版本是bba96 2.0它对Hib ...
- hadoop测试环境主配置简例
1,mapred-site.xml 此配置文件主要是针对mapreduce的配置文件,配置的是jobtracker的地址和端口; <configuration> <property& ...
- 利用red5搭建一个简单的流媒体直播系统
http://blog.sina.com.cn/s/blog_51396f890102exmz.html 一.red5安装.设置. 这个过程就不多说了,参见http://blog.csdn.net/l ...
- Spring Auto proxy creator example
In last Spring AOP examples – advice, pointcut and advisor, you have to manually create a proxy bean ...
- Java IO (3) - Reader
Java IO (3) - Reader 前言 JavaIO一共包括两种,一种是stream,一种是reader/writer,每种又包括in/out,所以一共是四种包.Java 流在处理上分为字符流 ...
- 关闭Linux里边的selinux
首先我们可以用命令来查看selinux的状态 getenforce 这个命令可以查看到selinux的状态,当前可以看到是关闭状态的. 还有一个命令也可以查看出selinux的状态. sest ...