关于CSS的内联和块元素

html-css013

关于CSS的内联和块元素,第1张

内联元素可以理解为不能直接设置宽度和高度元素，比如span，你为他设置宽度和高度没有效果，除非你把它设置成块级元素。

如下面的代码把display:block属性值去掉的话，宽度和高度都不会起作用了。

<span style="width:100pxheight:100pxdisplay:blockbackground-color:blue"></span>

margin可以控制内联和块级元素的间距，而不光是内联元素。

主要注意他们之间的转换问题，如块级元素加float属性会变为内联元素。

不同DTD下，盒子模型不同。

还要清楚那些默认是块级，那些默认是内联。

内联CSS也可称为行内CSS或者行级CSS，它直接在标签内部引入，显著的优点是十分的便捷、高效；但是同时也造成了不能够重用样式的缺点，如果代码行数到达一定长度不建议采用。通常内联CSS作为测试使用，可以查找代码中bug。

<body>

<div style="width: 65pxheight: 20pxborder: 1px solid">测试元素</div>

</body>

内联元素叫法有多种，如：内联元素、内嵌元素、行内元素、直进式元素等。

内联元素的显示，可以形象的称为“文本模式”，即一个挨着一个，都在同一行按从左至右的顺序显示，不单独占一行。而当加入了css控制以后，块元素和内联元素的这种属性差异就不成为差异了。

特点：

和其他元素都在一行上

高度、行高和顶以及底边距都不可改变

宽度就是它的文字或图片的宽度，不可改变

总的来说，内联元素一般都是基于语义级(semantic)的基本元素，它只能容纳文本或者其他内联元素，通常被包括在块元素中使用，常见内联元素有“a、b、br”等。

用法：

通常用于特殊布局，在同一行显示多个内容，可以使用内联元素实现，这样不需要将块级元素设置为浮动或绝对定位就可以在一行横排排版。