[Frontend] In-depth understanding of CSS box model and floating

I. Introduction

The elements in the page are all composed of boxes, and the contents of the elements are contained in the boxes. From the inside to the outside of the box are content, padding, border, and margin. These attributes are also commonly used attributes. We can clearly see the corresponding attributes and attribute values ​​by opening the developer tools and selecting the elements on the page with F12

2. Box model

1. The composition of the box model

• border
• content content
• padding: the distance between the text and the border of the box
• margin: Control the distance between one box and another box The
  
  so-called box model : It is to regard the layout elements in the HTML page as a rectangular box, which is a container for content.
  The CSS box model is essentially a box that encapsulates HTML elements, including: borders, margins, inner margins, and actual content
  

1.1, border border

border can set the border of the element

1.1.1. The frame consists of three parts

• Border width (thickness, unit is px): border-width
• Border style: border-style
• Border color: border-color

/* 边框高度 */
border-width: 5px;

/* 边框样式 solid实线 */
border-style: solid;

/* 边框样式 dashed虚线 */
border-style: dashed;

/* 边框样式 dotted点线 */
border-style: dotted;

/* 边框颜色 */
border-color: red;

/* transparent透明色 */
border-color: transparent;

1.1.2 Shorthand for composite frame

/* 边框的复合简写 没有顺序*/
border: 5px solid red

1.1.3, Write the frame separately

/* 边框分开写*/
border-top: 5px solid red;
border-bottom: 5px solid blue;
border-left: 5px solid pink;
border-right: 5px solid purple;

1.1.4, the thin line border of the table

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

/* 合并相邻的边框 表示相邻边框合并在一起 */
border-collapse: collapse;

1.2, padding inner margin

The padding attribute is used to set the inner margin, that is, the distance between the border and the content.
The padding attribute (shorthand attribute) can have one to four values

1.3, margin outer margin

The margin attribute is used to set the outer margin, that is, the distance between the control box and the box

1.3.1, Margins are horizontally centered

Margins allow block-level boxes to be centered horizontally , and two conditions must be met:

1. The box must specify a width (width)
2. The left and right margins of the box are set to auto

元素/.类{
width: 20px;
margin: 0 auto;
}

The above method is to center the block-level element horizontally, and add text-align: center to the parent element of the in-line element or in-line block element.

1.3.2. Margin merge

When using margin to define the vertical margin of a block element, the margin may be merged

1.3.3. Collapse of vertical margins of nested block elements

For block elements with two nested relationships (parent-child relationship), the parent element has an upper margin and the child element also has an upper margin. At this time, the parent element will collapse with a larger margin value

1.3.3.1. Solutions

1. A top border can be defined for the parent element

/* 设置边框为1px 实线 透明色 */
border: 1px solid transparent

2. You can define a top padding for the parent element

/* 设置内边距为1px */
padding: 1px

3. You can add overflow: hidden to the parent element

1.3.4. Clear inner and outer margins

* {
	//清除内边距
	padding: 0

	//清除外边距
	margin: 0
}

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

2. Rounded border

The border-radius attribute is used to set the rounded corners of the outer border of the element

border-radius: 长度px/%；

3. Box Shadow

The box-shadow property adds a shadow to the box

box-shadow: h-shadow v-shadow blur spread color inset
box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.3);

Note :
1. The default is outer shadow (outset), but this word cannot be written, otherwise the shadow will be invalid. 2. The
box shadow does not take up space and will not affect the arrangement of other boxes.
3. Composite writing must be used, and writing alone will not take effect

4. Text Shadow

The text-shadow attribute adds a shadow to the text

text-shadow: h-shadow v-shadow blur color
text-shadow: 3px 3px 2px rgba(0,0,0,0.3);

Three, CSS floating

1. Floating

1. The horizontal direction of the element is floating, which means that the element can only move left and right but not up and down.
2. A floated element moves as far left or right as possible until its outer edge touches the border of the containing box or another floated box.
3. Elements after the floated element will wrap around it.
4. Elements before the floated element will not be affected.

1.1. Standard stream (ordinary stream/document stream)

1.2. Floating characteristics

1. Breaking away from the control of the standard ordinary flow (floating) and moving to the specified position (moving), it is called off-label
2. Floating boxes no longer retain their original position

2. Clear floating

Four. Summary

Through the introduction of this article, readers have a deeper understanding of the CSS box model and floating. After mastering these two concepts, readers can more flexibly carry out page layout and design, and improve the user experience and maintainability of web pages. At the same time, by understanding the compatibility issues and solutions of the box model and floating, readers can better deal with the differences of different browsers and improve development efficiency. I hope this article can help readers better use CSS box model and floating technology in front-end development.