search

Home  >  Article  >  Web Front-end  >  Introducing the CSS box model and box-sizing properties

Introducing the CSS box model and box-sizing properties

WBOY
WBOYforward
2022-08-03 11:44:281958browse

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

    • ##1. content -box

Default value, uses

standard box model

. 

.contentBox {
    box-sizing: content-box;
    width: 350px;
    border: 10px solid black;
    padding: 0 10px;}
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;}
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>
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>
Output result:

Introducing the CSS box model and box-sizing propertiesElement 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
  • width
  • and height properties can work By default
    • h1- h6
  • , p, p, section are all in block status
    • 2. Linked boxes

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;

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!

Statement：
This article is reproduced at:csdn.net. If there is any infringement, please contact admin@php.cn delete
Previous article：css pseudo-selector learning pseudo-class selector analysisNext article：css pseudo-selector learning pseudo-class selector analysis

Related articles

See more