html 中 block、inline-block 都有哪些?都有什么样的特性?
2011-11-07 11:52
417 查看
Those 2 words, ‘block’ and ‘inline’ are explicit enough by themselves..
block: an element which forms a separate block
inline: an element which stays inline with the rest of the content
A block element has the following characteristics:
Forms a block and positions itself vertically underneath with a new empty line above and under(新起一行)
Takes all the available width based on the measure of its parent element (container)(根据父节点,确定可以使用的宽度)
Its height changes in rapport to its content(高度随内容自适应)
Can contains other inline and/or block elements (es: a <p> inside a <div>)(可以包含块元素和行内元素)
Via css, we can impost a fixed width and/or height(可以有宽度和高度信息)
Example of natural html block element: <div>, <h1>…<h6>, <p>, <ul>, <ol>, <dl>, <table>, <blockquote>, <form>
An inline element has the following characteristics:
Positions itself horizontally inline with the rest of the content of its parent element (container)在父节点剩余的位置定位自身的位置
Takes the minimum width and height in rapport to its content(width和height属性是最小符合内容的大小)
Can contains ONLY other inline elements (es: an <img/> inside a <a>)(只能包含inline-block元素)
Via css, we can NOT impost fixed measure (通过css,不能指定fixed measure)
Example of natural html inline elements: <span>, <a>, <strong>, <em>, <img />, <abbr>, <acronym>
Using the css display:block; and display:inline;,
we can change the property of the element from block to inline or from inline to block.
More information about the css property display in
this article.
补充:从另外一篇文章中转来的:
The W3C’s CSS2 spec defines block level elements as elements of the source document
that are formatted visually as blocks.
In other words, block level elements are normally displayed as blocks with line breaks before and afterwards.
Examples of block level elements
The W3C’s CSS2 spec defines inline elements as elements of the source document that
do not form new blocks of content; the content is distributed in lines.
So, inline content is displayed with no line breaks before or afterwards.
Examples of inline elements
If you try to add dimension to an inline element, some properties will be applied, some properties will be partially applied and others will not be applied at all. The most noticable
properties are width, height, margin and padding.
The W3C’s CSS2 spec states that for Inline, non-replaced elements, the ‘width’ property does
not apply.
In the example below, a width of 200px has been applied to the inline
As you can see, it has no affect on the surrounding content:
The W3C’s CSS2 spec states that for Inline, non-replaced elements, the ‘height’ property
doesn’t apply, but the height of the box is given by the ‘line-height’ property.
In the example below, a height of 50px has been applied to the inline
As you can see, it has no affect on the surrounding content:
While padding can be applied to all sides of an inline element, only left and right padding will have an effect on surrounding content.
In the example below, 50px of padding has been applied to all sides of the
As you can see, it has an affect on the content on each side, but not on content above or below:
Margins operate in the same way as padding on inline elements. In the example below, 50px of margin has been applied to all sides of the
While the left and right edges are effected, the content above and below are not:
It is possible to change the display property of an inline element to “block”. This will give it a block level appearance without changing it’s actual structure.
For example, the
below has been set to “display: block”. As soon as this occurs, properties like width, height, margin and padding are applied is if it were a block level element.
You can also change block level elements so that they display inline. If an
is set to “display: inline”, width, height, padding and margin will immediately operate as they do for any other inline element.
This is what caused the
to ignore top and bottom padding in our original example.
转自:http://www.maxdesign.com.au/articles/inline/
block: an element which forms a separate block
inline: an element which stays inline with the rest of the content
Block element
A block element has the following characteristics:Forms a block and positions itself vertically underneath with a new empty line above and under(新起一行)
Takes all the available width based on the measure of its parent element (container)(根据父节点,确定可以使用的宽度)
Its height changes in rapport to its content(高度随内容自适应)
Can contains other inline and/or block elements (es: a <p> inside a <div>)(可以包含块元素和行内元素)
Via css, we can impost a fixed width and/or height(可以有宽度和高度信息)
Example of natural html block element: <div>, <h1>…<h6>, <p>, <ul>, <ol>, <dl>, <table>, <blockquote>, <form>
Inline elements
An inline element has the following characteristics:Positions itself horizontally inline with the rest of the content of its parent element (container)在父节点剩余的位置定位自身的位置
Takes the minimum width and height in rapport to its content(width和height属性是最小符合内容的大小)
Can contains ONLY other inline elements (es: an <img/> inside a <a>)(只能包含inline-block元素)
Via css, we can NOT impost fixed measure (通过css,不能指定fixed measure)
Example of natural html inline elements: <span>, <a>, <strong>, <em>, <img />, <abbr>, <acronym>
Using the css display:block; and display:inline;,
we can change the property of the element from block to inline or from inline to block.
More information about the css property display in
this article.
补充:从另外一篇文章中转来的:
Block level elements
The W3C’s CSS2 spec defines block level elements as elements of the source documentthat are formatted visually as blocks.
In other words, block level elements are normally displayed as blocks with line breaks before and afterwards.
Element | Description |
---|---|
<address> | information on author |
<blockquote> | long quotation |
<button> | push button |
<caption> | table caption |
<dd> | definition description |
<del> | deleted text |
<div> | generic language/style container |
<dl> | definition list |
<dt> | definition term |
<fieldset> | form control group |
<form> | interactive form |
<h1> | heading |
<h2> | heading |
<h3> | heading |
<h4> | heading |
<h5> | heading |
<h6> | heading |
<hr> | horizontal rule |
<iframe> | inline subwindow |
<ins> | inserted text |
<legend> | fieldset legend |
<li> | list item |
<map> | client-side image map |
<noframes> | alternate content container for non frame-based rendering |
<noscript> | alternate content container for non script-based rendering |
<object> | generic embedded object |
<ol> | ordered list |
<p> | paragraph |
<pre> | preformatted text |
<table> | table |
<tbody> | table body |
<td> | table data cell |
<tfoot> | table footer |
<th> | table header cell |
<thead> | table header |
<tr> | table row |
<ul> | unordered list |
Inline elements
The W3C’s CSS2 spec defines inline elements as elements of the source document thatdo not form new blocks of content; the content is distributed in lines.
So, inline content is displayed with no line breaks before or afterwards.
Element | Description |
---|---|
<a> | anchor |
<abbr> | abbreviated form |
<acronym> | acronym |
<b> | bold text style |
<bdo> | I18N BiDi over-ride |
<big> | large text style |
<br> | forced line break |
<button> | push button |
<cite> | citation |
<code> | computer code fragment |
<del> | deleted text |
<dfn> | instance definition |
<em> | emphasis |
<i> | italic text style |
<iframe> | inline subwindow |
<img> | Embedded image |
<input> | form control |
<ins> | inserted text |
<kbd> | text to be entered by the user |
<label> | form field label text |
<map> | client-side image map |
<object> | generic embedded object |
<q> | short inline quotation |
<samp> | sample program output, scripts, etc. |
<select> | option selector |
<small> | small text style |
<span> | generic language/style container |
<strong> | strong emphasis |
<sub> | subscript |
<sup> | superscript |
<textarea> | multi-line text field |
<tt> | teletype or monospaced text style |
<var> | instance of a variable or program argument |
Dimension – a key difference between block and inline elements
If you try to add dimension to an inline element, some properties will be applied, some properties will be partially applied and others will not be applied at all. The most noticableproperties are width, height, margin and padding.
Inline elements and width
The W3C’s CSS2 spec states that for Inline, non-replaced elements, the ‘width’ property doesnot apply.
In the example below, a width of 200px has been applied to the inline
<a>element.
As you can see, it has no affect on the surrounding content:
Inline elements and height
The W3C’s CSS2 spec states that for Inline, non-replaced elements, the ‘height’ propertydoesn’t apply, but the height of the box is given by the ‘line-height’ property.
In the example below, a height of 50px has been applied to the inline
<a>element.
As you can see, it has no affect on the surrounding content:
Inline elements and padding
While padding can be applied to all sides of an inline element, only left and right padding will have an effect on surrounding content.In the example below, 50px of padding has been applied to all sides of the
<a>element.
As you can see, it has an affect on the content on each side, but not on content above or below:
Inline elements and margins
Margins operate in the same way as padding on inline elements. In the example below, 50px of margin has been applied to all sides of the <a>element.
While the left and right edges are effected, the content above and below are not:
Changing an element’s “display” property from inline to block
It is possible to change the display property of an inline element to “block”. This will give it a block level appearance without changing it’s actual structure.For example, the
<a>element
below has been set to “display: block”. As soon as this occurs, properties like width, height, margin and padding are applied is if it were a block level element.
Changing an element’s “display” property from block level to inline
You can also change block level elements so that they display inline. If an <li>element
is set to “display: inline”, width, height, padding and margin will immediately operate as they do for any other inline element.
This is what caused the
<li>element
to ignore top and bottom padding in our original example.
转自:http://www.maxdesign.com.au/articles/inline/
相关文章推荐
- -_-#【布局】block 与 inline 都有哪些元素
- HTML标签换行导多个inline-block元素不能在同一行,img之间会有空格
- html中的块元素(Block)和内联元素(Inline)
- html——inline、block与block-inline区别
- HTML-块级元素与行内元素(block-level & inline element)
- [HTML]display:inline、block、inline-block的区别
- html 内联元素inline 块元素block
- 如何去掉HTML中li用inline-block造成的空格
- 5种方法快速去掉HTML中Inline-Block的空白
- 【html+css】block和inline的区别
- 5种方法去掉HTML中Inline-Block元素之间的空白
- html之使用inline-block,div错位处理
- html的块级block、内联inline、内联块级inline-block元素基础
- HTML中的块元素(block)、内联元素(inline)的差别
- Html中display为inline-block的元素有内容和没有内容情况下高度不一致问题的讨论
- html标签的block、inline分类明细
- float、定位、inline-block、兼容性需注意的特性总结
- html标签的block、inline分类明细
- html中的块元素(Block)和内联元素(Inline)(转)
- HTML中的块元素(block)、内联元素(inline)的总结