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;

}

效果图:

时间: 2024-12-12 06:48:07

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

【CSS笔记】display:inline-block的使用

在将块级元素水平排列时除了有float:left的方式.另外一种比较好用的方法就是 display:inline-block; 使用后产生一个后果就是元素之间会有间隙. 导致原因:编写代码时的回车,换行. 去除办法:1.将所涉及到的html写在同一行(显然这样是很不靠谱的)    2.给ul 所在的 div 设置:font-size:0; 给ul li 单独设置font-size;

HTML&CSS基础学习笔记13—无序列表

无序列表 有时我们的工作繁忙,杂事很多,怕忘记,就会把事情一件件列出来,防止忘记. 它们的排列顺序对于我们来说并不重要,可以随意调换,我们将它称为无序列表,HTML里用<ul>标签来表示无序列表,列表里的项目则用<li>标签来表示: 1 2 3 4 5 <ul>     <li></li>     <li></li>     ... </ul> 看一段实例代码: 对于的浏览器显示结果是这样的: 更多内容学习,请

Ext.Net学习笔记13:Ext.Net GridPanel Sorter用法

Ext.Net学习笔记13:Ext.Net GridPanel Sorter用法 这篇笔记将介绍如何使用Ext.Net GridPanel 中使用Sorter. 默认情况下,Ext.Net GridPanel中的列都具有排序功能,效果如下: 如果要禁用列排序,需要在列模型中添加一个属性Sortable="false" 客户端排序 排序是对Store的操作.如果我们要在一个Store中加入排序,可以使用下面的配置: <Sorters> <ext:DataSorter P

css笔记-display属性

css笔记-display属性 display属性可取值 display:none | inline | block | list-item | inline-block | table | inline-table | table-caption | table-cell | table-row | table-row-group | table-column | table-column-group | table-footer-group | table-header-group | co

CSS学习笔记(9)--详解CSS中:nth-child的用法

详解CSS中:nth-child的用法 前端的哥们想必都接触过css中一个神奇的玩意,可以轻松选取你想要的标签并给与修改添加样式,是不是很给力,它就是":nth-child". 下面我将用几个典型的实例来给大家讲解:nth-child的实际用途: Tips:还用低版本的IE浏览器的哥们请绕过! :nth-child(2)选取第几个标签,"2可以是你想要的数字" .demo01 li:nth-child(2){background:#090} :nth-child(n

css before after基本用法【转】

<HTML><HEAD> <meta http-equiv="content-Type"content="text/html;charset=utf-8"> <TITLE>css before after基本用法</TITLE> <style> p::before{ content: "H" } p::after{ content: "d" } a { p

css笔记(二)——几种常用的模式

文本垂直居中 对于行内元素,height会自动收缩到包裹住文本的高度,所以不存在这个问题.但是对于block和inline-block等盒子元素,如果设置了height属性,则文本默认会在上方显示.如果希望文本在垂直方向上居中,可以设置line-height属性等于height属性,或者大于height属性 <div> hello world </div> div { height: 200px; line-height: 200px; } 文本水平居中,图标分列左右两侧 效果是左

理解CSS Clip属性及用法

应用Clip属性实现的一个简单效果图: 样式写法: .my-element { position: absolute; clip: rect(10px  350px  170px  0); /* IE4 to IE7 */ clip: rect(10px, 350px, 170px, 0); /* IE8+ & other browsers */ } 属性解析: clip: { shape | auto | inherit } ; auto 即浏览器默认解析,无clip效果,inderit 继承

css里的BFC用法

css里的BFC用法 BFC(Block Formatting Contexts),可以把BFC理解为一个封闭的大箱子,容器里面的子元素不会影响到外面的元素. 规则 1.内部的盒子会在垂直方向,一个个地放置. 2.BFC是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素 3.属于同一个BFC的两个相邻BOx的上下margin会发生重叠 4.计算BFC的高度时,浮动元素也参与计算 5.每个元素的左边,与包含的盒子的左边相接触,即使存在浮动也是如此: 6.BFC的区域不会与float