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 ...
随机推荐
- 安卓升级提示 phoneGap APK软件更新提示
以下代码由PHP200 阿杜整理 package com.example.syzx; import java.io.BufferedReader; import java.io.File; imp ...
- 第二百八十九天 how can I 坚持
今天好伤啊,太把自己当回事了. 现在在弟弟这,下午和他一块看了看西客站附近的房子,感觉暂时好难,只是暂时的,一切都会好起来的. 弟弟上班也挺不容易,不该来给他添麻烦,替他心疼. 确实不知道该咋办了,好 ...
- AppDelegate 、UIApplication 的用法
转载自 http://blog.chinaunix.net/uid-26768267-id-3300042.html //AppDelegate.h 头文件 #import <UIKit/UI ...
- 利用hashtable和time函数加速Lisp程序
程序功能是从一个英文文本中得到单词表,再得到押韵词表.即输出可能这样开始: a ameoeba alba samba marimba... 这样结束: ...megahertz gigahertz j ...
- Light oj 1214-Large Division (同余定理)
题目链接:http://lightoj.com/volume_showproblem.php?problem=1214 题意很好懂,同余定理的运用,要是A数被B数整除,那么A%B等于0.而A很大,那我 ...
- Long与long的比较
Java中如果使用 == 双等于比较对象,等于比较的是两个对象的内存地址,也就是比较两个对象是否是同一个对象如果比较两个Long对象值是否相等,则不可以使用双等号进行比较,可以采用如下方式:1. 使用 ...
- linux(centos 6)下记录所有用户的操作以及ip、时间
编辑/etc/profile文件,在文件末尾加入下面代码: [root@iZ23nn1p4mjZ root]# vi /etc/profile history USER=`whoami` USER_I ...
- 【JDBC】预编译SQL与防注入式攻击
在JDBC编程中,常用Statement.PreparedStatement 和 CallableStatement三种方式来执行查询语句,其中 Statement 用于通用查询, PreparedS ...
- iOS开发-block使用与多线程
Block Block封装了一段代码,可以在任何时候执行 Block可以作为函数参数或者函数的返回值,而其本身又可以带输入参数或返回值. 苹果官方建议尽量多用block.在多线程.异步任务.集合遍历. ...
- 【不积跬步，无以致千里】linux下如何查看自己的外网IP
局域网的服务器是通过ADSL路由器连接外网的,但ADSL是从ISP运营商那儿通过动态获得IP的,那么我怎么知道自己的外网地址是多少呢?今天得到几个办法:curl -s http://whatismyi ...