CSS设计指南之理解盒子模型

简介: 原文:CSS设计指南之理解盒子模型一.理解盒模型 每一个元素都会在页面上生成一个盒子。因此,HTML页面实际上是由一堆盒子组成的。默认情况下,每个盒子的边框不可见,背景也是透明的,所以我们不能直接看到页面中盒子的结构。
原文: CSS设计指南之理解盒子模型

一.理解盒模型

每一个元素都会在页面上生成一个盒子。因此,HTML页面实际上是由一堆盒子组成的。默认情况下,每个盒子的边框不可见,背景也是透明的,所以我们不能直接看到页面中盒子的结构。使用WebDeveloper工具条中的"OutLine"->"OutLine Level Element"菜单项,可以方便地显示盒子的边框和背景,从而让我们能从另外一个角度来审视页面的构成。

 

1.1 元素盒子的属性

1.边框(border):可以设置边框的宽窄、样式和颜色。

2.内边距(padding):可以设置盒子内容区与边框的间距,想像一下内边距是从边框向内推元素的内容。

3.外边距(margin):可以设置盒子与相邻元素的间距,想像一下外边距是边框向外推其他元素。

 

1.2 盒子边框

边框有3个相关的属性:宽度(border-width)、样式(border-style)、颜色(border-color)

 

1.3 盒子内边距

内边距是盒子内容区与盒子边框之间的距离,如果不设定padding的值,那么元素的文本就会紧挨着元素的边距。如下图所示,在显式设定了width的前提下,padding值的设定会加大盒子的宽度。


1.4 盒子外边距
1.如图4所示,默认情况下,元素之间也会有外边距,


推荐把下面这条规则作为样式表的第一条规则:* {margion:0 ;padding=0;},这条规则把所有元素默认的外边距和内边距都设定为零。

2.垂直叠加外边距


如上图所示,Div2设定了上外边距,Div3没有设定外边距,但是Div1与Div2的间距和Div2与Div3的间距是一样的,由此说明Div2此时设定的margin-top并没有起作用。
也就是说,较宽的外边距决定两个元素最终离多远,如果把Div2的margin-top设定为15,效果如下图,可以看到Div1与Div2的间距变宽了。

注意:叠加的只是垂直外边距,水平外边距不叠加。对于水平相邻的元素,它们的水平间距是相邻外边距之和。

二.盒子有多大


2.1 块级元素(block element)
1.没有宽度
所谓没有宽度,就是指没有显式地设置元素的width属性,如果不设置块级元素的width属性,那么这个属性的默认值是auto,结果会让元素的宽度扩展到与父元素同
宽。没有显式设置width属性的元素始终会扩展到填满其父元素的宽度为止,添加外边距会导致元素盒子变小。


2.设定宽度
为设定了宽度的盒子添加边框、内边距和外边距,会导致盒子扩展得更宽。扩展量等于水平边框和内边距之和。


2.2 行内元素


1.没有宽度
inline元素会扩展到足以包裹其内容的宽度,添加内边距和水平边框会导致liline元素变宽,添加量等于水平边框和内边距的和。
2.有宽度的块级元素
为设定了宽度的盒子添加边框、内边距和外边距,会导致盒子扩展得更宽。扩展量等于水平边框和内边距之和。



3.2.3
CSS3新增box-sizing属性,通过它可以将有宽度的盒子也设定成具有默认的auto状态下的行为。

目录
相关文章
|
14天前
|
前端开发
Web网页制作-知识点(4)——CSS盒子模型、弹性盒模型(flex box)、文档流、浮动、清除浮动、定位、圆角、阴影二
Web网页制作-知识点(4)——CSS盒子模型、弹性盒模型(flex box)、文档流、浮动、清除浮动、定位、圆角、阴影二
18 0
|
14天前
|
前端开发 容器
Web网页制作-知识点(4)——CSS盒子模型、弹性盒模型(flex box)、文档流、浮动、清除浮动、定位、圆角、阴影(一)
Web网页制作-知识点(4)——CSS盒子模型、弹性盒模型(flex box)、文档流、浮动、清除浮动、定位、圆角、阴影一
24 0
|
23天前
|
前端开发
CSS盒子模型
CSS盒子模型。
15 1
|
1月前
|
前端开发
CSS 盒子模型(Box Model
CSS 盒子模型(Box Model。
21 1
|
1月前
|
前端开发
CSS的盒子模型:掌握网页设计的基石!
CSS的盒子模型:掌握网页设计的基石!
|
1月前
|
前端开发
CSS盒子模型
【5月更文挑战第4天】CSS盒子模型。
26 7
|
1月前
|
前端开发
css样式字体、文本、背景属性,盒子模型详解,轻松调教出优美的字体和网页背景色
css样式字体、文本、背景属性,盒子模型详解,轻松调教出优美的字体和网页背景色
|
1月前
|
前端开发 UED
【Web 前端】css盒子模型有几种类型?它们区别是什么?
【4月更文挑战第22天】【Web 前端】css盒子模型有几种类型?它们区别是什么?
|
1月前
|
前端开发
CSS 盒子模型
CSS 盒子模型。
18 4
N..
|
1月前
|
前端开发
CSS盒子模型
CSS盒子模型
N..
19 0