preface

In fact, CSS consists of three big modules: box model, float, positioning, and the rest are details. These three parts, in any case also want to learn very proficient.

The box model is to view the elements of an HTML page as a rectangular box, that is, a container for content.

Each rectangle consists of the element’s content, padding, border, and margin.

The box model

The nature of web layout

  • First use CSS to set the size of the box, and then place the box.
  • Finally put the page elements such as text images and so on into the box.

1. Box Model

  • The box model treats the layout elements of an HTML page as a rectangular box, that is, a container for content.
  • The box model consists ofElement content, border, padding, and marginComposition.
  • Elements such as text and images inside the box are content areas
  • The boxThe thickness of theWhat we call a boxA border
  • The distance between the box contents and the border is the inside margin
  • The distance between boxes is the outer margin

All document elements (labels) generate a rectangular box, called an Element box, which describes how much space a document element occupies in the page layout summary. Therefore, in addition to having its own size and position, each box also influences the size and position of other boxes.

W3c standard box model

The scope of the standard W3C box model includes margin, border, padding, and Content

When set to box-sizing: content-box; , the standard mode is adopted for parsing and calculation, which is also the default mode.

Inner box size calculation (actual size of elements)Copy the code
  • Width: Element Height = content Height + padding + border
  • Height: Element Width = content Width + padding + border
  • The actual size of the box: width and height of the content + inside margin + border

Note:

1. The width and height attributes only apply to block-level elements, not inline elements (except img tags and input).

2. When calculating the total height of the box model, the combination of the vertical margins of the upper and lower boxes should also be considered.

3. If a box has no given width/height or inherits its parent’s width/height, the padding does not affect the box size.

The content part of the IE box model contains border and pading

When box-sizing: border-box, weird mode parsing is used;

2. Box border

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

Border style:

  • None: No borders means that the width of all borders is ignored (default)
  • Solid: Borders are single solid lines (most commonly used)
  • The bounding frame is a dashed line
  • Dotted: The border is dotted line
Comprehensive border settingborder : border-width || border-style || border-color 

border: 1pxsolid red; There is no order requirementCopy the code

Summary table of box frame writing:

In many cases, we do not need to specify 4 borders, we can specify 4 borders separately.

On the border Under the frame The left margin Right margin
Border – top – style: the style; Border – bottom – style: the style; Border – left – style: the style; Border – right – style: the style;
Border – top – width: the width; Border-bottom-width: border-width; Border – left – width: the width; Border – right – width: the width;
Border – top – color: color; B: Border-bottom-color; Border – left – color: color; Border – right – color: color;
Border-top: width style color; Border-bottom: width style color; Border-left: width style color; Border-right: width style color;

Thin border of table:

  • Set spacing between cells to 0 with the table cellspacing=”0″,

  • But the borders between the two cells overlap, making them thicker

  • Table {border-collapse:collapse; }

    • collapseThe word means merge,border-collapse: collapse;Indicates that adjacent borders are merged together.
<style>
 table {
  width: 500px;
  height: 300px;
  border: 1px solid red;
 }
 td {
  border: 1px solid red;
  text-align: center;
 }
 table.td {
  border-collapse: collapse;  /* Merge adjacent borders */
 }
</style>
Copy the code

2. Padding

The padding property is used to set the inner margin. This is the distance between the border and the content.

Set up the

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

Padding shorthand

The number of values Express meaning
A value Padding: upper, lower, left, and right inner margins;
Two values Padding: upper and lower inner margin left and right inner margin;
Three values Padding: upper inner margin left and right inner margin lower inner margin;
Four values Padding: top inner margin right inner margin bottom inner margin left inner margin;

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

  1. The content has a distance from the border, adding an inner margin.
  2. The box will get bigger

Solution: Maintain the original size of the box by subtracting the corresponding inner margin value for the box with the width and height set.

Padding does not affect box size: 👉 If you do not specify a width for a box, then if you specify a padding for the box, it will not open the box.

3. Margin

The margin property is used to set the margin. Margin controls the distance between boxes

Set up the

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

The shorthand for margin means exactly the same as padding.

Block level boxes are horizontally centered

  • Box must specify width
  • And then I’m going to set the left and right margins to auto

