网页设计中最常用的标签p、div、h1-h6（默认为块级元素）,span(默认为内联元素)

　　内联，内嵌，行内属性标签：
　　　　1、默认同行可以继续跟同类型标签；
　　　　2、内容撑开宽度
　　　　3、不支持宽高
　　　　4、不支持上下的margin和padding
　　　　5、代码换行被解析

　　块属性标签：
　　　　1、默认独占一行显示；
　　　　2、没有宽度时，默认撑满一排
　　　　3、支持所有css命令

1、把元素显示为内联元素和把元素显示为块级元素

<style type="text/css">

    div{ display:inline; background:red;}/*区块元素将转换为内联元素*/

    span{ display:block; background:green;}/*将内联元素转换为区块元素*/

</style>

</head>

<body>

    <div>我是div块级元素</div>

    <span>我是span内联元素</span>

</body>

2、设置元素不可见和设置元素为inline-block()

<style type="text/css">

    div{ display:none; background:red;}/*将元素设置为不可见*/

    span{ display:inline-block; background:green;}/*还是内联元素 跟inline没什么区别,只有一点区别就是会自动加上一些边距,可以设置宽高*/

    h1{ display:inline-block; background:blue;}

</style>

</head>

<body>

    <div>我是div块级元素</div>

    <span>我是span内联元素</span>

    <h1>fasdfsadf</h1>

</body>

inline-block特性：
　　1、块在一行显示；
　　2、行内属性标签支持宽高；
　　3、没有宽度的时候内容撑开宽度

问题：
　　1、代码换行被解析，也就是每个块之间有空隙，这个空隙大小随着字体的大小而改变；
　　2、ie6 ie7 不支持块属性标签的inline-block;

<style>

body,p,h1,h2,h3,h4,h5,h6,dl,dd{margin:0; font-size:12px;/* font-family:XX; */}

ol,ul{list-style:none;padding:0;margin:0;}

a{text-decoration:none;}

img{border:none;}

/* 默认样式重置 (css reset)  */

span,div{background:blue; width:100px; height:100px; display:inline-block;}

</style>

</head>

<body>

<span>区分样式</span>

<span>区分样式</span>

<span>区分样式</span>

<div>块</div>

<div>块</div>

<div>块</div>

</body>

<style>

body,p,h1,h2,h3,h4,h5,h6,dl,dd{margin:0; font-size:12px;/* font-family:XX; */}

ol,ul{list-style:none;padding:0;margin:0;}

a{text-decoration:none;}

img{border:none;}

/* 默认样式重置 (css reset)  */

