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盒模型完。学习路漫漫，当知晓并非一日之功，中间必有千辛万苦。子曰：吾道一以贯之。就是说要有始有终，贵在坚持啊。
HTML: Building the Structure of Web PagesApr 14, 2025 am 12:14 AMHTML is the cornerstone of building web page structure. 1. HTML defines the content structure and semantics, and uses, etc. tags. 2. Provide semantic markers, such as, etc., to improve SEO effect. 3. To realize user interaction through tags, pay attention to form verification. 4. Use advanced elements such as, combined with JavaScript to achieve dynamic effects. 5. Common errors include unclosed labels and unquoted attribute values, and verification tools are required. 6. Optimization strategies include reducing HTTP requests, compressing HTML, using semantic tags, etc.
From Text to Websites: The Power of HTMLApr 13, 2025 am 12:07 AMHTML is a language used to build web pages, defining web page structure and content through tags and attributes. 1) HTML organizes document structure through tags, such as,. 2) The browser parses HTML to build the DOM and renders the web page. 3) New features of HTML5, such as, enhance multimedia functions. 4) Common errors include unclosed labels and unquoted attribute values. 5) Optimization suggestions include using semantic tags and reducing file size.
Understanding HTML, CSS, and JavaScript: A Beginner's GuideApr 12, 2025 am 12:02 AMWebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.
The Role of HTML: Structuring Web ContentApr 11, 2025 am 12:12 AMThe role of HTML is to define the structure and content of a web page through tags and attributes. 1. HTML organizes content through tags such as , making it easy to read and understand. 2. Use semantic tags such as, etc. to enhance accessibility and SEO. 3. Optimizing HTML code can improve web page loading speed and user experience.
HTML and Code: A Closer Look at the TerminologyApr 10, 2025 am 09:28 AMHTMLisaspecifictypeofcodefocusedonstructuringwebcontent,while"code"broadlyincludeslanguageslikeJavaScriptandPythonforfunctionality.1)HTMLdefineswebpagestructureusingtags.2)"Code"encompassesawiderrangeoflanguagesforlogicandinteract
HTML, CSS, and JavaScript: Essential Tools for Web DevelopersApr 09, 2025 am 12:12 AMHTML, CSS and JavaScript are the three pillars of web development. 1. HTML defines the web page structure and uses tags such as, etc. 2. CSS controls the web page style, using selectors and attributes such as color, font-size, etc. 3. JavaScript realizes dynamic effects and interaction, through event monitoring and DOM operations.
The Roles of HTML, CSS, and JavaScript: Core ResponsibilitiesApr 08, 2025 pm 07:05 PMHTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.
Is HTML easy to learn for beginners?Apr 07, 2025 am 12:11 AMHTML is suitable for beginners because it is simple and easy to learn and can quickly see results. 1) The learning curve of HTML is smooth and easy to get started. 2) Just master the basic tags to start creating web pages. 3) High flexibility and can be used in combination with CSS and JavaScript. 4) Rich learning resources and modern tools support the learning process.
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
SecLists
SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.
SublimeText3 Linux new version
SublimeText3 Linux latest version
Atom editor mac version download
The most popular open source editor
MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.
SublimeText3 Mac version
God-level code editing software (SublimeText3)
