六合开奖结果现场直播欢迎诸位!收藏本站注 册登 陆
常用三肖中特马:基础知识网络知识操作系统WPS网页制作数据库算法网页成功之路网络安全最新技术古典mid流行midmid背景下载中心
您现在的位置:首页 > 三肖中特马 > 文章页

css block inline的功能及使用

Admin | 2011-9-17 11:51:30 | ReadNums | 6820 | 标签 网页制作 | 打印本页
     

  css里面的block和inline属性,是display标签的属性,用来控制网页内容的显示方式的。

  下面,我们先看display的语法。

  一、display语法

  display : block | none | inline | compact | marker | inline-table | list-item | run-in | table | table-caption | table-cell | table-column | table-column-group | table-footer-group | table-header-group | table-row | table-row-group

  属性取值:

  block  :  CSS1  块对象的默认值。将对象强制作为块对象呈递,为对象之后添加新行
  none  :  CSS1  隐藏对象。与 visibility 属性的hidden值不同,其不为被隐藏的对象保留其物理空间
  inline  :  CSS1  内联对象的默认值。将对象强制作为内联对象呈递,从对象中删除行
  inline-block  :  IE5.5  将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内。
  compact  :  CSS2  未支持。分配对象为块对象或基于内容之上的内联对象
  marker  :  CSS2  未支持。指定内容在容器对象之前或之后。要使用此参数,对象必须和 :after 及 :before 伪元素一起使用
  inline-table  :  CSS2  未支持。将表格显示为无前后换行的内联对象或内联容器
  list-item  :  CSS2  将块对象指定为列表项目。并可以添加可选项目标志
  run-in  :  CSS2  未支持。分配对象为块对象或基于内容之上的内联对象

  二、block inline知识扩展

  网页标签是分成区块和内联块2种。一个标签显示一行的称为 区块,如(段落P,标题H系列,DIV等)
,若标签能在一行显示N个,表明此标签为 内联块,如(<a>,<img>,<input>)

  区块和内联块最大的区别就是,区块可以设置宽、高、居中对齐等操作,而内联块不行
也就是说,当你需要将一张图片居中,或者要设置区域大小,或单独一行显示,就用到你说的这个样式

  反之,你若想把区块变为内联块,则将display:none就可以了。

  下面看如上的代码。

  <a id="link" href="#">链接</a>

  如上的链接,如果使用如下的CSS

  #link{display:block;width:100px;height:100px;background:red}

  此时你会看到一个宽度100和高度100的红色点击区域,如果你不加display:block(默认display:inline),那么你不会看到一个高度100和宽度100的点击区域.

  下面看block的效果

  Display:block是我们常用的,block也是Display默认的值。

  解释:该对象随后的内容自动换行。

  css display block实例
  CSS代码:
  .divcss5{display:block}

  Html对应运用代码:
  <span class="divcss5">我的后面文字会换行</span>我是被前面的divcss5对应CSS属性换行。
  <span>不会被换行,因为我没有被设置display:block</span>

  最后看inline的效果

  Css代码
  ul.divcss5 li{display:inline}
  解释:ul.divcss5对应li css样式属性为display:inline

  Html对应代码:
  <ul>
  <li>我父级ul没有divcss5样式</li>
  <li>独立的行</li>
  <li>独立的行</li>
  </ul>

  <ul class="divcss5">
  <li>我父级ul有divcss5样式</li>
  <li>我站成一排</li>
  <li>我在divcss5下li站成一排</li>
  </ul>


问题未解决:在线咨询

网友评论

(访客)
内容实用原创,讲得很好。
20xx年x月x日
(站长)
有问题请在线咨询。
20xx年x月x日