Article directory
1. Display display mode conversion
display display mode , can be divided into
- inline display mode;
- In-block display mode;
- inline-block display mode;
The method of changing the display mode of an element to inline-block display mode:
- Use inline-block to change the display mode, and change the display mode of the element to inline block display mode;
- Using float , you can also change the block elements to a display mode similar to inline blocks . Floating is off-label and does not occupy the position of standard flow elements;
- Both absolute positioning and fixed positioning can achieve the effect of turning the element into an inline block display mode;
Inline box, once floating box can be regarded as an inline block element box, and attributes such as width and height are set for the box;
Floating elements and absolute positioning/fixed positioning elements are all off-label, and neither will trigger the problem of margin collapse. If you set floating/positioning for the box, you don't need to consider the problem of margin collapse;
Two, block element example
div block-level element, width is not set, and the parent container is filled by default;
Code example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>块元素</title>
<style>
.box {
/* div 块级元素, 不设置width, 默认充满父容器 */
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">骐骥一跃，不能十步；驽马十驾，功在不舍。</div>
</body>
</html>
display effect :
3. Example of changing an inline-block element to an inline block element
Convert a block-level element to an inline block element. If the inline block element does not set a width, the default width is the same as the element content width;
Code example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>块元素</title>
<style>
.box {
/* 将 显示模式 由 块级元素 改为 行内块元素 */
display: inline-block;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">骐骥一跃，不能十步；驽马十驾，功在不舍。</div>
</body>
</html>
Display of results :
4. Set floating for block elements
Setting block-level elements as floating elements can also achieve the same effect as inline block elements;
Code example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>块元素</title>
<style>
.box {
/* 为块元素设置浮动 达到 行内块元素效果 */
float: left;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">骐骥一跃，不能十步；驽马十驾，功在不舍。</div>
</body>
</html>
display effect :
5. Set positioning for block elements
Setting block-level elements as absolute positioning elements can also achieve the same effect as inline block elements;
Code example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>块元素</title>
<style>
.box {
/* 为块元素设置绝对定位 达到 行内块元素效果 */
position: absolute;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">骐骥一跃，不能十步；驽马十驾，功在不舍。</div>
</body>
</html>
display effect :
