css笔记13:display用法

时间:2022-09-24 14:58:04

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; }

效果图:

css笔记13:display用法

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用法

css笔记13:display用法的更多相关文章

  1. Ext&period;Net学习笔记13:Ext&period;Net GridPanel Sorter用法

    Ext.Net学习笔记13:Ext.Net GridPanel Sorter用法 这篇笔记将介绍如何使用Ext.Net GridPanel 中使用Sorter. 默认情况下,Ext.Net GridP ...

  2. CSS学习笔记(9)--详解CSS中&colon;nth-child的用法

    详解CSS中:nth-child的用法 前端的哥们想必都接触过css中一个神奇的玩意,可以轻松选取你想要的标签并给与修改添加样式,是不是很给力,它就是“:nth-child”. 下面我将用几个典型的实 ...

  3. jQuery学习笔记之Ajax用法详解

    这篇文章主要介绍了jQuery学习笔记之Ajax用法,结合实例形式较为详细的分析总结了jQuery中ajax的相关使用技巧,包括ajax请求.载入.处理.传递等,需要的朋友可以参考下 本文实例讲述了j ...

  4. 理解与应用css中的display属性

    理解与应用css中的display属性 display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none block inline inline-block inherit 下面, ...

  5. HTML&plus;CSS笔记 CSS笔记集合

    HTML+CSS笔记 表格,超链接,图片,表单 涉及内容:表格,超链接,图片,表单 HTML+CSS笔记 CSS入门 涉及内容:简介,优势,语法说明,代码注释,CSS样式位置,不同样式优先级,选择器, ...

  6. CSS中的display属性(none&comma;block&comma;inline&comma;inline-block&comma;inherit)

    css中的display属性(none,block,inline,inline-block,inherit) display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none bl ...

  7. css before after基本用法【转】

    <HTML><HEAD> <meta http-equiv="content-Type"content="text/html;charset ...

  8. 细说CSS中的display属性

    相信大部分奋战在前端的,尤其在前端攻城的过程中,有一种越陷越深的感觉,不错,一如前端深似海,从此妹子是浮云啊,前端上手容易,深入难啊!下面我就CSS中的display属性讲下我自己所积累的,与大家共享 ...

  9. CSS中的display属性

    CSS中的display属性 display:block是可以把非块级元素强制转换为块级元素显示,如内嵌元素span,原来不支持设置宽高,宽度是由内容撑开的,几个span元素是在同一行内的,如果给sp ...

随机推荐

  1. spring开发的总结

    1,当出现无法创建bean,( Error creating bean with name 'fileUploadService': Injection of resource dependencie ...

  2. 多个git账号的配置

    问题描述: 作为开发人员,普遍有多个git账号,例如,公司邮箱对应的公司仓储账号和私人邮箱对应的github账号.在一台电脑上使用两个账号基于ssh协议拉代码,如果不进行额外设置,往往只有一个账号可以 ...

  3. Oracle常用命令13(数据库的启动、关闭)

    数据库的启动.关闭 数据库的启动:安装启动.非安装启动.共享启动.独占启动.约束启动.强制启动 --不登陆的方式进入 Sqlplus /nolog 安装启动: Startup {pfile=<f ...

  4. svn 树冲突

    情况类似如下:(其中 removed_directory 是你工作的某个目录)  代码如下 复制代码 $svn statusD     C removed_directory>   local ...

  5. redis简单配置

    由于前段时间使用Kestrel,同时要操作Memcached及时更新缓存,又要操作database,持久化数据. 貌似Redis既可以当Cache又可以当Queue!于是,今天开始研究Redis! 一 ...

  6. HDOJ 1253 胜利大逃亡(bfs)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1253 思路分析:因为问题需要寻找到达终点的最短的距离(最短的步数),即在状态转换图上需要找出层次最浅的 ...

  7. IO基础内容&lpar;File&rpar;

    JavaIO基础内容 IO技术概述 Output 把内存中的数据存储到持久化设备上这个动作称为输出(写)Output操作 Input 把持久设备上的数据读取到内存中的这个动作称为输入(读)Input操 ...

  8. 开源框架Volley的使用《二》&lbrack;NetWorkImageView&amp&semi;&amp&semi;LruCache&amp&semi;ImageLoader&rsqb;

    转载本专栏每一篇博客请注明转载出处地址,尊重原创.此博客转载链接地址:小杨的博客    http://blog.csdn.net/qq_32059827/article/details/5278849 ...

  9. 关于APP测试的一点思考

    1  系统入口部分要细化测试用例颗粒度  充分准备好测试数据   真实覆盖线上场景 比如注册验证码的获取  国内 国外手机  一般国外手机发送短信 打电话都要加上区号 2 新版本发布   有新功能上线 ...

  10. OO课程第三次总结QWQ

    调研,然后总结介绍规格化设计的大致发展历史和为什么得到了人们的重视 emmm为这个问题翻遍百度谷歌知乎也没有得到答案,那我就把自己认为最重要的两点简要说明一下吧,欢迎大家补充~ 1.便于完成代码的重用 ...