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 ...
随机推荐
- Azure支持docker简介以及使用指南
Docker 是一个开源的项目,主要的特点是能将应用程序包装在一个 LXC (Linux Container) 容器中,当这些应用被包装进容器后,部署.迁移都变得更为简单.与传统的虚拟化技术相比,虚拟 ...
- （转载）OC学习篇之---类的定义
之前已经介绍了OC中的一个程序HelloWorld,今天我们继续学习OC中类的相关知识. OC和C的最大区别就是具有了面向对象的功能,那么说到面向对象,就不得不说类这个概念了,如果学过Java的话,那 ...
- OpenJDK与JDK的区别及Ubuntu下的安装方法
OpenJDK与JDK的区别: OpenJDK是JDK的开放原始码版本,以GPL协议的形式放出.两者的授权协议的不同,且在采用GPL协议的OpenJDK中,SUNJDK的一部分源代码因为产权的问题无法 ...
- sys.default_constraints
作为默认定义且 sys.objects.type = D 的每个对象在表中各对应一行, 该默认定义是作为 CREATE TABLE 或 ALTER TABLE 语句的一部分创建的, 而不是作为 CRE ...
- 解决A program file was not specified in the launch configuration.问题
问题描述: 在eclipse 中开发c++或c是比较麻烦的事情,刚刚配置好mingw32和cdt和环境变量后,新建一个hello world的c++项目还是会出现问题.主要是在编译的时候会提示 ...
- work6
1) 把程序编译通过, 跑起来. 把正确的 playPrev(GoMove) 的方法给实现了. 如果大家不会下围棋,那就需要大家实地或者上网练习一下围棋的死活,提子是怎么回事.这个应该一个小时就能搞定 ...
- Linux平台部署varnish 高性能缓存服务器
一:varnish部署前准备: 1.1相关软件以及系统,web服务 系统要求:Centos 6(以上) (64位) 相关中间件:varnish-4.0.2 1.2相关系统依赖包安装检查准备 1.2.1 ...
- UVaLive 6862 Triples (数学+分类讨论)
题意:给定一个n和m,问你x^j + y^j = z^j 的数量有多少个,其中0 <= x <= y <= z <= m, j = 2, 3, 4, ... n. 析:是一个数 ...
- OOP 6大基本原则
1.开闭原则: 对扩展开发.对修改关闭. 2.里氏替换原则:子类替换父类(可以用父类对象的任何地方都可以用子类对象代替) 3.依赖倒置原则:程序要依赖于抽象接口,不要依赖于具体实现.简单的说就是要求对 ...
- C++的辅助工具介绍
1 文档类 (1) Doxygen 参考站点:http://www.doxygen.org Doxygen是一种适合C风格语言(如C++.C.IDL.Java甚至包括C#和PHP)的.开放源码的 ...