网页设计中最常用的标签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. 如何使用CSL（翻译总结自TI官方文档）

    为了使用CSL来进行编译和连接,必须先配置CCS开发环境. 1.指定目标设备 Project/options/complier/preprocessor,在define symbols中输入设备支持符 ...

  2. 强力重置ASP.NET membership加密后的密码！[转]

    公司网站的用户管理采用的是ASP.NET内置的membership管理,在web.config文件中的密码格式配置是加密了的,passwordFormat="Hashed",这样在 ...

  3. Apache CXF实现Web Service（4）——Tomcat容器和Spring实现JAX-RS(RESTful) web service

    准备 我们仍然使用 Apache CXF实现Web Service(2)——不借助重量级Web容器和Spring实现一个纯的JAX-RS(RESTful) web service 中的代码作为基础,并 ...

  4. React Native 简介：用 JavaScript 搭建 iOS 应用(2)

    [编者按]本篇文章的作者是 Joyce Echessa--渥合数位服务创办人,毕业于台湾大学,近年来专注于协助客户进行 App 软体以及网站开发.本篇文章中,作者介绍通过 React Native 框 ...

  5. 深入浅出ES6（九）：学习Babel和Broccoli，马上就用ES6

    作者 Jason Orendorff  github主页  https://github.com/jorendorff 现在,我们将向你分步展示如何做到的这一切.上面提及的工具被称为转译器,你可以将它 ...

  6. 单选项框RadioGroup的综合应用

    大家好,我们今天这一节要介绍的是RadioGroup 的组事件.RadioGroup 可将各自不同的RadioButton ,设限于同一个Radio 按钮组,同一个RadioGroup 组里的按钮,只 ...

  7. poj 3537 Crosses and Crosses 博弈论

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

  8. BZOJ 1296: [SCOI2009]粉刷匠 分组DP

    1296: [SCOI2009]粉刷匠 Description windy有 N 条木板需要被粉刷. 每条木板被分为 M 个格子. 每个格子要被刷成红色或蓝色. windy每次粉刷,只能选择一条木板上 ...

  9. pku 1703(种类并查集)

    题目链接:http://poj.org/problem?id=1703 思路;个人觉得本质上还是和带权并查集一样的,只不过多了一个MOD操作,然后就是向量关系图稍微改动一下就变成种类并查集了,对于本题 ...

  10. js对象小结

    前奏 对象是js的基本数据类型,准确来说除了字符串,数字,boolean值,null与undifine之外,js中的值都是对象.js中的对象是一种复合值,他将很多值(原始值或其他对象)聚合在一起,可以 ...