Details about inline (inline) elements
When the display of an element is set to inline, then the element is an inline element, or an inline element. The size of inline elements cannot be changed by setting width and height, but although img is an inline element, its size can be changed by width and height. This is very strange.
At the same time, the vertical margin of inline elements has no effect, but the horizontal margin has effect, but the horizontal margin:0 auto has no effect. After reading this article will give you the answer.
display basic attribute definition
First look at the definition:
//block 块元素
//inline 内联元素
//inline-block 内联块元素
//none 不显示
display has many values, these four are very basic values. If you don't understand it very well during actual use, sometimes you will be very confused why this is used here.
And don't mix it with float, because it's two different things.
The default value of display
The default value of display is not fixed. Block elements are all block by default. Conversely, because the value of display is block, it is called a block element. Inline elements are inline by default. Conversely, because the value of display is inline, it is called an inline element or an inline element.
The characteristics and usage suggestions of various attribute values of display
First of all, the most commonly used and best used is inline-block. Because in the page, we often need to make the parent element adapt to the size of the child element. Inline-block is like this by default. Although inline can also be adaptive, the width and height of inline cannot be changed. When you need to center horizontally, give priority to blocks, and centering blocks horizontally is very convenient. none can achieve the hidden effect.
The following details the characteristics and usage in actual development
inline inline element
span, a, and img are all very commonly used inline elements. In the style sheet of the browser, the attribute display is not visible. This attribute can be seen in the box model. You can see that the default value of display for span, a, and img is inline, which is in line with our guess. .
1. The sizes of inline adaptive sub-elements are arranged from left to right.
The size of the content is the size of the inline element, in the document flow, so it is arranged from left to right, there is nothing to say.
2. Inline elements cannot directly change the width and height
We set the width and height for span, a, and img respectively. The actual width and height of span and a have not changed, and you can check it with the mouse. But the actual width and height of img has changed. This is not because of the inline problem, but img is a special element called a replaceable element, and the display effect of the replaceable element is not controlled by css.
<iframe>
<video>
<embed>
<img>
Some elements are only treated as replaceable elements under certain circumstances, for example:
<option>
<audio>
<canvas>
<object>
<applet>
Specific reference: https://developer.mozilla.org/zh-CN/docs/Web/CSS/Replaced_element
span{
width: 200px;
height: 200px;
}
a{
width: 200px;
height: 200px;
}
img{
width: 200px;
height: 200px;
}
3. There is no vertical margin, padding and border, only horizontal margin, padding and border. The auto margin is invalid.
There is no vertical margin required by the CSS specification. One of the main reasons is that for the convenience of layout management, block elements occupy a single line and can be arranged vertically. The corresponding inline element must be in one line. If there is a vertical margin, it is likely to exceed the current line, and it is not an inline element.
Refer to the official document: block and inline layout in regular flow
. Although horizontal margin is effective, the auto function of margin is ineffective. The root cause is that the width and height cannot be changed. Because the width and height cannot be changed, the calculation formula of the box model that auto relies on becomes invalid, which leads to the invalidation of auto.
There is no vertical padding and border, both of which are stipulated by the specification.
Under normal circumstances, we will not control the inline elements separately, but put them in the div for unified management.
Summarize:
//inline 内联元素
//行内元素就是指display默认是inline的元素，比如a,span。
1.inline自适应子元素大小 从左往右排列
2.inline元素不可以直接改变宽高
3.没有垂直margin,padding和border,只要水平margin,padding和border。margin的auto是无效的
项目实际使用情况：
一般情况下是不用inline的，因为在实际项目中几乎是没有什么元素会需要不改变大小，一般都是将inline改为block，这样可以实现文字水平居中等效果
block block element
block is much simpler than inline, and we are more familiar with it. div is a typical block element.
//block 块元素
块元素最大的特点就是独占一行，这也是最大的缺点，一般就最外层会用block独占一行。
1.block独占一行 从上到下排序
2.block元素可以直接改变宽高
3.margin有效 可以通过margin: 0px auto实现快速水平居中
4.padding有效
实际使用情况：
用的也比较多。
inline-block inline block element
//inline-block 内联块元素
inline-block最大特点实际上就是可以自适应子元素大小，并且宽高是可以改变的。
1.并不是独占一行 从左到右排序
2.可以改变直接宽高
3.margin有效 可以通过margin: 0px auto实现快速水平居中
4.padding有效
实际开发使用情况：
非常的有用，可以用来实现自适应子元素大小的布局。
none
//none
可以实现隐藏的效果。
实际开发情况：
比较常用。