Section 73rd, CSS box model

CSS Box model

Learning Essentials:
1. Element size
2. Element inner margin
3. Element margin
4. Handling Overflow

This chapter focuses on the CSS box model in HTML5, learning how to understand the appearance configuration of elements and the overall layout of the document.

A Element size
The most basic of CSS box model is to set the size of an element. There are three sets of styles to configure the size of an element, and the style sheet is as follows:

Property Value Description CSS version

Width auto, length value, or percent set the element widths 1

Height auto, length value, or percentage set element's Altitude 1

Min-width auto, length value, or percentage set element minimum width 2

Min-height auto, length value, or percentage set element min. Height 2

Max-width auto, length value, or percent set element maximum width 2

Max-height auto, length value, or percent set element maximum height 2

Width,height setting element dimensions, width and height of elements

Value Description

Auto Adaptive

Pixel px Set Element size

Percent set element percent size, relative to the parent element to be balanced

Div {    background-color: #ff1c19;     width: 400px;     height: 200px;} <div>    <p> Hello </p></div>

Min-width,min-height set element minimum width and minimum height

Value Description

Auto Adaptive

Pixel px Set Element size

Percent set element percent size, relative to the parent element to be balanced

Div {    background-color: #ff1c19;     min-width: 400px;     min-height: 200px;     width: 200px;     height: 100px;} <div>    <p> Hello </p></div>

Max-width,max-height set element maximum width and maximum height

Value Description

Auto Adaptive

Pixel px Set Element size

Percent set element percent size, relative to the parent element to be balanced

Div {    background-color: #ff1c19;     max-width: 200px;     max-height: 100px;     width: 400px;     height: 200px;} <div>    <p> Hello </p></div>

Two Element inner margin

The CSS box model allows you to set the padding size of the inner edge of an element, and we become the inner margin. The style sheet is as follows:

Property Value Description CSS version

Padding-top length value or percent set top padding 1

Padding-bottom length value or percent set bottom padding 1

Padding-left length value or percent set left padding 1

Padding-right length value or percentage set right padding 1

         padding        1~ 4 length values or percentages    shorthand properties                           1

Div {    background-color: #ff1c19;     width: 400px;     height: 200px;} div > P {    background-color: #36ff1d;     padding-top: 20px;     padding-bottom: 40px;     padding-left: 60px;} <div>    <p> Hello </p></div>

Internal margin shorthand format, upper right lower left

Div {    background-color: #ff1c19;     width: 400px;     height: 200px;} div > P {    background-color: #36ff1d;     padding: 10px 20px 10px 20px;} <div>    <p> Hello </p></div>

Three Element margin

The CSS box model allows you to set the size of the outer edge padding of an element, and we become the margin. The style sheet is as follows:

Attribute Value Description SS version

Margin-top length value or percent set top padding 1

Margin-bottom length value or percent set bottom padding 1

Margin-left length value or percent set left padding 1

Margin-right length value or percentage set right padding 1

Margin 1 ~ 4 length value or percent shorthand attribute 1

Div{Background-color:#ff1c19;width:400px;Height:200px;}div > P{Background-color:#36ff1d;width:200px;Height:100px;Margin-top:30px;Margin-bottom:30px;Margin-left:30px;}<div> <p> Hello </p></div>

Margin shorthand format, upper right lower left

Div {    background-color: #ff1c19;     width: 400px;     height: 200px;} div > P {    background-color: #36ff1d;     width: 200px;     height: 100px;     margin: 10px 20px 30px 40px;} <div>    <p> Hello </p></div>

Four Handling overflow

An overflow problem occurs when the element is fixed and the content is too large. The overflow is mainly in two directions: right and bottom. We can control it with the overflow series style.

Property Value Description CSS version

Overflow-x overflow value set overflow in horizontal direction 3

Overflow-y overflow value sets the vertical overflow 3

Overflow overflow value shorthand attribute 2

There are four main types of processing values for overflow handling:

Value Description

The Auto browser handles the overflow content itself. If there is overflow content, the scroll bar is displayed, otherwise the scroll bar is not displayed.

Hidden if there is overflow content, cut off directly.

Scroll the scroll bar will appear regardless of whether it overflows. However, different platforms and browsers display different ways.

The visible default value, regardless of whether it overflows, displays the contents.

Div{Background-color:#ff1c19;width:400px;Height:200px;}div > P{Background-color:#36ff1d;width:200px;Height:100px;overflow-y:Hidden;}<div> <p> Introduction: When Liang Yufang decided not to attend the 15 anniversary of the Pullman Hotel, his father, the chairman of the Hotel Liang Ze, and general manager Liang, was eager to be able to formally introduce him at the reception. The unintended succession of the Yu Fang unexpectedly hide in the racecourse and six years of Love horse Sky Gallop Prairie. Yu Qing's sudden appearance of the racecourse so that he did not go, so was pressed back to the hotel ready to debut. But Yu Fang still not to be outdone, still waiting for escape ... Little singer Du Yunle came to the hotel to meet the anniversary of the warm-up concert, to the day micro-duty peer to help, two people in a panic find </p></div>

Section 73rd, CSS box model