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 ...
随机推荐
- 12306验证图片的bug
刚才有人告诉我12306验证码换了,于是我就打开了看了看,点了点.oh no , i am really sorry ,12306.
- .net组件技术
.NET是什么? •.NET是一个平台,而不是一种语言. •.NET是Microsoft的用以创建XML Web服务(下一代软件)平台,该平台将信息.设备和人以一种统一的.个性化的方式联系起来. ...
- Java——观察者模式实例
观察者模式(订阅/发布模式) 作者: 代码大湿 代码大湿 Java中观察者模式中主要是Observerable类(被观察者),和Observer接口(观察者).下面是个简单的demo //被观察者 p ...
- NodeJs 开源
iwebpp.io - 运行P2P Node.js web 服务,穿透防火墙,NAT https://github.com/InstantWebP2P/iwebpp.io pm 是一个轻量级的Node ...
- html学习笔记之position
今天主要一直看试验position的各种属性,现在记录下来以此备忘. position有四种常有属性,分别是static,fixed.absolute,relative fixed就是相对于窗口的位置 ...
- free 和 fclose
想到一个场景,具体代码如下 #include <stdio.h> #include <stdlib.h> int main(int argc, const char *argv ...
- Android游戏之平台接入的一点记录
最近手头有需要接入多个渠道的工作,我负责的是Android方面的接入,一般来说,渠道是非常多的,每一个渠道调用的接口都不一致,如果每一个渠道都要自己去弄回非常的耗时,所以网上会有一些接入的中间件提供商 ...
- TypeScript学习笔记（三）：类
类 在TypeScript中,类似于C#的结构,即一个文件中可以存在多个类,且文件名可以任意取,我们先看一个简单的类的示例. class Person { private name: string; ...
- PostgreSQL的 initdb 源代码分析之二十
继续分析: setup_privileges(); 展开: 这是设置权限. 其cmd是:"/home/pgsql/project/bin/postgres" --single -F ...
- 【博客迁移】hityixiaoyang.com
用了快两年简洁的cnblog现在迁移到新域名空间:http://blog.apluslogicinc.com 欢迎来踩啊~~~