This is the second day of my participation in the August More text Challenge. For details, see: August More Text Challenge

Thank you for meeting me. Hi, I’m Ken

๐ŸŒŠ๐ŸŒˆ

Part of the content and pictures of this article are from the Internet. If you have any questions, please contact me (there is an official account on the home page).

This blog is suitable for those who are new to HTML and those who want to review after a long time

From tomorrow on, I will be a happy man

Feed the horses, chop wood, travel the world

From tomorrow on, I will care about grain and vegetables

I have a house, facing the sea, spring flowers

From tomorrow on, I will write to every one of my relatives

Tell them of my happiness, the lightning of happiness that told me

“Facing the Sea, Spring blossoms” Haizi

๐ŸŒŠ๐ŸŒˆ About:

๐ŸŒด๐ŸŒต๐ŸŒณ5.1 Overview of the box model

๐Ÿฆž๐Ÿ™๐Ÿฆ€5.1.1 Understand the box model

The box model treats the elements of an HTML page as rectangular boxes, which are containers for content. Each rectangle consists of the element’s content, inner margins, borders, and outer borders.

<! doctypehtml> 
<html>
<head>
<meta charset="utf-8">
<title>Knowledge box model</title>
<style type="text/css">

.box {
width: 200px;           /* Width of the box model */ 
height: 50px;           /* Height of the box model */ 
border: 15px solid red; /* Box model border */ 
background: #CCC;       /* Background color of the box model */ 
padding: 30P ั…;/* Inside margin of box model */ 
margin: 20px;           /* Box model margin */ 
}

</style> 
</head> 
<body> 

<p class="box">The contents of the box</p>

</body> 
</html>
Copy the code


When you add a background color or image to an element, the element’s background color or image will also appear in the inner margin. The margin is the distance between the element and its neighboring elements. If you define a border attribute for an element, the border will appear between the inner margin and the margin.

๐Ÿฆž ๐Ÿ™ ๐Ÿฆ€ 5.1.2<div>tag

Div is the abbreviation of English division, meaning “division, area”.

The

tag is simply a block container tag that divides a web page into separate, distinct parts for planning and layout.

and

are equivalent to a “box”, which can set margins, margins, width and height, and can contain various page elements such as paragraphs, headings, tables, images, etc. That is to say, most HTML tags can be nested in

tags,

can also be nested with multiple

.

Case study:

 <! doctypehtml>
 <html> 
 <head> 
 <meta charset="utf-8"/> 
 <title>Div tag</title> 
 <style type="text/css"> 
 
 .one { 
 width: 450px;          /* Set width */ 
 height: 30px;          /* Set height */  
 line-height: 30px;     /* Set row height */ 
 background: #FCC;      /* Set background color */ 
 font-size: 18px;       /* Set font size */ 
 font-weight: bold;     /* Set font to bold */ 
 text-align: center;    /* Set text horizontal center alignment */
 }
 
 .two {
 width: 450px;      /* Set width */
 height: 100px;     /* Set height */
 background: #0F0;  /* Set background color */
 font-size: 14px;   /* Set font size */
 text-indent: 2em;  /* Set the first line of text to indent */
 }
 
 </style>
 </head>
 <body>
 
 <div class="one">The title text set with the div tag</div>
 <div class="two">
 <p>Text in a P tag nested within a DIV tag</p>
 </div>
 
 </body>
 </html>
Copy the code


Note:

  • (1) <div>The most significant aspect of the tag is the and float attributefloatCooperate, realize the layout of the page, this is often saiddiv+cssPage layout. We’ll talk more about that later.
  • (2) <div>Can be substituted for block-level elements such as<h>,<p>Etc., but they have a certain difference in semantics.

    For example,<div>and<h2>The difference between<h2>Has a special meaning, semantic heavy, represents the title, and<div>Is a general block level, mainly for layout.

๐ŸŒด๐ŸŒต๐ŸŒณ5.2 Box model related properties

๐Ÿฆž๐Ÿ™๐Ÿฆ€5.2.1 Border properties

Set the content Style properties Common attribute values
Border style border-styleAbove [right below left]; None None (default),Solid single solid line, dotted line, dotted line, double double solid line
Border width border-widthAbove [right below left]; Pixel values
Border color border-colorAbove [right below left]; RGB (r%,g%,b%), RGB (r%,g%,b%)
Comprehensive setting border Border: width of four sides Style of four sides color;
The rounded edges border-radius: Horizontal radius parameter/vertical radius parameter; Pixel value or percentage
The picture frame border-images: Image path cutting mode/border width/border extension distance repeat mode;

