Front-end CSS elements (32)
CSS elements are HTML elements in a web page, including tags, classes, and IDs. They can be selected via CSS selectors and styled properties can be set to make the web page rendering attractive and readable. Common HTML elements include div, p, h1, h2, span, etc. They can use CSS to set style attributes such as font, color, background, and border to beautify the web page. In addition to HTML standard elements, CSS also supports custom elements. You can use pseudo elements to set styles to achieve more flexible and diverse web design effects.
block element
CSS block elements refer to tags defined as block-level elements in HTML (such as div, p, h1-h6, etc.). They will occupy a separate line on the page by default, and can set width, height, margin, Fill and background properties. These elements will occupy their own line, and their width, height, padding, margins, borders, and other properties can be set. Block-level elements always start on a new line, they can contain inline elements and other block-level elements, and you can control how they are displayed. Their width defaults to 100% of the parent element, so we can use CSS to set the width and height of block-level elements, and we can use margin and padding to adjust the distance between elements and internal space.
Common block elements include:
-
<div>: A general container used to divide page blocks. -
<h1>-<h6>: A text label used to represent the title. -
<p>: A label used to represent paragraph text. -
<ul>and<ol>: tags used to represent unordered lists and ordered lists. -
<li>: Label used to represent list items. -
<table>: Label used to represent the table.
The block element can set the display attribute to inline or inline-block to change its default block-level display.
Here is an example of using the block element:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
body{
margin: 0;
}
div{
background-color: aquamarine;
width: 388px;
}
p{
background-color: deeppink;
/* width: 88px; */
}
</style>
<body>
<div>这是一个块元素的实列</div>
<div>这是一个块元素的实列
<p>这是一个块元素的实列</p>
</div>
<p>biubiubiu</p>
</body>
</html>
The final browser output is as follows:
inline elements
CSS inline elements refer to elements that are arranged in the same line by default in HTML, such as <a>, <span>, <img>, <em>, <strong> and other tags. Inline elements do not occupy a line of their own, but are arranged within the same line based on the size of the content, and can only hold text or other inline elements. Inline elements can be displayed as inline elements using the CSS property display: inline.
Inline elements have the following characteristics:
-
By default, line wrapping is not forced. If a line cannot fit, it will be automatically wrapped.
-
The width and height can only be determined by the content, fixed width and height cannot be set.
-
margin and padding work horizontally but not vertically.
-
You can set the line-height property to control line height.
CSS can be used to change the font, color, background color and other styles of inline elements. Use the display property to convert inline elements to block-level elements, or block-level elements to inline elements.
Common CSS inline elements are:
-
<a>:Hyperlink -
<span>: small paragraph of text -
<img>:image -
<em>: emphasize text -
<strong>: Text with emphasis -
<input>: form element -
<label>: form tag -
<button>:Button element
Here is an example of using inline elements:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div{
width: 500px;
height: 300px;
background-color: tomato;
}
a{
width: 666px;
color:whitesmoke;
margin-top: 88px;
font-size: 50px;
}
</style>
<body>
<div>
<a href="">这是一个a标签</a>
<a href="">这是二个a标签</a>
</div>
</body>
</html>
The final browser output is as follows:
inline block element
CSS inline block elements refer to block-level elements that appear inline in an HTML document. These elements can be seen as a mixture of inline elements and block-level elements. They are similar to block-level elements, but do not produce line breaks by default. Instead, they merge the occupied space together, so they can be regarded as one A collection of group inline elements.
Common CSS inline block elements include:
-
<img>:display image -
<input>:Input box -
<button>: button -
<select>:Drop-down menu -
<textarea>:Text input box -
<label>:Label -
<iframe>: iframe -
<audio>:audio player -
<video>:Video player -
<canvas>:canvas element
For CSS inline block elements, you can set their width, height, margins, padding and other properties through CSS styles. Additionally, they can be positioned using the CSS float property.
Here is an example of using inline block elements:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.con,.con2{
width: 500px;
height: 300px;
background-color: tomato;
border: 5px solid maroon;
}
.con a{
background-color: blanchedalmond;
height: 180px;
width: 170px;
margin-top: 30px;
padding: 30px 20px;
display: inline-block;
}
</style>
<body>
<div class="con">
<a href="">这是一个a标签</a>
<a href="">这是一个a标签</a>
<a href="">这是一个a标签</a>
<a href="">这是一个a标签</a>
<a href="">这是一个a标签</a>
<a href="">这是一个a标签</a>
<a href="">这是一个a标签</a>
</div>
<div>
</div class="con2">
</body>
</html>
The final browser output is as follows:
