码迷,mamicode.com
首页 > 其他好文 > 详细

2015.08.30(2)

时间:2015-08-31 23:34:16      阅读:184      评论:0      收藏:0      [点我收藏+]

标签:

在CSS中,行内元素和块级元素,这个很重要,因为有的属性只能用于块元素,而有的正好相反,在一定的情况下,它们也可以相互转换,比如用display来进行设置。

1.行内元素:

  ①不占据一整行,随内容而定,有以下特点:

  ②不可以设置宽高,也不可以设置行高,其宽度随着内容增加,高度随字体大小而改变。

  ③内联元素可以设置外边界,但是外边界不对上下起作用,只能对左右起作用。

  ④也可以设置内边界,但是内边界在ie6中不对上下起作用,只能对左右起作用。

 常见的行内元素有:

  a - 锚点,b - 粗体(不推荐),br - 换行,em - 强调,font - 字体设定(不推荐),i - 斜体,img - 图片,input - 输入框,label - 表格标签,select - 项目选择,small - 小字体文本,span - 常用内联容器,定义文本内区块,strike - 中划线,strong - 粗体强调

2.块级元素:

  ①总是在新行上开始,占据一整行;

  ②高度,行高以及外边距和内边距都可控制;

  ③宽带始终是与浏览器宽度一样,与内容无关;

  ④它可以容纳内联元素和其他块元素。

常见的块级元素有:

  div -最常用的块级元素,dl - 和dt dd搭配使用的块级元素,form - 交互表单,h1 - 大标题,hr - 水平分隔线,ol - 排序表单,p - 段落,ul - 非排序列表

  互相转换:使用display设置可以使得行内元素拥有块级元素的特性,反之也可以。

如:

<p style="display:inline; text-align:center">设置了内联的块元素p,其表现形式和内联元素一样</p>

<span style="display:block; text-align:center">设置了块级元素的span,可以独占一行并且可以设置宽高</span>

display: table-cell ,能把元素当作表格单元来显示,这个非常实用,显示效果也很好,只可惜某些浏览器不够兼容。要注意,和一个合法的<td>元素必须在<table>里一样,

display: table-cell 元素必须作为 display: table 的元素的子元素出现。

2015.08.30(2)

标签:

原文地址:http://www.cnblogs.com/zhaoyongblog/p/4774305.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!