CSS 8.2 高级-对齐补充(关于行内元素,块元素,替换元素和非替换元素及其width height margin padding特性)
2016-11-04 01:28
549 查看
CSS 8.2 高级-对齐补充(关于行内元素,块元素,替换元素和非替换元素及其width height margin padding[b]特性)[/b]
一、各种元素的width height margin padding
特性
1.块级元素 例如:div p
width、 height、margin的四个方向、
padding的四个方向都正常显示,遵循标准的css盒模型。
2.行内替换元素 例如:img
width、 height、margin的四个方向、
padding的四个方向都正常显示,遵循标准的css盒模型。
3.行内非替换元素(重点) 例如span
a b等
注:所谓行内非替换元素,就是所这个元素即使行内元素,又是非替换元素,参见二分类width、 height不起作用,用line-height来控制高度。
padding左右起作用,上下不会影响行高,但是对于有背景色和内边距的行内非替换元素,背景可以向元素上下延伸,但是行高没有改变。因此视觉效果就是与前面的行重叠。(《css权威指南》
P249)
margin左右作用起作用,上下不起作用,原因在于:行内非替换元素的外边距不会改变一个元素的行高(《css权威指南》
P227)。
二、css元素的分类
分类方法1:替换和不可替换元素
从元素本身的特点来讲,可以分为替换和不可替换元素a) 替换元素
(X)HTML中的<img>、<input>、<textarea>、<select>、<object>都是替换元素。
替换元素就是浏览器根据元素的标签和属性,来决定元素的具体显示内容。这些元素往往没有实际的内容,即是一个空元素,浏览器会根据元素的标签类型和属性来显示这些元素。可替换元素也在其显示中生成了框。
例如1:浏览器会根据<img>标签的src属性的值来读取图片信息并显示出来,而如果查看代码,则看不到图片的实际内容;
例如2:根据<input>标签的type属性来决定是显示输入框,还是单选按钮等。
b) 不可替换元素
(X)HTML中的<p> <li> <span> <a> <b> <strong>都是一个不可替换元素。(X)HTML 的大多数元素是不可替换元素,即其内容直接表现给用户端(例如浏览器)。文字“段落的内容”全被显示。
分类方法2:块级元素和行内元素
除了可替换元素和不可替换元素的分类方式外,CSS 2.1中元素还有另外的分类方式:块级元素(block-level)和行内元素(inline-level,也译作“内联”元素)。a) 块级元素
典型的块级元素有:<div>、<p>、<ul>、<li>、<h1>到<h6>,等等。
在视觉上被格式化为块的元素,最明显的特征就是它默认在横向充满其父元素的内容区域,而且在其左右两边没有其他元素,即块级元素默认是独占一行的。
通过CSS设定了浮动(float属性,可向左浮动或向右浮动)以及设定显示(display)属性为“block”或“list-item”的元素也都是块级元素。
但是浮动元素比较特殊,由于浮动,其旁边可能会有其他元素的存在。而“list-item”(列表项<li>),会在其前面生成圆点符号,或者数字序号。
b) 行内元素
典型的行内级元素有:<a>、<span>、<strong>、<img>、<input>等等。
行内元素不形成新内容块,即在其左右可以有其他元素,display属性等于“inline”的元素都是行内元素。几乎所有的可替换元素都是行内元素。
不过元素的类型也不是固定的,通过设定CSS
的display属性,可以使行内元素变为块级元素,也可以让块级元素变为行内元素。
注:
<p>是不可替换元素但不是行内元素,所以可以设置width height<img>是行内元素但不是不可替换元素,所以可以设置width height
<span> <a> <b> <strong>等都是行内不可替换元素,设置width height无效
相关文章推荐
- css 行内元素 块元素 替换元素 非替换元素 以及这些元素的width height margin padding 特性
- css 行内元素 块元素 替换元素 非替换元素 以及这些元素的width height margin padding 特性
- css 行内元素 块元素 替换元素 非替换元素 以及这些元素的width height margin padding 特性
- css中行内元素padding,margin,width,height说明
- css行内元素padding,margin,width,height没有变化
- 各种元素的width height margin padding 特性
- css 父元素设置padding、border、margin的情况下,子元素width100%呈现情况
- CSS布局中的几个重要属性,width,height,margin,padding,float,position
- CSS布局中的几个重要属性,width,height,margin,padding,float,position
- CSS——【元素内边距padding、元素外边距margin、元素边框border-width、元素大小width/height】与【元素显示大小】的关系
- 行内元素能否设置width,height,padding,margin
- CSS盒子,line-height,padding,margin,background,border
- css-内联(行内)元素、块元素、margin、padding
- 【CSS】padding,border,margin与width宽度的关系
- CSS 之 width padding margin border
- 关于IE处理margin和padding值超出父元素高度的问题
- CSS 笔记一(Selectors/ Backgrounds/ Borders/ Margins/ Padding/ Height and Width)
- CSS学习笔记:id与class、padding和margin、min-height和height
- 关于 css padding 的使用 padding会将使用该属性的元素撑开
- 关于网页中行内元素的基线(baseline)、行高(line-height)、垂直对齐(vertical-align)等