1. ย Border-style

In the CSS properties, the border-style property is used to set the border style. Its basic syntax format:

border-styleAbove [right below left];Copy the code

When setting the border style, you can either set the style for the four sides separately or set the style for all four sides.

There are four common values for the border-style attribute:

โ— Solid: Single solid border.

โ— Improvement: The border is dashed.

โ— Outline: dotted line.

โ— Double: The border is double solid line.

useborder-styleAttribute to set the four-side style, must be in the clockwise order of top right, bottom left, omit the principle of value copy, that is, one value for four sides, two values for up/left/right, three values for up/left/down.

If the upper side is a dashed line and the other three sides are solid, then the (border-style) property can be used to set the style of each side:

p {
border-style: dashed solid solid solid;
}
Copy the code

Example: To demonstrate the border style property,

<! doctypehtml>
<html>
<head>
<meta charset="utf-8">
<title>Set the Border style</title>
<style type="text/css">
/* Create a new HTML page and add the header and paragraph text to the page, then control the border effect of the header and paragraph with the border style property */

h2 {
border-style: double;
} /* Four borders are the same as one pair of solid lines */

.one {
border-style: dotted solid;
} /* The upper and lower are dotted lines, and the left and right are single solid lines */

.two {
border-style: solid dotted dashed;
} /* Upper solid line, left and right dotted line, and lower dotted line */

</style>
</head>
<body>

<h2>Border style a pair of solid lines</h2>
<p class="one">The top and bottom of the border style are dotted lines and the left and right are single solid lines</p>
<p class="two">Border style a single solid line on the top border, dotted line on the left and right, dotted line on the bottom border</P> 

</body>
</html>
Copy the code


Note: Due to compatibility issues, the appearance of the dotted line “citation” and the dashed line “improvement” may vary slightly between browsers.

2. ย Border width (border-width)

The border-width attribute is used to set the border width. Its basic syntax is:

border-widthAbove [right below left];Copy the code

In the syntax above, the border-width attribute is usually valued in pixels (px). It also follows the principle of value replication, and its attribute values can be set from 1 to 4, that is, one value is four sides, two values are up/left/right, three values are up/left/down, and four values are up/right/down/left.

Case study:

<! doctypehtml>
<html>
<head>
<meta charset="utf-8">
<title>Set border width</title>
<style type="text/css">

.one {
border-width: 2px;
}

.two {
border-width: 3px 1px;
}

.three {
border-width: 3px 1px 2px;
}

</style>
</head>
<body>

<p class="one">Border width 2px. Border style single solid line.</p>
<P class="two">The border width is 3px up and down, 1px left and right. Border style single solid line.</p>
<P class="three">The border width is 3px up, 1px left and right, and 2px down. Border style single solid line.</p>

</body>
</html>
Copy the code


When the above code runs, the paragraph text does not display the desired border effect. This is because when you set the border width, you must also set the border style, if the style is not set or set tonone, no matter how much width is set.

In the CSS code above, add a border style to the

tag as follows:

p {
border-style: solid;
} /* Set the overall border style */
Copy the code


3. ย Border color (border-color)

The border-color attribute is used to set the border color. Its basic syntax format is:

border-colorAbove [right below left];Copy the code

In the syntax format above, the value of the border-color attribute can be a predefined color value, hexadecimal #RRGGBB(most commonly used), or the RGB code R,g,b). The value of the border-color attribute can also be set to 1, 2, 3, or 4, following the principle of value replication.

Example: Set the border style of a paragraph to a solid line, gray at the top and red at the left and right,

p {
border-style: solid;       /* Set the overall border style */
border-color: #CCC #FF0000;/* Set the border color: gray on top and red on left and right */
}
Copy the code

It is worth mentioning that in CSS3, the border color attribute has been enhanced, and the use of this attribute can make the gorgeous border effect such as gradient. The CSS derives four border color attributes based on the original border-color attribute.

  • border-top-color
  • border-right-color
  • border-bottom-color
  • border-left-color

Attribute values for the four border properties above can also be predefined color values, hexadecimal #RRGGBB or RGB code RGB (R, g, b).

Case study:

