简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW)
Home > Web Front-end > HTML Tutorial > body text

CSS中的盒子模型详解

WBOY
Release： 2016-05-25 18:02:29
Original
1575 people have browsed it

很多人对盒子模型搞晕头了，下面通过一个简单的代码来分析盒子模型的结构！

为了方便方便观看！在第一个div中画了一个表格，并将其尺寸设置成与div内容大小一样！且设置body的margin和padding的属性都为0px；

本例子采用行内CSS样式！

代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">
盒子模型
 
  
    
      
        
      
    
Javalittleman
  
  
  
  

把标尺打开！

大家发现了什么没有？

QQ截图20141119131234

 

分析如下：

 

 

显示效果：

 

image

 

其它设置的table是固定不变的，也就是说内容大小都不会改变的，改变的只是位置！

border：是边框，向外扩张，并可以为其添加颜色属性；

margin：是向外扩张，没有颜色属性，所以我们看到扩张后的颜色是外部的颜色，在本例子中是无色的！

padding：是向内填充的，没有颜色属性，显示的颜色是内部内容设置的颜色！

Related labels：
CSS中的盒子模型详解
source：php.cn
Previous article：CSS3颜色特征温故 Next article：CSS- 文本超出指定宽度后隐藏并显示为省略号
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
Comparison of parent parameters used in Apollo GraphQL resolver vs. $lookup stage in MongoDB aggregation for joining Mongoose models I'm developing a backend application using ApolloGraphQL and Mongoose. I have two models: ...
From 2023-09-02 09:22:26
0
2
286
Is there a parent selector in CSS? How to select the <li> element that is the direct parent of the anchor eleme...
From 2023-08-21 10:49:24
0
2
202
Teaching course preview for September 12, 2018: Detailed explanation of dom operations in Javascript 1. Teaching topic: DOM operation content in Javascript. (The full name of DOM is Document ...
From 2018-09-12 14:45:26
0
0
995
[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
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！