Learning record: css box model

Introduction to CSS Basic Box Model

You can think of all the elements in html as a box. The box includes four parts: content, padding, border, and margin.

The mode of the box model can be set through the css style attribute box-sizing.

box-sizing: border-box || content-box || inherit;

The general box model has two modes: standard mode (W3C) and weird mode (IE)

• Standard box model: width = content, height = content. The css attribute is box-sizing: content-box;
• Weird box model: width = content + padding + border, height = content + padding + border. The css attribute is box-sizing: border-box;

Given the style in css as follows, you will get boxes of different sizes in different modes.

div {
    
    
	width: 200px;
	height: 100px;
	padding: 10px;
	border: 1px solid #ff0000;
	margin: 20px;
}

Weird box model: box-sizing: border-box;

standard box model: box-sizing: content-box;