current position:Home>CSS - (4) box model

CSS - (4) box model

2021-08-25 11:33:46 I I eat vermicelli

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 :

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 :widthheight 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 .




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

imagestyle="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 :

copyright notice
author[I I eat vermicelli],Please bring the original link to reprint, thank you.

Random recommended