Block-level elements: div p H1 H2 H3 h4 form UL
Inline elements: A b br i span input Select
CSS box model: Content, Border, margin,padding
Display properties in CSS (inline elements and block-level elements)
The Display property values we use are:
inlineblockinline-blocknone
Setting display to none will not preserve the space that the element should have shown, but visibility: hidden
it will remain.
What we care about the most is the display:inline、display:block和display:inline-block
difference:
Inline properties
Inline object Inline gives it the property height and width are useless, causing it to widen and become larger.
The reasons are:
Its actual width is: 内部元素的宽+2*(padding+border+margin)
.
inline
object is not exclusive to one row.
Block properties
The Block object block
can be set to a wide height, but its actual width height is: width+2*(padding+border+margin)
.
block
The element occupies a single row.
But what if we need a div with a wide height and don't want it to be exclusive?
Inline-block characteristics
This is the time we need to use inline-block
:
Because the Inline-block has both the block's wide-height characteristics and the inline element characteristics.
Features in-line elements
1、和其他元素都在一行上;2、元素的高度、宽度、行高及顶部和底部边距不可设置;3、元素的宽度就是它包含的文字或图片的宽度,不可改变。
Block-level element features
1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。2、元素的高度、宽度、行高以及顶和底边距都可设置。3、元素宽度在不设置的情况下,是它本身父容器的100%,除非设定一个宽度。
Element classification (I have some questions about this, let's put it up for a while, revise it slowly, and welcome the correction)
Tag elements in HTML are broadly divided into three different types: block elements, inline elements, and inline block elements
The common block elements are:
<div>,<p>,<h1>...<h6>,<ol>,<ul>,<dl>,<table>,<address>,<blockquote>,<form>
Common inline elements are:
<A>,<Span>,<i>,< Em>,<strong>,<label>,<q>,<< Span class= "Hljs-title" >var>,<CITE> <code>,< img>,<INPUT> <select>,< textarea>,<BUTTON>
There are special types of elements: such as Img|input|select|textarea|button|label, they are called replaceable elements (replaced element). They distinguish between the general inline elements (in contrast, the non-replaced element): These elements have intrinsic dimensions (intrinsic dimensions), and they can set the Width/height properties. Their nature is consistent with the elements that set the Display:inline-block.
Margin in the block-level element, his performance can be fully reflected, up and down any of your settings.
Margin can also be used for inline elements, which is allowed by the specification, but Margin-top and margin-bottom have no effect on the height of the inline element (to the row), and because the boundary effect (margin effect) is transparent, he has no visual impact.
Display properties in CSS
Display Properties
First, the attributes are supported by all major browsers display
. Second, we all know the display
type of box that the attribute specifies that the element should generate. Default value:inline
The display
property values we use are:
inline
block
inline-block
none
display
set to none
not preserve the space that the element should display, but visibility: hidden
it will remain.
So, display
: display
What's the difference between inline,:block and display
:inline-block ?
<Style>. inline{DisplayInlineWidth100px;Height100px;Padding5px;Background-color:#F00;}. Block{DisplayBlockWidth100px;Height100px;Padding5px;Background-color:#0f0;}. inline-block{DisplayInline-block;Width100px;Height100px;Padding5px;Background-color:#00f;}</style><body><span class="inline" >inline</span >inline<span class="block" >block</span> block<span class="Inline-block" >inline-block</span>inline-block</body>
Click on result to view demo:
http://jsfiddle.net/qjgcjLm8/
Inline properties
We find that inline objects inline
give it properties height
and width
are useless, causing it to widen and grow larger.
Reason is
内部元素的宽高`+padding`。观察inline对象的前后元素我们会发现`inline`不单独占一行,其它元素会紧跟其后。
Block properties
而块对象`block`是可以设置宽高的,但是它的实际宽高是本身宽高`+padding`。观察`block`的前后元素我们会发现`block`要单独占一行。
But what if we need a div with a wide height and don't want it to be exclusive?
Inline-block characteristics
This time we need to use inline-block
, and then look at the above demo, we will find:
inline-block既具有block的宽高特性又具有inline的同行元素特性。
That is, when we want to have an element that does not have a single row and can set its width and Height properties, we can choose inline-block
.
However, the width and height of the Ie6/7 padding
inline
is not affected by it.
As a result, we can associate inline and block-level elements .
Features in-line elements
Block-level element features
1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。(真霸道,一个块级元素独占一行)2、元素的高度、宽度、行高以及顶和底边距都可设置。3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。
In HTML, it <span>、<a>、<label>、<input>、 、 <strong> 和<em>
is the typical inline element.
Block-level elements can be set to a wide height, but the actual width of its height is itself wide and high +padding. The block element has a separate row. Inline elements are not exclusive to a single line, and it is useless to set a wide height for him.
In HTML, it <div>、 <p>、 is a block-level element. display:block
the setting is to display the element as a block-level element. The code below is to convert the inline element A into a block element, using the a element from the page with a block element feature.
a{display:block;}
So, display
what about the other property values?
list-item
This element is displayed as a list.
run-in
This element is displayed as a block-level element or inline element, depending on the context.
compact
There is a value compact in CSS, but it has been removed from CSS2.1 due to a lack of broad support.
marker
The CSS has a value of marker, but it has been removed from the CSS2.1 due to a lack of broad support.
table
This element is displayed as a block-level table (like table) with a newline character before and after the table.
inline-table
This element is displayed as an inline table (like table) with no line breaks before or after the table.
table-row-group
This element is displayed as a grouping of one or more rows (similar to tbody)
table-header-group
This element is displayed as a grouping of one or more rows (similar to thead)
table-footer-group:
This element is displayed as a grouping of one or more rows (similar to tfoot)
table-row
This element is displayed as a table row (similar to TR).
table-column-group
This element is displayed as a grouping of one or more columns (similar to Colgroup).
table-column
This element is displayed as a cell column (similar to col)
table-cell
This element is displayed as a table cell (similar to TD and TH)
table-caption
This element is displayed as a table header (similar to caption)
Inline and block-level elementsWhat are the inline elements? What are the block-level elements? CSS box model? reprint