1. 标准文档流

  标准文档流是值在不使用其他的雨排列和定位相关的特殊CSS规则时,各种元素的排列规则。

1.1 块级元素(block level)

  块级元素不会排在同一行中,总是以一个块的形式表现出来,并且跟同级的块级元素依次竖直排列,左右撑满。

1.2 行内元素(inline)

  行内元素本身不占用独立的区域,只在其他元素的基础上指出一定的范围。

  行内元素在DOM树中同样是一个节点,从DOM的角度来看,块级元素与行内元素没有区别,都是树上的一个节点;而从CSS的角度来看,二者区别在于块级元素拥有自己的区域,行内元素则没有。

  div是一个块级元素,它包围的元素会自动换行。span是一个行内元素,在它的前后不会换行。

2. 盒子在标准文档流中的定位原则

  行内元素之间的水平margin,块级元素之间的数值margin。

CSS系列:CSS中盒子之间的关系的更多相关文章

  1. 持续集成:TestNG中case之间的关系

    持续集成:TestNG中case之间的关系   poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家咨询qq: ...

  2. 探讨PostgreSQL实例中数据库之间的关系

    疑问 前几天PG学习微信群有人在问"pg_class 存储了对象和命名空间,表空间的对应关系,为什么没有和数据库的关系?我想查数据库下面有多少对象,找不到数据库和对象的关系?" 简 ...

  3. Spring基础——在 IOC 容器中 Bean 之间的关系

    一.在 Spring IOC 容器中 Bean 之间存在继承和依赖关系. 需要注意的是,这个继承和依赖指的是 bean 的配置之间的关系,而不是指实际意义上类与类之间的继承与依赖,它们不是一个概念. ...

  4. CSS系列:长度单位&字体大小的关系em rem px

    em是相对长度单位.相对于当前对象内文本的字体尺寸.如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸. 任意浏览器的默认字体高都是16px.所有未经调整的浏览器都符合: 1em=1 ...

  5. 【前端Talkking】CSS系列——CSS深入理解之line-height

    1.写在前面 两个多周的时间没有写文章了,手好痒好痒,趁着公司在装修,从上周末到本周都在家办公,同时公司的项目并不紧急,于是抽着时间梳理了一下CSS中关于行高line-height的理解,今天发布出来 ...

  6. HTML+CSS系列:CSS选择器(标签、ID、类、通配符、后代、子元素、并集、伪类)

    一.标签选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  7. CSS系列目录

    1.  在HTML中引入CSS的方法 2.  CSS选择器 2.1 CSS3新增选择器 3.  CSS的继承与层叠特性 4.  CSS中盒子模型 5.  CSS中盒子之间的关系 6.  CSS中盒子的 ...

  8. CSS中width和height与盒子模型的关系

    盒子模型 css中盒子模型包含属性margin.border.padding.width与height,他们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也具有这些属性,所以 ...

  9. 认识CSS中盒子模型

    前端之HTML,CSS(六) CSS 盒子模型 CSS中的重点,理解盒子模型对于CSS才能有更清晰的认识.网页说简单一点其实就是一块一块的拼接出来的,可以想象成拼图,所有图块拼接在一起就成了一幅图像. ...

随机推荐

  1. DB Scan算法的分析与实现

    摘自:http://www.cnblogs.com/weixliu/archive/2012/12/08/2808815.html 根据上面第二个数据集的簇的形状比较怪异,分簇结果应该是连起来的属于一 ...

  2. bzoj1266最短路+最小割

    本来写了spfa wa了 看到网上有人写Floyd过了 表示不开心 ̄へ ̄ 改成Floyd试试... 还是wa ヾ(。`Д´。)原来是建图错了(样例怎么过的) 结果T了 于是把Floyd改回spfa 还 ...

  3. 【总结】C# 设置委托的机理和简要步骤

    [引语]实际上,和Winform打交道的第一天呢,我们就已经接触了委托,例如当双击button产生button1_click,这个呢,是对button1点击事件的处理方法,至于委托和订阅事件,就悄悄的 ...

  4. 软件工程:黄金G点小游戏1.0

    我们要做的是黄金G点小游戏: N个同学(N通常大于10),每人写一个0~100之间的有理数 (不包括0或100),交给裁判,裁判算出所有数字的平均值,然后乘以0.618(所谓黄金分割常数),得到G值. ...

  5. js中创建对象的三种方式

    1. 对象字面量 var obj={ name:"小小", age:3, car:{ brand:"baoma", } }; } 2.使用内置构造函数 var ...

  6. 初次接触nodejs,请多指教。

    一  安装nodejs 1.下载node.js.在http://nodejs.org/download/下载最新版的node.exe文件,我下载时是v0.10.33.下载完成后,在F盘新建nodejs ...

  7. webform 光棒效果,删除操作弹出确定取消窗口

    鼠标移入onmouseover和鼠标移出onmouseout,代码里没大写我这也就不大写了.那首先,我们得获取Class为tr_item里的所有东西,也就是项标签里的数据.然后呢,我们定义一个oldC ...

  8. java web(七)Cookie的简单使用

    一.概述 测试 //1.创建一个Cookie对象    //Cookie cookie1=new Cookie("name","xrk");    //2.调用 ...

  9. Flume_企业中日志处理

    企业中的日志存放_1 201611/20161112.log.tmp 第二天文件变为20161112.log与20161113.log.tmp 拷贝一份flume-conf.properties.te ...

  10. Python实战 :2017国考职业表excel转数据库,再查询生成excel

    最近看2017年国考的职业表,多而杂,不好过滤我想要的信息,特此把它转成Sqlite3数据库,再从数据库里把查询结果导出成excel,方便找职业. (后附上整套代码) 环境:python2.7   x ...