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. ubuntu下修改mysql默认data路径

    由于ubuntu默认的mysql路径是在/var/lib/mysql下,很多时候我们如果没有挂载其它分区在/var的时候,随着网站逐渐浏览和添加内容,数据容量也会越来越大,自然磁盘空间也会比较吃紧.因 ...

  2. IFE2017笔记

    1. jQuery.trim()方法 jQuery 杂项方法 实例 删除字符串开始和末尾的空格 2.jQuery的map方法可以批量操作数组中元素,可以替代传统在循环中处理完数据挨个push进数据的代 ...

  3. 加入域的计算机重定向到指定的OU

    在我曾经呆过一个企业里,我们使用的是AD环境,计算机加入域时,我们需要使用一个单独的加域工具,里面有需要将计算机加入到指定OU的选项.所以每次加域我们都需要找个这个工具,实现加域过程.最后我发现其实最 ...

  4. Anaconda的基本使用

  5. Maven 包含资源文件

    Maven打包时,如何包含资源文件(src/main/java | src/main/resources): 参考博客:http://blog.csdn.net/jsflzhong/article/d ...

  6. Javascript-关于break、continue、return语句

    JS-break:break语句会使运行的程序立刻退出包含在最内层的循环或者退出一个switch语句.由于它是用来退出循环或者switch语句,所以只有当它出现在这些语句时,这种形式的break语句才 ...

  7. HDFS的操作SHELL和API

    HDFS的shell操作和JavaAPI的使用: WEB WEB端口50090查看SecondaryNameNode信息.可以查看Hadoop的版本,NameNode的IP,Checkpoint等信息 ...

  8. 《linux性能及调优指南》 3.3 内存瓶颈

    摘要:3.3内存瓶颈OnaLinuxsystem,manyprogramsrunatthesametime.Theseprogramssupportmultipleusers,andsomeproce ...

  9. Android CoordinatorLayout实现多列表切换并和头布局联动;

    注意:不是双列表联动,是多列表和头布局联动: 大概就是和饿了么店铺首页类似的布局框架吧,头布局显示时,列表RecyclerView或ScrollView和头布局一起滚动,头布局完全隐藏后列表再去滚动, ...

  10. nvm+nodejs+npm

    安装nvm 1.下载nvm包,地址:https://github.com/coreybutler/nvm-windows/releases选择nvm-setup.zip下载, 解压,双击安装即可 2. ...