.pages{ height:60px; background:#e8e8e8; width:600px; margin:90px auto; text-align:center;}

.pages a{ background:#fff; border:1px solid #cdcdcd;color:#333333; padding:0 8px 0 9px; height:28px; line-height:28px; display:inline-block;}

.pages a:hover{border-color:red;color:red;}

.pages .active{ font-weight:bold; background:#fcf9ea;cursor:text;}

.pages .active:hover{border-color:#cdcdcd;color:#333333;}

</style>

</head>

<body>

<div class="pages">

    <a href="#">上一页</a>

      <a href="#">1</a>

      <a href="#">2</a>

      <a href="#" class="active">3</a>

      <a href="#">4</a>

      <a href="#">15</a>

      <a href="#">211</a>

      <a href="#">255…</a>

      <a href="#">下一页</a>

</div>

CSS的display属性的更多相关文章

  1. !!!css如何让img图片居中？css的display属性实现图片居中（代码实例）

    在我们开发前端页面的时候,为了让页面效果美观,会让图片呈现居中效果.那么css怎么让img图片居中显示呢?本篇文章给大家带来css如何让img图片居中?css的display属性实现图片居中(代码实例 ...

  2. Code笔记之：CSS+HTML display 属性

    display属性值:none 此元素不会被显示. block 此元素将显示为块级元素,此元素前后会带有换行符. inline 默认.此元素会被显示为内联元素,元素前后没有换行符. inline-bl ...

  3. (十二)学习CSS之display属性

    参考:http://www.w3school.com.cn/cssref/pr_class_display.asp 浏览器支持 所有主流浏览器都支持 display 属性. 注释:如果规定了 !DOC ...

  4. jquery控制css的display属性(显示与隐藏)

    jquery控制div的显示与隐藏,很方便的. 例如: $("#id").show()表示display:block, $("#id").hide()表示dis ...

  5. css 浅析display属性

    继续开始我的css之旅吧.今天我们来说什么啊.构思了两天还是没有什么思路,但是学习的步伐我们不能停止下来.还是按照之前的计划来讲讲display,在讲这个之前我们还是按照老规矩来扯扯蛋,步子不能够迈大 ...

  6. css的display属性小实验

    div与span是常用的盒子模型; 区别: div默认是垂直分布(独占一行)   span默认是水平分布(一行可以有多个) 通过float属性可以改变div容器的分布方式达到span容器的效果; 下面 ...

  7. CSS的Display属性可能的值

    none 此元素不会被显示. block 此元素将显示为块级元素,此元素前后会带有换行符. inline 默认.此元素会被显示为内联元素,元素前后没有换行符. inline-block 行内块元素.( ...

  8. CSS的display属性，显示或隐藏元素

    <html> <head> <script type="text/javascript"> function removeElement() { ...

  9. CSS 基础 例子 display属性：block、inline和inline-block的区别

    HTML中块级元素(block)和行级元素(inline):比如div就是常见的块级元素,span就是常见的行级元素. 可以通过css的display属性来设置一个元素到底是块级,还是行级元素:dis ...

随机推荐

  1. PE文件结构详解

    (注:最左边是文件头的偏移量.) IMAGE_DOS_HEADER STRUCT { +0h WORD e_magic // Magic DOS signature MZ(4Dh 5Ah) DOS可执 ...

  2. Asp.net页面无刷新请求实现

    Asp.net页面无刷新请求实现 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind=&qu ...

  3. 驱动笔记 - Makefile

    ifneq ($(KERNELRELEASE),) obj-m := hello.ohello-objs := main.o add.o else KDIR := /lib/modules/2.6.1 ...

  4. vs2010把项目资源打包成系统资源

      把wav格式的音频做成系统资源,根据条件播放相应的音频  System.Media.SoundPlayer spOne = new System.Media.SoundPlayer();      ...

  5. SEO优化的黑帽手法是否值得使用?

    PR劫持 可能很多人也会听到说,什么网站权重越高越好,这也就是后面越来越多人都对谷歌的PR的宣传看的很重,自建站的都追求PR值,权重越高代表这个网站越受信任. 比如一个新站PR值为0,一个老站PR为6 ...

  6. ASP.NET 应用程序安全

    原文:http://msdn.microsoft.com/zh-cn/magazine/hh708755.aspx 一.跨站点脚本 简介 XSS 攻击是指将脚本恶意注入用户的浏览会话,这通常在用户不知 ...

  7. c# string.Format用法总结

    文章出处:http://www.cnblogs.com/7788/archive/2009/05/13/1455920.html 先举几个简单的应用案例: 1.格式化货币(跟系统的环境有关,中文系统默 ...

  8. 关于com组件注册的问题

    问题是这样的: 在调用摄像头的时候,用到com组件,我已经在工程中添加了com组件,但是运行的时候却报这样的错误. 解决方案:程序生成中,目标平台为Any CPU ,应该改为x86 具体原因不知道……

  9. listview优化 汇总

    1,listview加载性能优化ViewHolder 转自: http://blog.csdn.net/jacman/article/details/7087995 在android开发中Listvi ...

  10. mysql之游标

    游标 行,也不存在每次一行地处理所有行的简单方法(相对于成批地处理它们).有时,需要在检索出来的行中前进或后退一行或多行.这就是使用游标的原因.游标( cursor)是一个存储在MySQL服务器上的数 ...