Home > Developer > Web Develop
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
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) .inlineobject 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) .blockThe 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 PropertiesFirst, 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:
inlineblockinline-blocknonedisplayset 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/
We find that inline objects inline give it properties height and width are useless, causing it to widen and grow larger.
Reason is
Block properties内部元素的宽高`+padding`。观察inline对象的前后元素我们会发现`inline`不单独占一行，其它元素会紧跟其后。
而块对象`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 characteristicsThis 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 elementsBlock-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:blockthe 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-itemThis element is displayed as a list.
run-inThis element is displayed as a block-level element or inline element, depending on the context.
compactThere is a value compact in CSS, but it has been removed from CSS2.1 due to a lack of broad support.
markerThe CSS has a value of marker, but it has been removed from the CSS2.1 due to a lack of broad support.
tableThis element is displayed as a block-level table (like table) with a newline character before and after the table.
inline-tableThis element is displayed as an inline table (like table) with no line breaks before or after the table.
table-row-groupThis element is displayed as a grouping of one or more rows (similar to tbody)
table-header-groupThis 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-rowThis element is displayed as a table row (similar to TR).
table-column-groupThis element is displayed as a grouping of one or more columns (similar to Colgroup).
table-columnThis element is displayed as a cell column (similar to col)
table-cellThis element is displayed as a table cell (similar to TD and TH)
table-captionThis 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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
