原文: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状态下的行为。

CSS设计指南之理解盒子模型的更多相关文章

  1. CSS 设计彻底研究(三)深入理解盒子模型

    第三章 深入理解盒子模型 盒子模型是CSS控制页面的基础.需要清楚“盒子”的含义是什么,以及盒子的组成.此外,应该理解DOM的基本概念,以及DOM树是如何与一个HTML文档对应的,在此基础上充分理解“ ...

  2. 《CSS 设计指南》学习笔记 一

    本篇文章是对这几天看完 Charles Wyke-Smit 的 <CSS 设计指南> 后的一些学习笔记与心得,笔者好像是大一的时候开始接触网页设计,由于并不是计算机专业的,所以所有都是自己 ...

  3. CSS设计指南之定位

    原文:CSS设计指南之定位 CSS布局的核心是position属性,对元素盒子应用这个属性,可以相对于它在常规文档流中的位置重新定位.position属性有4个值:static.relative.ab ...

  4. CSS学习篇核心之——盒子模型

    概述 关于CSS的一些基础知识我们在前面文章中已经有所了解,这篇文章我们主要来学习下CSS中的核心知识盒子模型的知识. 盒子模型 元素框的最内部分是实际的内容(element),直接包围内容的是内边距 ...

  5. CSS设计指南之浮动与清除

    原文:CSS设计指南之浮动与清除 浮动意思就是把元素从常规文档流中拿出来,浮动元素脱离了常规文档流之后,原来紧跟在其后的元素就会在空间允许的情况下,向上提升到与浮动元素平起平坐. 一.浮动 CSS设计 ...

  6. CSS(六):盒子模型

    一.什么是盒子模型 盒子模型是css中一个重要的概念,理解了盒子模型才能更好的排版. 从上图可以看到标准的盒子模型范围包括margin(外边距).border(边框).padding(内边距).con ...

  7. CSS基础深入之细说盒子模型

    Html任何一个元素(element)都可以当成一个盒子(box)来看待,可以结合现实中的盒子来理解下文,下文其中一些单词应该是通俗易懂的需要记录的单词. 基本情况 每一个盒子都有一个内容区域(con ...

  8. CSS 样式、布局、盒子模型

    Css内容: 常用样式: 字体    颜色   背景 布局: 浮动   定位   标签特性 标签盒子模型:  边距   边框 动画: 旋转 渐变 注意:Css引路径从css文件里找   Html和js ...

  9. CSS 设计指南(第3版) 初读笔记

    第1章 HTML标记与文档结构 关于<title>标签:搜索引擎会给<title>标签中的文字内容赋予很高的权重.而且这些文字也会作为网页标题出现在搜索结果列表中. 无论你想了 ...

随机推荐

  1. java中super()和this()浅析

    <span style="font-size:18px;">本质:这两个都是调用构造方法的方法.</span> 在java中,super()是在当前类的构造 ...

  2. Extjs4.2 Desktop 拖动黑色和白色的桌面图标的解决方案

    最近做了一个extjs4.2的desktop桌面demo,该desktop从原来的包中剥离出来,并实现了桌面图标休息,拖动桌面图标,但是,用户抱怨拖动桌面图标会出现黑色和白色,测试,在 extjs4. ...

  3. autoit 处理文件上传弹出框,并在JAVA中调用

    Java  代码 //定义exe 文件存放的绝对路径 File file2 = new File("."); String command = file2.getCanonical ...

  4. jQuery 弹出窗口的形式一直是具体案件的中心

    在网上查 多 不是不符合无效;因此,一些自己总结,解决这个问题   原则: 常见问题: 弹出层居中了,背景也是半透明的  可是发现一拉动滚动栏立即就露馅了发现背景仅仅设置了屏幕所在段,其它部分都是原来 ...

  5. myeclipse10.7皴,出口解决war包时报“SECURITY ALERT: INTEGERITY CHECK ERROR”

    一.操作系统的环境是win7,64bit和32bit的操作系统我试过都OK 依照网上一些Crack破解程序步骤操作就能够完毕破解过程, 也能够到我的CSDN资源里下载文件包 myeclipse10.7 ...

  6. Creating Contextual Menus创建上下文菜单

    A contextual menu offers actions that affect a specific item or context frame in the UI. You can pro ...

  7. Maven, Ivy, Grape, Gradle, Buildr, SBT, Leiningen, ant

    Maven, Ivy, Grape, Gradle, Buildr, SBT, Leiningen, ant

  8. 京东商城招聘自动调价系统架构师 T4级别

    岗位级别:T4 岗位职责: 1.负责自动调价系统的架构设计 2.负责自动调价的预测.相关性算法设计 3.核心代码编写,代码review 任职要求: 1.熟悉数据挖掘.机器学习理论和算法 2.熟悉海量数 ...

  9. Cloudera hadoop-2.3.0-cdh5.1.0 在Centos 6.5 下的安装

    安装前准备 1.  虚拟机3个.安装Centos 6.5, 内存设置为4GB 2.  配置yum源为163(不配置,在安装软件时,慢的要死) 3. 关闭防火墙( iptables).disabled ...

  10. Android网络服务发现(NSD)协议的使用

    Android的网络服务发现协议(NSD)能够用于在小范围的网络中发现邻近设备上的某个应用.这对于一些社交网络.多人游戏类的应用会很有帮助. Android的NSD的用法大致上分为四种操作: 1. 注 ...