p {
border-style: solid;
border-width: 10px;
border-top-color: #FFA500;
border-right-color: #87CEEB;
border-bottom-color: aliceblue;
border-left-color: #FF0000;
}
Copy the code
<p>Ken o</p>
Copy the code


Note:

The border style must be set when the border property is set. If no style is set or none is set, the other border properties are invalid.

4. ย Comprehensive set border (border)

Although the use of border-style, border-width, border-color can achieve rich border effects, but this method of writing code is cumbersome, and is not easy to read, so CSS provides a simpler border setting method, its basic format:

border: ๅฎฝๅบฆwidth ๆ ทๅผstyle ้ขœ่‰ฒcolor;
Copy the code

In the above Settings, the order of width, style, and color is arbitrary. You can specify only the attributes that you want to set, and the omitted attributes will take the default values (style cannot be omitted).

When each side of the border has a different style, or you just need to define a single side of the border, you can use the combined attributes of a single border: border-top, border-bottom, border-left, or border-right.

Example: Define the top border of a paragraph separately,

p {
border-top: 2px solid #CCC;
} /* Define the upper border, in any order */
Copy the code
<p>Ken o</p>
Copy the code


Example: Make the border of the secondary title not double solid, red, and 3 pixels wide.

h2 {
border: 3px double red;
}
Copy the code
<h2>Ken o</h2>
Copy the code


Attributes such as border, border-top, and so on can be used to define multiple styles of an element, called compound attributes in CSS. Common compound attributes include font, border, margin, padding and background. In practice, compound properties are often used to simplify code and speed up pages.

Case study:

<! doctypehtml>
<html>
<head>
<meta charset="utf-8">
<title>Comprehensive setting border</title>
<style type="text/css">

h2 {
border-top: 3px dashed #F00;  /* One side compound property sets each border */
border-right: 10px double # 900;
border-bottom: 5px double #FF6600;
border-left: 10px solid green;
}

.pingmian{
border: 15px solid #FF6600;
} /* set the border to the same */

</style>
</head>
<body>

<h2>Comprehensive setting border</h2>
<img class="pingmian" src="... Fill out a" alt="Web Graphic Design" /> 

</body>
</html>
Copy the code


In the above code, we first use the border’s one-side compound property to set the secondary heading so that each side box shows a different style, and then use the compound property border to set the same four borders for the image.

5. ย Rounded border (border-RADIUS)

In web page design, it is often necessary to set rounded borders. The rectangle border can be rounded by using the border-RADIUS attribute in CSS3. The basic syntax format is:

Border-radius: parameter 1/ parameter 2;Copy the code

In the syntax above,border-radiusThe value of the property of contains two parameters, which can be either a pixel value or a percentage. Parameter 1 indicates the horizontal radius of the fillet, and parameter 2 indicates the vertical radius of the fillet. The two parameters are separated by slashes (/).

Case study:

<! doctypehtml>
<html>
<head>
<meta charset="utf-8">
<title>The rounded edges</title>
<style type="text/css">

img{
border: 8px solid #6C9024;
border-radius: 100px/50px;Set the horizontal radius to 100 pixels and the vertical radius to 50 pixels */
}

</style>
</head>
<body>

<img class="yuanjiao" 
src="https://img-blog.csdnimg.cn/20201011123716531.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text _aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tlbmtlbl8=,size_16,color_FFFFFF,t_70#pic_center)" 
alt="Rounded border" />

</body>
</html>
Copy the code

In the above code, set the horizontal radius of the rounded corner of the image to 100px and the vertical radius to 50px.

Running result:

Note:

When using the border-RADIUS attribute, if the second parameter is omitted, it will be equal to the first parameter by default.

Replace line 9 of the above code with:

border-radius: 50px; /* Set the fillet radius to 50 pixels */Copy the code

Running result:



The rounded border has the same radian in all four corners. This is because if parameter 2 (vertical radius) is not defined, the system will set it to parameter 1 (horizontal radius).

It is worth mentioning that the border-RADIUS attribute also follows the principle of value replication. Both the horizontal radius (parameter 1) and the vertical radius (parameter 2) can be set with 1 to 4 parameter values to indicate the radius of four rounded corners, the specific explanation is as follows:

โ— When parameter 1 and parameter 2 are set, it indicates the radius of the four corners.

โ— When parameter 1 and parameter 2 are set, the first parameter value represents the upper left and lower right rounded radius, and the second parameter value represents the upper right and lower left rounded radius. The specific example code is as follows:

