Introducing the CSS box model and box-sizing properties

WBOY

Release： 2022-08-03 11:44:28

forward

1960 people have browsed it

This article brings you relevant knowledge about css, which mainly introduces the css box model and related issues of the box-sizing attribute. The box-sizing attribute defines how to calculate the total size of an element. The width and total height mainly set whether padding and borders need to be added. Let’s take a look at them together. I hope it will be helpful to everyone.

Introducing the CSS box model and box-sizing properties

(Learning video sharing: css video tutorial, html video tutorial)

Box model definition and Category

CSS basic box model is a module of the CSS specification. It defines a rectangular box, including their respective padding and margin
, and based on Visual formatting models to generate elements, lay them out, arrange them, and lay them out. Often literally translated as box model, box model or box model.

Box models have the following classifications:

Standard definition:
- Standard box model
- Weird mode box model
Element type
- Block-level box
- Inline box
- Inline block

Standard definition Division

1. Standard box model

Widthwidth = Content width (content) padding border margin

The content width is only content. If you set the width of an element to 100px, then the content area of this element will be 100px wide, and any borders and padding## The width of # will be added to the width of the last drawn element.

2. Weird mode box model

Width

width = Content width(content padding border) margin

The content width includes

content, border, padding. If an element's width is set to 100px, then this 100px will include its border and padding , the actual width of the content area is the value of width minus (border padding). In most cases, this makes it easier to set the width and height of an element.

3. box-sizing attribute

box-sizing attribute has the following two attribute values.

The box-sizing attribute defines how to calculate the total width and height of an element, mainly setting whether padding and borders need to be added.

For example, if you need to place two bordered boxes side by side, you can do this by setting box-sizing to "border-box". This tells the browser to render a box with the specified width and height, and put the borders and padding into the box.

By default, the width (width) and height (height) of an element are calculated as follows:

width (width) padding (padding) border (border) ) = Actual width of element
height(height) padding(padding) border(border) = Actual height of element

Default value, uses

standard box model

.contentBox {
    box-sizing: content-box;
    width: 350px;
    border: 10px solid black;
    padding: 0 10px;}

Copy after login

The actual width of the above code rendered in the browser is

390px

2. border-box

Use

weird mode box model

.borderBox {
    box-sizing: border-box;
    width: 350px;
    border: 10px solid black;
    padding: 0 10px;}

Copy after login

The actual width of the above code rendered in the browser is

350px

The example is as follows:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>123</title>
<style> 
div.container {
  width: 100%;
  border: 2px solid black;
}
div.box {
  box-sizing: border-box;
  width: 50%;
  border: 5px solid red;
  float: left;
}
</style>
</head>
<body>
<div class="container">
  <div class="box">这个 div 占据了左边部分</div>
  <div class="box">这个 div 占据了右边部分</div>
  <div style="clear:both;"></div>
</div>
</body>
</html>

Copy after login

Output result:

Introducing the CSS box model and box-sizing properties

Example 2:

<!DOCTYPE html>
<html>
<head>
<style>
* {
  box-sizing: border-box;
}
#example1 {
  width: 300px;
  padding: 40px;  
  border: 15px solid blue;
}
#example2 {
  width: 300px;
  padding: 10px;  
  border: 2px solid red;
}
</style>
</head>
<body>
<h1>通用的 box-sizing</h1>
<p>使用 “box-sizing:border-box” 可以让前端开发人员减少很多工作。 上面 head 部分中的第一个样式确保所有元素都以这种更直观的方式调整大小。
你设置的宽度就是实际的宽度，不需要考虑内边距和边框：</p>
<div id="example1">div 的完整宽度为 300px, 不需要考虑内边距和边框。</div>
<br>
<div id="example2">这个 div 的完整宽度也是 300px, 也不需要考虑内边距和边框。</div>
</body>
</html>

Copy after login

Output result:

Introducing the CSS box model and box-sizing properties Element type division

1. Block-level box

A block box defined as a block will exhibit the following behavior:

The box can occupy all available space of the parent container

Each box will wrap
and height properties can work By default
, p, p, section are all in block status

An inline box defined as inline will exhibit the following behavior:

盒子不会产生换行
width和height属性将不起作用
默认情况下用做链接的a元素、span、em以及strong都处于inline状态

3. 特殊的行内块

如果不希望一个项切换到新行，但希望它可以设定宽度和高度，此时我们可以将该元素设置为inline-block。

4. 元素类型切换

	`display`属性值
块级盒子	`block`
内联盒子	`inline`
行内块	`inline-block`

4. 盒模型属性设置

1. margin和padding

1个值：四个方向
2个值：上下、左右
3个值：上、左右、下
4个值：上、右、下、左

2. border值

border: 10px double red;

Copy after login

10px、双实线、红色边框。

（学习视频分享：css视频教程、html视频教程）

The above is the detailed content of Introducing the CSS box model and box-sizing properties. For more information, please follow other related articles on the PHP Chinese website!