简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > HTML Tutorial > body text

div css 盒子模型_html/css_WEB-ITnose

WBOY
Release： 2016-06-24 12:27:34
Original
1414 people have browsed it

那么它为什么叫盒子呢？先说说我们在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。

 

我们可以把它想像成现实中上方开口的盒子，然后从正上往下俯视，边框相当于盒子的厚度，内容相对于盒子中所装物体的空间，而填充呢，相当于为防震而在盒子内填充的泡沫，边界呢相当于在这个盒子周围要留出一定的空间，方便取出。是不是这样就很容易理解盒模型了。

所以整个盒模型在页面中所占的宽度是由左边界+左边框+左填充+内容+右填充+右边框+右边界组成，而css样式中width所定义的宽度仅仅是内容部分的宽度，这是许多朋友容易搞混的地方

这里的边界我们也称之为：外边距、外补丁；填充也叫：内边距、内补丁

Related labels：
div css 盒子模型
source：php.cn
Previous article：上下左右布局（DIV+CSS）_html/css_WEB-ITnose Next article：如何从零开始学习DIV+CSS_html/css_WEB-ITnose
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
CSS collapsing margins: what is their purpose? The CSS2 box model tells us that adjacent vertical margins will collapse. I find this anno...
From 2023-10-25 19:38:51
0
1
221
How to swap two Div using animation I have a project where I want a div to appear as a large box and three other divs to appea...
From 2023-08-26 13:55:33
0
1
226
Learn how to feather the edges of blocks using CSS How do I modify my CSS so that the edges of the box have a feathered blur effect? I would ...
From 2023-08-16 18:38:07
0
1
342
[Must-read for front-end job hunting] Selected front-end development interview questions and answers_CSS CSS: Introduce the CSS box model? (1) There are two types, IE box model and standard W3C b...
From 2017-11-13 13:03:00
0
1
1529
[Must-read for front-end job hunting] Selected front-end development interview questions and answers_Outline Front-end development interview knowledge points outline: 1. HTML&CSS: Understanding ...
From 2017-11-13 12:02:37
1
3
1246
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！