Review
In this lesson, we covered the four properties of the box model: height and width, padding, borders, and margins. Understanding the box model is an important step towards learning more advanced HTML and CSS topics. Let's take a minute to review what you learned.

  1. The box model comprises a set of properties used to create space around and between HTML elements.
  2. The height and width of a content area can be set in pixels or percentage.
  3. Borders surround the content area and padding of an element. The color, style, and thickness of a border can be set with CSS properties.
  4. Padding is the space between the content area and the border. It can be set in pixels or percent.
  5. Margin is the amount of spacing outside of an element's border.
  6. Horizontal margins add, so the total space between the borders of adjacent elements is equal to the sum of the right margin of one element and the left margin of the adjacent element.
  7. Vertical margins collapse, so the space between vertically adjacent elements is equal to the larger margin.
  8. margin: 0 auto horizontally centers an element inside of its parent content area, if it has a width.
  9. The overflow property can be set to display, hide, or scroll, and dictates how HTML will render content that overflows its parent's content area.
  10. The visibility property can hide or show elements.

THE BOX MODEL的更多相关文章

  1. CSS3与页面布局学习总结(二)——Box Model、边距折叠、内联与块标签、CSSReset

    一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...

  2. Box Model,边距折叠,内联和块标签,CSSReset

    一.盒子模型(Box Model) 1.1.宽度测试 1.2.溢出测试 1.3.box-sizing属性 1.4.利用CSS画图 二.边距折叠 2.1.概要 2.2.垂直方向外边距合并计算 三.内联与 ...

  3. CSS魔法堂:小结一下Box Model与Positioning Scheme

    前言  对于Box Model和Positioning Scheme中3种定位模式的细节,已经通过以下几篇文章记录了我对其的理解和思考.  <CSS魔法堂:重新认识Box Model.IFC.B ...

  4. CSS魔法堂:重新认识Box Model、IFC、BFC和Collapsing margins

    前言   盒子模型作为CSS基础中的基础,曾一度以为掌握了IE和W3C标准下的块级盒子模型即可,但近日在学习行级盒子模型时发现原来当初是如此幼稚可笑.本文尝试全面叙述块级.行级盒子模型的特性.作为近日 ...

  5. CSS3与页面布局学习笔记(二)——盒子模型(Box Model)、边距折叠、内联与块标签、CSSReset

    一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...

  6. CSS3与页面布局学习总结——Box Model、边距折叠、内联与块标签、CSSReset

    目录 一.盒子模型(Box Model) 1.1.宽度测试 1.2.溢出测试 1.3.box-sizing属性 1.4.利用CSS画图 二.边距折叠 2.1.概要 2.2.垂直方向外边距合并计算 三. ...

  7. CSS 笔记三(Tables/Box Model/Outline)

    CSS Tables border border: border-width border-style border-color|initial|inherit; border-width borde ...

  8. 重新认识Box Model、IFC、BFC和Collapsing margins

    尊重原创,转载自: http://www.cnblogs.com/fsjohnhuang/p/5259121.html 肥子John^_^ 前言   盒子模型作为CSS基础中的基础,曾一度以为掌握了I ...

  9. CSS 盒子模型(Box model)中的 padding 与 margin

    本文将讲述 HTML 和 CSS 的关键—盒子模型 (Box model) .理解 Box model 的关键便是 margin 和 padding 属性,而正确理解这两个属性也是学习用 CSS 布局 ...

  10. Box model小心得

    最近在研究css~当设置一个元素width后~有时候也会对他设定padding,margin,border值, 每次这样我就心里琢磨,那这个元素的width会变吗,js获取元素的宽度width()指的 ...

随机推荐

  1. DrawerLayout 使用

    <?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.Drawe ...

  2. 第一天课程:第一个python程序print say hello

    print("Hello World") linux下要加可执行权限 chmod 755 hello.py 权限755,7=4+2+1,4是读,2是写,1是执行,第一个7代表用户, ...

  3. [UE4]判断UI动画播放方向

    使用一个变量来记录播放的方向.

  4. 必须熟练掌握的150个Linux命令

  5. int main(int argc,char* argv[])浅析

    int main(int argc,char* argv[])浅析 argc : 指输入参数个数,默认值1,就是执行程序名称 argv[] : 输入参数数组指针 举个栗子: 1. 编写一个argc.c ...

  6. JQuery 删除子元素

    删除元素/内容 如需删除元素和内容,一般可使用以下两个 jQuery 方法: remove() - 删除被选元素(及其子元素) empty() - 从被选元素中删除子元素 $("#div1& ...

  7. iOS @property语句

    @property声明的形式是: @property ( attributes ) type name; type和name的含义一目了然,attributes描述了如何编写访问器. 一.assign ...

  8. Delphi 解决Utf8ToAnsi和Utf8DeCode转换编码为空的问题

    //delphi DecodeUtf8Str解决系统自带UTF8解码缺陷 function DecodeUtf8Str(const S: UTF8String): WideString; var le ...

  9. tips:Java基本数据类型大小比较

    tips:Java基本数据类型大小比较! Java语言提供了八种基本类型.六种数字类型(四个整数型,两个浮点型),一种字符类型,还有一种布尔型. ------四个整数型------ (1)byte:b ...

  10. PS添加透明立体水印

    PS: CS2 本文我们介绍用Photoshop为图片添加透明立体水印的方法和技巧. 原图: Duplicate Layer,并输入文字: 设置Layer->Layer Style->Be ...