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.
(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.
width = Content width(content padding border) margin
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.
box-sizing attribute has the following two attribute values.
- 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
.
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
.
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:
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 id="通用的-nbsp-box-sizing">通用的 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:
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
- width
- and
heightproperties can workBy defaulth1- h6 - ,
p,p,sectionare all inblockstatus 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、双实线、红色边框。
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!
All About mailto: LinksApr 22, 2025 am 11:04 AMYou can make a garden variety anchor link () open up a new email. Let's take a little journey into this feature. It's pretty easy to use, but as with anything
It's pretty cool how Netlify CMS works with any flat file site generatorApr 22, 2025 am 11:03 AMLittle confession here: when I first saw Netlify CMS at a glance, I thought: cool, maybe I'll try that someday when I'm exploring CMSs for a new project. Then
Edge Goes Chromium: What Does it Mean for Front-End Developers?Apr 22, 2025 am 10:58 AMIn December 2018, Microsoft announced that Edge would adopt Chromium, the open source project that powers Google Chrome. Many within the industry reacted with
A Gutenburg-Powered NewsletterApr 22, 2025 am 10:57 AMI like Gutenberg, the new WordPress editor. I'm not oblivious to all the conversation around accessibility, UX, and readiness, but I know how hard it is to
Using for Menus and Dialogs is an Interesting IdeaApr 22, 2025 am 10:56 AMUsing for a menu may be an interesting idea, but perhaps not something to actually ship in production. See "More Details on "
Automated Visual Regression Testing With PlaywrightApr 22, 2025 am 10:54 AMWith visual regression testing, we can update a page, take screenshots before and after the fact, and compare the results for unintended changes. In this article, learn how to set up visual regression testing using Playwright.
CSS Houdini Could Change the Way We Write and Manage CSSApr 22, 2025 am 10:45 AMCSS Houdini may be the most exciting development in CSS. Houdini is comprised of a number of separate APIs, each shipping to browsers separately, and some
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
MantisBT
Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.
mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),
Dreamweaver CS6
Visual web development tools
DVWA
Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software
ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment
