网页设计中最常用的标签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. javascript实现数据结构：串--堆分配存储表示

    堆分配存储表示 这种存储表示的特点是,仍以一组地址连续的存储单元存放串值字符序列,但它们的存储空间是在程序执行过程中动态分配而得. 结构图: 实现: function HString(){ this. ...

  2. 将HTMLCollection/NodeList/伪数组转换成数组

    这里把符合以下条件的对象称为伪数组(ArrayLike) 1,具有length属性 2,按索引方式存储数据 3,不具有数组的push,pop等方法 如 1,function内的arguments . ...

  3. Javascript里的那些距离们

    1.有滚动条的控件的距离: scrollTop和scrollLeft:分别指有滚动条的容器控件的滚动条的top和left:页面滚动条的通用取法:document.body.scrollTop(FF\C ...

  4. Codeforces Round #336 (Div. 2)C. Chain Reaction DP

    C. Chain Reaction   There are n beacons located at distinct positions on a number line. The i-th bea ...

  5. OnClientClick="return confirm('确定要删除吗？')"

    OnClientClick="return confirm('确定要删除吗?')"   -----------------------前台代码 OnClientClick用于执行客 ...

  6. http://my.oschina.net/u/719192/blog/506062?p={{page}}

    http://my.oschina.net/u/719192/blog/506062?p={{page}}

  7. iOS开发--成员变量与属性

    属性变量 @interface MyClass:NSObject{ MyObjecct *_object; } @property(nonamtic, retain) MyObjecct *objec ...

  8. SWD应用接口

    随着ARM公司对Cortex系列的推出,采样SWD方式调试成了大家的首选.SWD不仅速度可以与JTAG媲美,而且使用的调试线少得多.很多人在采样SWD方式进行调试时,一般都是采用4线: ① VCC   ...

  9. android-exploitme（七）：高级加密

    在上一个议题上我们解释了为什么不能把信息明文保存在设备上,应该加密,那么加密就是安全的吗? 下面来看一下, 编译BasicEncryptionSolution.apk,安装

  10. 273. Integer to English Words

    题目: Convert a non-negative integer to its english words representation. Given input is guaranteed to ...