网页设计中最常用的标签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. Guid和Int还有Double、Date的ToString方法的常见格式

    Guid的常见格式: 1.Guid.NewGuid().ToString("N") 结果为:       38bddf48f43c48588e0d78761eaa1ce6 2.Gu ...

  2. 基于jQuery很牛X的批量上传插件

    上传功能应该是每个网站必备的工具之一,因此出现了出现了很多各式各样的上传插件! 本文基于个人经验和使用从插件的:交互体验,易用性,文档,美观度出发,为大家推荐三款很NX的批量上传插件! 下面三款插件的 ...

  3. Rust: move和borrow

    感觉Rust官方的学习文档里关于ownship,borrow和lifetime介绍的太简略了,无法真正理解这些语法设计的原因以及如何使用(特别是lifetime).所以找了一些相关的blog来看,总结 ...

  4. IE6 png 透明－－四种解决方法

    FF和IE7已经直接支持透明的png图了,下面这个主要是解决IE6下透明PNG图片有灰底的 方法一:定义一个样式,给某个div应用这个样式后,div的透明png背景图片自动透明了.(注意两处图片的路径 ...

  5. HDU4945 2048(dp)

    先是看错题意..然后知道题意之后写了发dp..无限TLE..实在是不知道怎么优化了,跑了遍数据是对的,就当作理论AC掉好了.. #pragma warning(disable:4996) #inclu ...

  6. HDU 2048 神、上帝以及老天爷(递归，错排，dp，概率)

    中文题,错排,求概率,不解释,核心思路同 HDU 1465 错排简单思路可看:http://www.cnblogs.com/laiba2004/p/3235934.html //错排,但是我之前叫了几 ...

  7. call by reference and copy/restore

    转自:http://stackoverflow.com/questions/8848402/whats-the-difference-between-call-by-reference-and-cop ...

  8. 深入浅出ES6（十五）：子类 Subclassing

    作者 Jason Orendorff  github主页  https://github.com/jorendorff 在之前的文章<深入浅出ES6(十三):类 Class>中,我们一起深 ...

  9. poj 3537 Crosses and Crosses 博弈论

    思路:每次画X之后都会形成2个子游戏,即i-3和n-i-2. 代码如下: #include<iostream> #include<cstdio> #include<cma ...

  10. 机器学习之神经网络模型-下（Neural Networks: Representation）

    3. Model Representation I 1 神经网络是在模仿大脑中的神经元或者神经网络时发明的.因此,要解释如何表示模型假设,我们不妨先来看单个神经元在大脑中是什么样的. 我们的大脑中充满 ...