网页设计中最常用的标签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. mydate97时间控件最大值最小值限制及Javascript日期判断大小

    <script language="javascript" type="text/javascript" src="<%=basePath ...

  2. nginx js、css多个请求合并为一个请求(concat模块)

    模块介绍 mod_concat模块由淘宝开发,目前已经包含在tengine中,并且淘宝已经在使用这个nginx模块.不过塔暂时没有包含在nginx中.这个模块类似于apache中的modconcat. ...

  3. HTTP协议中的5类状态码

    ①   客户方错误      100   继续      101   交换协议     ②   成功      200    OK      201    已创建      202   接收      ...

  4. JDK中常见的package

    SUN公司在JDK中为程序开发者提供了各种实用类,这些类按功能不同分别被放入了不同的包中,供开发者使用,下面简要介绍其中最常用的几个包:1. java.lang — 包含一些Java语言的核心类,如S ...

  5. POJ 1811 Prime Test （Pollard rho 大整数分解）

    题意:给出一个N,若N为素数,输出Prime.若为合数,输出最小的素因子.思路:Pollard rho大整数分解,模板题 #include <iostream> #include < ...

  6. LoaderManager使用详解（三）---实现Loaders

    这篇文字将介绍Loader<D>类,并且介绍自定义Loader的实现.这是本系列的第三篇文章.   一:Loaders之前世界 二:了解LoaderManager 三:实现Loaders ...

  7. lightoj 1397 - Sudoku Solver

    思路:每次找出可能情况最少的位置枚举可能情况!!! poj2676和这题一样不过poj数据比较水,很容易过. 代码如下: #include<iostream> #include<cs ...

  8. HDU 4169 树形DP

    Wealthy Family Problem Description While studying the history of royal families, you want to know ho ...

  9. 用android模拟器Genymotion定位元素

    1.下载并安装android模拟器Genymotion 2.拖apk包到模拟器,双击模拟器中的apk软件包,进入应用程序 3.下载并安装android sdk 3.1 点击...\Android\an ...

  10. 李洪强iOS开发之添加手势

    李洪强iOS开发之添加手势 02 - 添加手势