标准流指的是在不使用其他的与排列和定位相关的特殊CSS规则时,各种元素的排列规则。HTML文档中的元素可以分为两大类:行内元素和块级元素。
       1.行内元素不占据单独的空间,依附于块级元素,行内元素没有自己的区域。它同样是DOM树中的一个节点,在这一点上行内元素和块级元素是没有区别的。
       2.块级元素总是以块的形式表现出来,并且跟同级的兄弟块依次竖直排列,左右自动伸展,直到包含它的元素的边界,在水平方向不能并排。
盒子在标准流中的定位原则
margin控制的是盒子与盒子之间的距离,padding存在于盒子的内部它不涉及与其他盒子之间的关系和相互影响问题,因此要精确控制盒子的位置,就必须对margin有更深入的了解。下面分四种情况对margin调整盒子的位置进行解说。
1.行内元素之间的水平margin
当两个行内元素紧邻时,它们之间的距离为第一个元素的右margin加上第二元素的左margin。
2.块级元素之间的竖直margin
两个竖直排列的块级元素,它们之间的垂直距离不是上边的第一个元素的下margin和第二个元素的上margin的总和,而是两者中的较大者。这在实际制作网页的时候要特别注意。
3.嵌套盒子之间的margin
这时子块的margin以父块的content为参考进行排列
4.margin设为负值
会使设为负数的块向相反的方向移动,甚至会覆盖在另外的块上。

css排版之-标准文档流的更多相关文章

  1. CSS层叠的问题、标准文档流、伪类选择器

    一.层叠的问题 CSS有两个性质: 1.继承性 2.层叠性:选择器的一种选择能力,谁的权重大就选谁 层叠性又分为: 1).选不中:走继承性  (font.color.text.) 继承性的权重是0 若 ...

  2. css标准文档流

    css标准文档流 所谓的标准文档流指的是网页当中的一个渲染顺序,就如同人类读书一样,从上向下,从左向右.网页的渲染顺序也是如此.而我们使用的标签默认都是存在于标准文档流当中. 标准文档流当中的特性 空 ...

  3. CSS标准文档流 块级元素和行内元素

    标准文档流 什么是标准文档流 宏观的将,我们的web页面和ps等设计软件有本质的区别,web 网页的制作,是个“流”,从上而下 ,像 “织毛衣”.而设计软件 ,想往哪里画东西,就去哪里画 空白折叠现象 ...

  4. 前端css盒模型及标准文档流及浮动问题

    1.盒模型 "box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和IE模型.这里重 ...

  5. 浅谈,html\css脱离标准文档流相关

    (个人知识有限,难免有误,请见谅) 标准文档流,顾名思义,是要按照一定规矩排列的,默认的就是元素会从左至右,从上至下排列,块级会独占一行,行内元素会和小伙伴们共享一行. 本来在标准文档流下,各个元素相 ...

  6. Unit 6.标准文档流,浮动,清除浮动以及margin塌陷问题

    一. 什么是标准文档流 文本流其实就是文档的读取和输出顺序,也就是我们通常看到的由左到右.由上而下的读取和输出形式,在网页中每个元素都是按照这个顺序进行排序和显示的,而float和position两个 ...

  7. 页面标准文档流、浮动层、float属性(转)

    CSS float 浮动属性介绍 float属性:定义元素朝哪个方向浮动. 1.页面标准文档流.浮动层.float属性 1.1 文档流 HTML页面的标准文档流(默认布局)是:从上到下,从左到右,遇块 ...

  8. python全栈开发 * 继承性 层叠性 盒模型 标准文档流 * 180809

    ---恢复内容开始--- 一继承性 1.继承: 给父级设置一些属性,子级继承了父级的该属性,这就是我们的css中的继承. 2. 可继承: color . font-*(size). text-*(de ...

  9. day 41 标准文档流 浮动

    一.标准文档流 什么是标准文档流 宏观的将,我们的web页面和ps等设计软件有本质的区别,web 网页的制作,是个“流”,从上而下 ,像 “织毛衣”.而设计软件 ,想往哪里画东西,就去哪里画 标准文档 ...

随机推荐

  1. python基础===isinstance() 函数,判断一个对象是否是一个已知的类型

    isinstance(object, classinfo) object -- 实例对象. classinfo -- 可以是直接或间接类名.基本类型或者有它们组成的元组. >>>a ...

  2. 【NOIP2016】补题

    今天突然想到自己居然还没把NOIP2016补完 简直是傻逼... 所以开始写 D1T1:模拟 D1T2:NOIP最难的一道题,首先求LCA 离线下,把观察员单独提出来 然后可以维护一个类似桶排序的东西 ...

  3. C 实现一个简易的Http服务器 (二)

    正文 - 直接搞起 C 实现一个简易的Http服务器 很久以前写过一个简易的http服务器, 后面和一个朋友交流, 反思后发现问题不少.在这里简单搞一下. 让其更加简单去表现httpd本质, 弱化协议 ...

  4. caffe Python API 之激活函数ReLU

    import sys import os sys.path.append("/projects/caffe-ssd/python") import caffe net = caff ...

  5. python--数据持久化

    python中与数据持久化有关的模块有很多,像pickle.json之类的就不介绍了,这里介绍两个其他的模块:dbm和shelve 1.dbm ''' 在一些小型程序中,不需要关系型数据库时,可以方便 ...

  6. git清除用户名密码

    问题: remote: HTTP Basic: Access deniedfatal: Authentication failed for 'http://******** 解决方案: git con ...

  7. JQUERY 提取多个元素 a img 的 src href

    <div class="abc"><a href="1.html"><img src="1.jpg"/> ...

  8. Python VUE 基础知识

    一 什么是VUE 它是一个构建用户界面的JavaScript框架,自动生成(js,css,HTML文件) 二 如何使用VUE 1.  应用vues.js <script src="vu ...

  9. mysql5.7 ERROR 1819 (HY000): Your password does not satisfy the current policy requirements

    mysql5.7初次登录使用提示 ERROR 1820 (HY000): You must reset your password using ALTER USER statement before ...

  10. Java学习笔记(一)——关于java中的String类

    [前面的话] 毕业将近6个月了,试用期也快要过去了,期待接下来的日子.在金融类性质的机构,最痛苦的是也许就是大部分系统外包,所以比较少写代码,在这六个月中只写了1个月左右的代码,然后每天都在做一些比较 ...