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 ...
随机推荐
- restsharp发送服务端请求回传session
今天工作遇到这样一个场景,我需要获取一个游戏目录列表,这个列表接口在线上已经存在,但是这个接口需要登录认证后才能获取到,所以实现这个功能我打算分两部来做: 1.首先调登录接口,以写上session 2 ...
- SVM核函数与软间隔
核函数 在上文中我们已经了解到使用SVM处理线性可分的数据,而对于非线性数据需要引入核函数的概念它通过将数据映射到高维空间来实现线性可分.在线性不可分的情况下,支持向量机通过某种事先选择的非线性映射( ...
- 《Genesis-3D开源游戏引擎完整实例教程-2D射击游戏篇08：弹幕系统》本系列完结
8.弹幕系统 弹幕系统概述: 弹幕系统的设计体现了射击游戏的基本要素,玩家要在敌人放出的大量子弹(弹幕)的细小空隙间闪避,能在玩家闪躲弹幕的时候给玩家带来快感,接近满屏的子弹,增加了对玩家的视觉冲击力 ...
- SRM 502 DIV1 500pt(DP)
题目简述 给定比赛时间T和n个题目,你可以在任意时间提交题目,每个题目有一个初始分数maxPoints[i],每个单位时间题目的分数将会减少pointsPerMinute[i],即如果在时间t解决了第 ...
- IIS中使用PUT方法錯誤記錄
在IIS7.5中使用PUT,DELETE方法時會遇到404,405錯誤,特記錄解決辦法:404: 405: 在web.config的system.webServer節點中加入 <modules ...
- Linux之一次性安装开发工具：yum groupinstall Development tools
[spark@sparksinglenode ~]$ yum grouplist | moreLoaded plugins: fastestmirror, refresh-packagekit, se ...
- Spark RDD概念学习系列之细谈RDD的弹性（十六）
细谈RDD的弹性 所谓,弹性,是指在内存不够时可以与磁盘进行交换. 弹性之一:自动的进行内存和磁盘数据存储的切换 弹性之二:基于Lineage(血缘)的高效容错 弹性之三:Task如果失败会 ...
- HDU 5768 Lucky7 （中国剩余定理 + 容斥 + 快速乘法）
Lucky7 题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5768 Description When ?? was born, seven crow ...
- Linux下的进程管理
在操作系统系统中,进程是一个非常重要的概念. 一.Linux中进程的相关知识 1.什么是进程呢? 通俗的来说进程是运行起来的程序.唯一标示进程的是进程描述符(PID),在linux内核中是通过task ...
- ASP.NET项目中引用全局dll
在ASP.NET项目中,有些dll是全局dll,也就是说,没有放在单个项目的引用中.它们一般存放在如下目录C:\Windows\assembly中 这个时候,我们需要在单个项目中引用他们,应该如何做呢 ...