img {
border-radius: 50px 20px/30px 60px;
}
Copy the code

In the above example code, set the horizontal radius of the top left and bottom right fillets to 50px, the vertical radius to 30px, the horizontal radius of the top right and bottom left fillets to 20px, and the vertical radius to 60px.

Running result:

โ— Parameter 1 and parameter 2 set three parameter values, the first parameter value represents the upper left corner radius, the second parameter value represents the upper right and lower left corner radius, the third parameter value represents the lower right corner radius, the specific example code is as follows:

img {
border-radius: 50px 20px 10px/30px 40px 60px;
}
Copy the code

In the above example code, set the horizontal radius of the top left corner of the image to 50px and the vertical radius to 30px, the horizontal radius of the top right and bottom left corners to 20px and the vertical radius to 40px, and the horizontal radius of the bottom right corners to 10px and the vertical radius to 60px.



โ— When four parameter values are set for parameter 1 and parameter 2, the first parameter value representsRadius of the upper left filletThe second parameter value representsRadius of the upper right fillet, the third parameter value representsLower right fillet radiusAnd the fourth parameter value representsBottom left fillet radius.

img {
border-radius: 50px 30px 20px 10px/50px 30px 20px 10px;
}
Copy the code

In the above example code, set the horizontal and vertical radius of the upper left corner of the image to 50px, the horizontal and vertical radius of the upper right corner to 30px, the horizontal and vertical radius of the lower right corner to 20px, and the horizontal and vertical radius of the lower left corner to 10px.

Running result:

Note: If “parameter 2” is omitted, it will be the default value of “parameter 1”. The horizontal radius of the fillet is the same as the vertical radius.

Example: Set 4 parameter values,

img {
border-radius: 50px 30px 20px 10px/50px 30px 20px 10px;
}
Copy the code

It can be shortened to:

img { 
border-radius: 50px 30px 20px 10px;
}
Copy the code

6. ย Image border (border-image)

In web design, it is sometimes necessary to add an image border to the whole area. This effect can be easily achieved by using the border-image attribute in CSS3. The border-image attribute is a shorthand attribute, Set the attributes of border-image-source, border-image-slice, border-image-width, border-image-outset and border-image-repeat.

Basic syntax format:

border-image: border-image-source border-image-slice/border-image-width/border-image-outset border-image-repeat;
Copy the code

Border-image Attributes:

attribute instructions
border-image-source Specifies the path to the image
border-image-slice Specifies the top, right, bottom, and left inner offsets of the border image
border-image-width Specify border width
border-image-ouset Specifies how far the border background extends out of the box
border-image-repeat Specifies how the background image will be tiled

Case study:

<! doctypehtml>
<head>
<meta charset="utf-8">
<title>The picture frame</title>
<style type="text/css">

div {
width: 300px;
height: 300px;
}

div {
width: 300px;
height: 300px;
border-style: solid;      /* Line 10 */

border-image-source:
url(https://img-blog.csdnimg.cn/20201011174631808.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_ aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tlbmtlbl8=,size_16,color_FFFFFF,t_70#pic_center); 
Border-image-source :url(./1.png); border-image-source:url(./1.png); * /

border-image-slice: 33%; /* Frame image item, right, bottom, left inner offset */
border-width: 200px;  /* Set border width */
border-image-outset: 0;/* Set the amount of border image area beyond the border */   /* Line 14 of code */
border-image-repeat: repeat;/* Set image tiling mode */
}

</style>
</head>
<body>

<div></div>

</body>
</html>
Copy the code
When returning to the upper level directory, use.. /Copy the code

Material:

Running result:





If the size is insufficient, it is automatically filled as specified.

Change line 14 to “stretch fill”.

border-image-repeat: stretch;  /* Set the image filling mode */
Copy the code


Pattern borders can also be integrated: modify lines 10 to 14 above:

border-image: url(images/images.jpg) 33%/200px repeat;
Copy the code

In the above example code, “33%” represents the internal offset of the border and “41px” represents the width of the border, separated by a”/”.

That’s the end of today’s introductory study

Peace

๐ŸŒŠ๐ŸŒˆ

HTML page elements and attributes (Note 2) HTML page elements and Attributes (Note 3) Aken’s HTML, CSS guide for getting Started _CSS3 selector

Hi, I’m Ken

Thank you for reading

If there are flaws in the blog, please leave a message in the comment area or add the public account in the personal introduction to chat with me

Thank you for your kind words