Table of contents
Foreword:
Today we will learn the types of elements in CSS, and understand the related properties of web page element types, which will help us to typesetting web pages. Let's take a look together below.
element type
Common element types are: block-level elements, inline elements, and inline-block elements
1. Block-level elements
Block-level elements occupy a single line, not side by side with other elements;
You can set the width, height and top and bottom margins;
When the width is not set, the default width is 100%;
Can accommodate other block elements and inline elements (element nesting);
Common block-level elements : div h1~h6 p ul ol li dl dt dd , and table form that will be learned later .
Here I take the div tag as an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.div1{
height: 100px;
background-color: red;
}
.div2{
height: 100px;
background-color: aquamarine;
}
</style>
</head>
<body>
<div class="div1">
</div>
<div class="div2">
</div>
</body>
</html> The effect is as follows:
I didn't set the width here. At this time, the width occupied by the div tag is 100% of the width of the parent element, which is the entire width of the page at this time. It can be seen that the block element is occupied as a whole block according to the behavior. If no width is specifically set, the result will take up 100% of the entire row width.
2. Inline elements
Do not occupy the position, and can be side by side with other inline elements or text content;
It does not support setting the width and height, the default width and height is 0, and the content expands the width and height;
Can only hold text and other inline elements;
The upper and lower margins cannot be set;
Common inline elements: a span bi strong em del etc.
Below I will take the span tag as an example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span{
height: 50px;
width: 50px;
color: red;
padding: 2px;
background-color: aqua;
}
</style>
</head>
<body>
<div style="height: 50px;background-color: blueviolet;">
</div>
<span>
darling in the franx
</span>
<br>
<!--换行标签-->
<span>
亲爱的弗兰克斯
</span>
<div style="height: 50px;background-color:violet;">
</div>
</body>
</html>The effect is as follows:
1686205157109
It can be seen here that the width and height I set for the span tag did not take effect, so inline elements do not support the setting of width and height. At the same time, in-line elements can adjust the spacing of elements through the value of padding. Then there will be a problem here. If it is not set properly, it will cover other elements, so think about it before using it.
3. Inline-block elements
Features:
Elements can
displaybe type-converted via the attribute:
display:none; /* element is not displayed */
display:block; /* elements are displayed in block-level form */
display:inline; /* elements are displayed inline*/
display:inline-block; /* elements are arranged inline and displayed in block level*/
Features of inline-block (inline block element):
The width and height of block-level elements are 0 by default after conversion, and can be arranged horizontally
Inline elements support width, height and top and bottom margins after conversion
Spaces and newlines before inline block elements and inline elements or text will be parsed into a space character (solved by setting the font size of the parent, or directly deleting the gap content in the code)
The auto attribute of margin is not supported
margin: auto only takes effect on elements with fluid properties.
Fluid properties: An element can adapt to the size of its containing block. For example, for common block-level elements, the default is to occupy the entire horizontal width of the containing block. Additionally, absolutely positioned elements will also have fluid properties if they are set to the same value in opposite directions.
inline-block: There is no fluidity, because the element will be changed to shrink, shrinking to the minimum width that he can shrink.
IE6 7 does not support
In addition, elements such as img input belong to inline elements, but have the characteristics of inlin-block.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span{
height: 50px;
width: 50px;
color: red;
padding: 2px;
background-color: aqua;
}
</style>
</head>
<body>
<div style="height: 100px;background-color: blueviolet;"></div>
<span>
darling in the franx
</span>
<!-- 换行标签 -->
<br>
<span>
亲爱的弗兰克斯
</span>
<div style="display: inline-block;background-color:red;height: 50px;margin: 40px;">002</div>
</body>
</html> Effect:
Here I set the value of margin. Although it is an element in the same row, it will have an air wall with the previous row. This is one of the characteristics of inline block elements.
That's all for today, and there will be related processing methods later, let's look at it.
Share a wallpaper: