css3 box model note_html/css_WEB-ITnose
css3 box model
CSS assumes that each element will generate one or more rectangular boxes, which are called element boxes. There is a content area in the center of each element box. This content area is surrounded by optional padding, borders, and margins. The reason these items are considered optional is that their width can be set to 0, which effectively removes the items from the element box.
In the W3C traditional CSS2.1 box model, the width and height of the content area are controlled by declaring width and height values, and then appending padding and borders, etc., which is usually called For the content box model.
The box model in CSS is divided into two types. The first one is the W3C standard model, and the other is IE’s traditional model. They are similar in that they are models for calculating the size of elements. The difference is that are calculated differently.
W3C’s standard box model
Outer box size calculation (element space size)
element 空间高度 = 内容高度 + 内边距 + 边框 + 外边距element 空间宽度 = 内容宽度 + 内边距 + 边框 + 外边距
Inner box size calculation (element size)
element 高度 = 内容高度 + 内边距 + 边框element 宽度 = 内容宽度 + 内边距 + 边框
IE traditional box model (below IE6, excluding IE6)
Outer box size calculation (element space size)
element 空间高度 = 内容高度(包括了height+padding+border) + 外边距element 空间宽度 = 内容宽度(包括了width+padding+border) + 内边距 + 边框 + 外边距
Inner box size calculation (element size)
element 高度 = 内容高度(包括了height+padding+border)element 宽度 = 内容宽度(包括了height+padding+border)
In other words, the real width of the content in versions below IE6 is width, padding, and border. In terms of inner and outer boxes, the content width of W3C standard browsers is equal to the inner box width of browsers below IE6.
box-sizing
As mentioned earlier, under the IE traditional box model, the border and padding are included in the width and height. In standard browsers, the width and height only include the content width, excluding borders and padding, which adds a lot of trouble to web design processing. For example, we need a 100px element. The element has a 10px padding and a 1px border. Under the W3C standard box model, we must do some additions and subtractions. Finally, the content width is 100-20-2=78px. However, under the IE traditional box model, you only need to declare that the box content is equal to 100px, and the padding and border are automatically included in it. In order to solve this problem, CSS3 adds a box model attribute box-sizing, which can define the size resolution method of the box model in advance.
box-sizing:content-box | border-box | inherit
Content-box: Default value, allowing the element to maintain the W3C standard box model.
Border-box: This value will cause the element to maintain the IE traditional box model.
Inherit: This value causes the element to inherit the box model mode of the parent element.
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> div{ width:100px; height:100px; background:hsla(360,50%,30%,0.5); padding:10px; border:10px solid red; box-sizing:content-box; }</style></head><body> <div>胸无大志者，必受制于人</div></body></html>Under the default (content-box) standard box model, the box is stretched by the padding and borders.
div{ width:100px; height:100px; background:hsla(360,50%,30%,0.5); padding:10px; border:10px solid red; box-sizing:border-box;}Under the IE traditional box model (border-box), the box size remains unchanged.
Although the parsing mode of the box model in versions below IE6 does not comply with the W3C standard specification, this method is not useless. It also has a good side: no matter if you modify the border or padding size of the element, it will It will not affect the total size of the element box and will not disrupt the overall layout of the page. Under standard browsers, according to the W3C specification for parsing the box model, once the border or padding of an element is modified, it will affect the box size of the element, and the box size of the element will have to be recalculated, thus affecting the entire The layout of the page.
overflow-x and overflow-y
The overflow attribute is a feature in the CSS2.1 specification, and the overflow-x and overflow-y attributes were added in CSS3.
Overflow-x and overflow-y are mainly used to define the effect of horizontal or vertical content overflow.
overflow-x:visible | hidden | scroll | auto | no-display | no-contentoverflow-y:visible | hidden | scroll | auto | no-display | no-content
visible: Default value. Content is not cropped and may appear outside the content box.
hidden: Crops content and does not provide scrolling mechanism.
scroll: Crop content and provide scrolling mechanism.
Auto: Provides a scrolling mechanism if the box overflows.
no-display: If the content does not fit into the content box, delete the entire box.
no-content: Hide the entire content if it does not fit into the content box.
div{ width:200px; white-space:nowrap; overflow-x:scroll;}overflow-x:scorll, adds a scrolling mechanism to the x-axis.
div{ width:100px; height:100px; overflow-y:scroll;}overflow-y:scorll, adds a rolling mechanism to the y-axis.
resize
Used to change the size of elements, the main purpose is to enhance the user experience.
resize:none | both | horizontal | vertical | inherit
None: The user cannot drag the element to change the size.
Both: The user can drag the element and modify the width and height of the element at the same time.
Horizontal: The user can drag the element and only modify the width of the element.
Vertical: The user can drag the element and only modify the height of the element.
Inherit: Inherit the resize attribute value of the parent element.
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> div{ width:100px; height:100px; overflow-y:scroll; resize:none; }</style></head><body> <div>胸无大志者，必受制于人胸无大志者，必受制于人</div></body></html> When resize is the default value, elements cannot be dragged to change size.
div{ width:100px; height:100px; overflow-y:scroll; resize:both;}When resize is both, a special symbol appears in the lower right corner of the element. Drag it to change the width and height of the element. The following is the effect after dragging:
div{ width:100px; height:100px; overflow:scroll; resize:horizontal;}When resize is horizontal, special symbols also appear, but you can only drag horizontally, that is The size of the width, as shown below is the effect after dragging.
div{ width:100px; height:100px; overflow:scroll; resize:vertical;}riseze为vertical时也一样，但是只能拖动垂直的方向，也就是高度大小，如下是拖动后的效果。
outline
外轮廓outline在页面中呈现的效果和边框border呈现的效果极其相似，但和border不同，外轮廓线不占用网页布局的空间，不一定是矩形。
outline:[outline-color] || [outline-style] || [outline-width] || [outline-offset] || inherit
outline-color:定义轮廓线的颜色。
outline-style:定义轮廓线的样式。
outline-width:定义轮廓线的宽度。
outline-offset:定义轮廓线离边框的偏移值。
inherit:元素继承父元素的outline效果。
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> div{ width:100px; height:100px; border:10px solid; outline:10px solid red; }</style></head><body> <div>胸无大志者，必受制于人胸无大志者，必受制于人</div> <span>胸无大志者，必受制于人</span></body></html>outline的效果与border的效果类似，但却不占据文档流，所以能够覆盖住后边的文本。
css3盒模型完。学习路漫漫，当知晓并非一日之功，中间必有千辛万苦。子曰：吾道一以贯之。就是说要有始有终，贵在坚持啊。
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
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1378
52
What is the purpose of the <progress> element?
Mar 21, 2025 pm 12:34 PM
The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati
What is the purpose of the <datalist> element?
Mar 21, 2025 pm 12:33 PM
The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159
What are the best practices for cross-browser compatibility in HTML5?
Mar 17, 2025 pm 12:20 PM
Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.
How do I use HTML5 form validation attributes to validate user input?
Mar 17, 2025 pm 12:27 PM
The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.
What is the purpose of the <meter> element?
Mar 21, 2025 pm 12:35 PM
The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex
What is the viewport meta tag? Why is it important for responsive design?
Mar 20, 2025 pm 05:56 PM
The article discusses the viewport meta tag, essential for responsive web design on mobile devices. It explains how proper use ensures optimal content scaling and user interaction, while misuse can lead to design and accessibility issues.
What is the purpose of the <iframe> tag? What are the security considerations when using it?
Mar 20, 2025 pm 06:05 PM
The article discusses the <iframe> tag's purpose in embedding external content into webpages, its common uses, security risks, and alternatives like object tags and APIs.
Gitee Pages static website deployment failed: How to troubleshoot and resolve single file 404 errors?
Apr 04, 2025 pm 11:54 PM
GiteePages static website deployment failed: 404 error troubleshooting and resolution when using Gitee...
