CSS box model

The box model

Page layout to learn the three core, box model, float and positioning, learning a good box model can be very good to help us layout the page

Look into the nature of web layout

Page layout process: 1. Prepare the relevant page elements first, the page elements are basically box 2. The essence of web layout is to use CSS to arrange boxes

Box model composition

Box model: View the layout elements of an HTML page as a rectangular box, that is, a container for content. The CSS box model is essentially a box that encapsulates the surrounding HTML elements, including: borders, margins, margins, and actual content

Border (border)

Border sets the border of the element. The border has three parts: border width (thickness) Border style border color

Grammar:

border:border-width || border-style || border-color
Copy the code

attribute	role
border-width	Define the border thickness in px
border-style	Border style
border-color	Border color

Border shorthand

border: 1pxsolid red; There is no orderCopy the code

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div {
            width: 300px;
            height: 200px;
            /* The width of the border is usually px*/
            /*border-width: 5px; * /
            The bounding bounding bounding dotted line indicates that the dotted line is increased
          /* border-style: solid; border-color: green; * /
            border:5px solid green;
            /* Layering just layers the top border */
            border-bottom: 4px dashed red;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>
Copy the code

The thin border around the table

The border-collapse property controls how the browser returns the border of the table. It controls the borders of adjacent cells. Grammar:

border-collapse: collapse;
Copy the code

Collapse c.
bborder-collapse: collapse; Indicates that adjacent borders are merged together

The borders affect the actual size of the box

The border will increase the actual size of the box, so we have two solutions: 1. Measuring the size of the box. 2. If the measurement includes borders, subtract width/height from border width

padding

The padding property sets the padding, which is the distance between the border and the content.

attribute	role
padding-left	The left padding
padding-right	Right padding
padding-top	The padding
padding-bottom	The padding

Short for inside margin

The padding property can be one to four values to the right

The number of values	Express meaning
padding: 5px;	1 value, representing a 5 pixel inner margin up, down, left, and right
padding: 5px 10px;	Two values, which means the top and bottom margins are 5 pixels and the left and right margins are 10 pixels
padding: 5px 10px 20px;	Three values, representing a top inner margin of 5 pixels or so and a bottom inner margin of 10 pixels and a bottom inner margin of 20 pixels
padding: 5px 10px 20px 30px;	Four values, top 5 pixels, right 10 pixels, bottom 20 pixels, left 30 pixels clockwise

The above four situations will be encountered in our actual development.

Padding affects the actual box size

After we specify the padding value for the box, two things happen:

1. There is a distance between the content and the border, and an inner margin is added
2. Padding affects the actual size of the box

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
       div {
       		width: 300px;
       		height: 700px;
       		/* Width =300+20+50=370px height=700+10+30=740px*/
       		padding: 10px 20px 30px 50px;
       }
    </style>
</head>
<body>
    <div>On April 19, 2007, the revision of the entry page improved the line height and line width of the entry page, and added chinese-English dictionary explanation at the bottom of the entry page, and improved the historical version page; May encyclopedia editing entry integral adjustment; In June, the classification retrieval was upgraded, the page-turning function was added to the historical version, and the standard of the high-quality version of encyclopedia was introduced. In September, the advanced editor was launched, and the encyclopedia task was revised. In November, Baike launched related entries, which can be searched in Baidu Knowili. Baidu Encyclopedia history home page photo album photo source</div>
</body>
</html>
Copy the code

Solution:

To make sure the box is the same size as the image, subtract the extra padding from width/height.

Padding does not extend the width of the box

If the box itself does not specify width/height, the padding will not expand the box

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>The padding doesn't affect the size of the box</title>
    <style>   
       h1 {
           /* width: 100%; * /
           height: 200px;
           background-color: pink;
           padding: 30px;
       }
       div {
           width: 300px;
           height: 100px;
           background-color: purple;
       }
       div p {
           padding: 30px;
           background-color: skyblue;
       }
    </style>
</head>
<body>
   <h1></h1>
   <div>
       <p></p>
   </div>
</body>
</html>
Copy the code

From the outside

The margin property sets the margin, which controls the distance between boxes

attribute	role
margin-left	The left margin
margin-right	Right from the outside
margin-top	On from the outside
margin-bottom	The distance outside

Margin means exactly the same thing as padding

Margin typical application

Margins can center a block-level box horizontally, but only if two conditions are met:

1. Box must have specified width
2. Set the left and right margins of the box to Auto

.header {
    width:960px;
    marin:0 auto;
}
Copy the code

Here are three common ways to write:

.nav {
    margin-left:auto;
    margin-right:auto;
}
.nav {
    margin:auto;
}
/* * */
.nav {
    margin:0 auto;
}
Copy the code

Note: The above method centers the block-level element horizontally, and the inline element or inline block element horizontally centers its parent element with text-align:center

Margin merge

Margin consolidation can occur when using margin to define the vertical margins of block elements

Collapse of the vertical margin of a nested block element

For two nested (parent-child) block elements, the parent element has an upper margin and the child element has an upper margin, so the parent element collapses the larger margin value.Solution:

1. You can define an upper border for the parent element

3. There are other ways to add overflow:hidden to the parent element. For example, floating, fixed, and absolutely positioned boxes do not collapse.

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
    	.father {
    		width: 450px;
    		height: 400px;
    		background-color: green;
    		margin-top: 20px;
    		/*border: 1px solid transparent; * /
    		/*padding-top: 10px; * /
    		overflow: hidden;
    	}

    	.son {
    		margin-top: 10px;
    		width: 250px;
    		height: 200px;
    		background-color: pink;
    	}
    </style>
</head>
<body>
    
    <div class="father">
    	<div class="son"></div>
    </div>
</body>
</html>
Copy the code

Clear the inner and outer margins

Many web elements have default internal and external margins, which vary from browser to browser. So before we layout, we should first clear the inside and outside margins of the page elements

* {
    padding:0;/* Clear the inner margin */
    margin:0;/* Clears margins */
}
Copy the code

Note: in order to take care of compatibility, try to set only left and right inner and outer margins, not upper and lower inner and outer margins. But converting to block-level and inline block elements will do