CSS - (4) box model

CSS Box model

One 、 Introduction to the box model

stay “CSS Box model ” In theory , All elements in the page can be regarded as a box , And occupy a certain page space .

A page is made up of many such boxes , These boxes interact with each other , Therefore, mastering the box model needs to be understood from two aspects ： One is to understand the internal structure of a single box , The second is to understand the relationship between multiple boxes .

Each element is treated as a box , The box model is made by content（ Content ）、padding（ padding ）、margin（ Margin ） and border（ Frame ） These four attributes make up . Besides , In the box model , And the width width And height height Two auxiliary properties .

Here is a picture of CSS The internal structure of the box model ：

1️⃣ Content area content

The content area is CSS The center of the box model , It presents the main information content of the box , It can be text 、 Pictures and so on . The content area is an essential part of the box model , Other 3 Parts are optional .

The content area has 3 Attributes ：width、height and overflow. Use width and height Property to specify the height and width of the box content area . Pay attention here ,width and height These two properties are for the content area , Does not include padding part .

When there is too much content information , When the content area is exceeded , have access to overflow Overflow attribute to specify the processing method .

2️⃣ padding padding

padding , Refers to the space between the content area and the border , It can be regarded as the background area of the content area .

The properties of the inner margin are 5 Kind of , namely padding-top、padding-bottom、padding-left、padding-right And a combination of the above 4 Concise inner margin attribute for two directions padding. Use this 5 This attribute can specify the distance between borders in all directions of the content area

padding The concise ways of writing are 3 Kind of , They are as follows ：

padding: Pixel values ;

padding: Pixel values 1  Pixel values 2;

padding: Pixel values 1  Pixel values 2  Pixel values 3  Pixel values 4;

for example ：

padding:20px; Indicates that the inner margins in all four directions are 20px;

padding:20px 40px; Express padding-top and padding-bottom by 20px,padding-right and padding-left by 40px.

padding:20px 40px 60px 80px; Express padding-top by 20px,padding-right by 40px,padding-bottom by 60px,padding-left by 80px.( It can be memorized clockwise )

3️⃣ Frame border

stay CSS In the box model , The border is the same as the border we learned before .

Border properties have border-width、border-style、border-color And integrated 3 Quick border property of class property border.

among border-width Specify the width of the border ,border-style Specifies the border type ,border-color Specifies the color of the border .

border-width:1px;

border-style:solid;

border-color:gray;

Equivalent to ：border:1px solid gray;

4️⃣ Margin margin

Margin , It refers to the distance between two boxes , It may be the distance between the child element and the parent element , It could also be the distance between sibling elements .

The outer margin attribute also has 5 Kind of , namely margin-top、margin-bottom、margin-left、margin-right And a combination of the above 4 Concise inner margin attribute for two directions margin.

meanwhile ,CSS Allows you to specify a negative value for the outer margin attribute , When a negative margin value is specified , The entire box will move in the opposite direction of the specified negative value , This can produce the overlapping effect of the box .

And padding similar ,margin There are concise ways to write 3 Kind of , They are as follows ：

margin: Pixel values ;

margin: Pixel values 1  Pixel values 2;

margin: Pixel values 1  Pixel values 2  Pixel values 3  Pixel values 4;

for example ：

margin:20px; Indicates that the outer margin in all four directions is 20px;

margin:20px 40px; Express margin-top and margin-bottom by 20px,margin-right and margin-left by 40px.

margin:20px 40px 60px 80px; Express margin-top by 20px,margin-right by 40px,margin-bottom by 60px,margin-left by 80px.

Two 、 Box model instance

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS Box model </title>
		<style type="text/css">
		#main{
			<!-- Convert block elements to inline-block Elements -->
			display: inline-block;
			border: 1px solid #CCCCCC;
		}
		.item{
			display: inline-block;
			padding: 20px;
			margin: 40px;
			border: 1px solid red;
			background-color: beige;
		}
		span{
            border: 1px solid blue;
            background-color: darkgray;}
		</style>
	</head>
	<body>
		<div id="main">
			<div class="item"><span> Blog Garden </span></div>
		</div>
	</body>
</html>

style="zoom: 67%;"

analysis ： We put class by item Of div Layer as a box , The gray part is “ Content area ”, The light yellow part is “ The inner margin ”, Between the gray border and the red border is “ The outer margin ”.

Reference article ：https://blog.csdn.net/wuyxinu/article/details/103583618