In practice, this method is commonly used for web page layout, and the sample code is as follows:

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

The following three common ways can be 👇👇.

  • margin-left: auto; margin-right: auto;
  • margin: auto;
  • margin: 0 auto;

The difference between text center and box center 👇👇

  1. Text-align: center; You can also center inline elements and inline blocks
  2. Block level box horizontal center left and right margin changed to Auto

Insert image and background image distinction 👇👇

  1. Insert the pictureFor example, we use the product display class to move the position only by the padding margin of the box model
  2. The background imageWe usually use small icon background or large background image, background image, move the position only through background-position

Clears the default inner and outer margins of elements 👇👇

  • For the sake of compatibility, try to set only the left and right inner and outer margins, not the upper and lower inner and outer margins.
* {
   padding:0;         /* Clear the inner margin */
   margin:0;          /* Clears margins */
}
Copy the code

4. Margin merge

Margin consolidation can occur when using margins to define the “vertical margins” of block elements.

(1). Merging of vertical margins of adjacent block elements

  • When two adjacent block elements meet, if the upper element has a lower margin margin-bottom
  • If the following elements have an upper margin margin-top, the vertical spacing between them is not the sum of margin-bottom and margin-top
  • The phenomenon of “taking the greater of two values” is known as the merging of vertical margins of adjacent block elements (also known as margin collapse).

“Solution: Try to add margins to only one box.”

(2). Merging of vertical margins of nested block elements (collapse)

  • For two nested block elements, if the parent element has no upper inner margin and border
  • The upper margin of the parent element is merged with the upper margin of the child element
  • The combined margin is the larger of the two

“Solution:”

  1. You can define an upper border or an upper inner margin for the parent element
  2. Can I do forThe parent element adds overflow: Hidden.

There are other methods, such as floating, fixed, absolutely positioned boxes will not be a problem, we will summarize later…

Box model layout stability

Width first, padding second, margin

width >  padding  >   margin   
Copy the code

The reason:

  • Margin will have margin merging and margin doubling bug in IE6 (annoying) so last use.
  • Padding affects the size of the box, which requires addition and subtraction (trouble).
  • Width is fine (happy) we always use width residuals height residuals.

CSS 3 new

The rounded edges

border-radius:length;
border-top-left-radiusIt defines the radian in the upper left cornerborder-top-right-radiusIt defines the radians in the upper right cornerborder-bottom-right-radiusDefines the radians in the lower right hand cornerborder-bottom-left-radiusDefines the radian in the lower left hand cornerCopy the code
  • Each of these values can be in the form of a number or percentage.
  • Tip: Turn a square into a circle
border-radius: 50%;
Copy the code

To specify each of the four corners, use the following rule 👇👇 :

border-radius: upper left corner upper right corner lower left corner;Copy the code
  1. Four values: the first value is the upper left corner, the second value is the upper right corner, the third value is the lower right corner, and the fourth value is the lower left corner.
  2. Three values: the first value is the upper-left corner, the second value is the upper-right and lower-left corner, and the third value is the lower-right corner
  3. Two values: the first value is upper left and lower right, and the second value is upper right and lower left
  4. One value: All corners have the same value

Shadow box

Box shadow (box-shadow) :box-shadow: offset-x offset-y [blur [spread]] [color] [inset] box-shadow: horizontal shadow;Copy the code
value describe
offset-x Horizontal offset of the shadow. Positive numbers shift to the right, negative numbers to the left.
offset-y The vertical offset of the shadow. Positive numbers are offset down, negative numbers are offset up.
blur Optional. Shadow blur distance, can not be negative.
spread Optional. Size of the shadow
color Optional. Shadow color
inset Optional. Adds an inner shadow. The default is outer shadow
  1. The first two attributes are mandatory. The rest can be omitted.
  2. Outshadow outset cannot be written out and is default, will report an error when written. If you want an inner shadow, say inset
div {
   width: 200px;
   height: 200px;
   border: 10px solid red;
   /* box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4);  */
   /* box-shadow: horizontal position vertical position blur distance Shadow size (shadow size) Shadow color inner/outer shadow; * /
   box-shadow: 0 15px 30px  rgba(0.0.0.4);   
}
Copy the code