inline:
Inline elements behave like words in a sentence. They sit next to each other in the inline direction. Elements such as <span> and <strong>. If there is not enough space in the containing block for all of the boxes a box can break onto a new line.
can't set an explicit width and height on inline elements. Any block level margin and padding will be ignored by the surrounding elements.
block:
Block elements don't sit alongside each other. They create a new line for themselves. Unless changed by other CSS code, a block element will expand to the size of the inline dimension, therefore spanning the full width in a horizontal writing mode.
The margin on all sides of a block element will be respected.
inline-block:
Using inline-block gives you a box that has some of the characteristics of a block-level element, but still flows inline with the text.
can apply height and width values, respect block margin and padding
Every browser applies a user agent stylesheet to HTML documents. The CSS used varies between each browser, but they provide sensible defaults to make content easier to read. They define how elements should look and behave if there's no CSS defined. It is in the user agent styles where a box's default display is set, too. For example, if we are in a normal flow, a <div> element's default display value is block, a <li> has a default display value of list-item, and a <span> has a default display value of inline.
An inline element has block margin, but other elements won't respect it. Use inline-block, and those elements will respect the block margin, while the element maintains most of the same behaviors it had as an inline element. A block item will, by default, fill the available inline space, whereas a inline and inline-block elements will only be as large as their content.
Alongside an understanding of how user agent styles affect each box, you also need to understand box-sizing, which tells our box how to calculate its box size. By default, all elements have the following user agent style: box-sizing: content-box;.
Having content-box as the value of box-sizing means that when you set dimensions, such as a width and height, they will be applied to the content box. If you then set padding and border, these values will be added to the content box's size.
.my-box {
width: 200px;
border: 10px solid;
padding: 20px;
}
This alternative box model tells CSS to apply the width to the border box instead of the content box. This means that our border and padding get pushed in, and as a result, when you set .my-box to be 200px wide: it actually renders at 200px wide.
.my-box{
box-sizing: border-box;
width:200px;
border:10px solid;
padding:20px;
}
This CSS rule selects every element in the document and every ::before and ::after pseudo element and applies box-sizing: border-box. This means that every element will now have this alternative box model.
*,
*::before,
*::after
{
box-sizing: border-box;
}
https://andy-bell.co.uk/a-modern-css-reset/
网友评论