css排版之-标准文档流
标准流指的是在不使用其他的与排列和定位相关的特殊CSS规则时,各种元素的排列规则。HTML文档中的元素可以分为两大类:行内元素和块级元素。
1.行内元素不占据单独的空间,依附于块级元素,行内元素没有自己的区域。它同样是DOM树中的一个节点,在这一点上行内元素和块级元素是没有区别的。
2.块级元素总是以块的形式表现出来,并且跟同级的兄弟块依次竖直排列,左右自动伸展,直到包含它的元素的边界,在水平方向不能并排。
盒子在标准流中的定位原则
margin控制的是盒子与盒子之间的距离,padding存在于盒子的内部它不涉及与其他盒子之间的关系和相互影响问题,因此要精确控制盒子的位置,就必须对margin有更深入的了解。下面分四种情况对margin调整盒子的位置进行解说。
1.行内元素之间的水平margin
当两个行内元素紧邻时,它们之间的距离为第一个元素的右margin加上第二元素的左margin。
2.块级元素之间的竖直margin
两个竖直排列的块级元素,它们之间的垂直距离不是上边的第一个元素的下margin和第二个元素的上margin的总和,而是两者中的较大者。这在实际制作网页的时候要特别注意。
3.嵌套盒子之间的margin
这时子块的margin以父块的content为参考进行排列
4.margin设为负值
会使设为负数的块向相反的方向移动,甚至会覆盖在另外的块上。
css排版之-标准文档流的更多相关文章
- CSS层叠的问题、标准文档流、伪类选择器
一.层叠的问题 CSS有两个性质: 1.继承性 2.层叠性:选择器的一种选择能力,谁的权重大就选谁 层叠性又分为: 1).选不中:走继承性 (font.color.text.) 继承性的权重是0 若 ...
- css标准文档流
css标准文档流 所谓的标准文档流指的是网页当中的一个渲染顺序,就如同人类读书一样,从上向下,从左向右.网页的渲染顺序也是如此.而我们使用的标签默认都是存在于标准文档流当中. 标准文档流当中的特性 空 ...
- CSS标准文档流 块级元素和行内元素
标准文档流 什么是标准文档流 宏观的将,我们的web页面和ps等设计软件有本质的区别,web 网页的制作,是个“流”,从上而下 ,像 “织毛衣”.而设计软件 ,想往哪里画东西,就去哪里画 空白折叠现象 ...
- 前端css盒模型及标准文档流及浮动问题
1.盒模型 "box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和IE模型.这里重 ...
- 浅谈,html\css脱离标准文档流相关
(个人知识有限,难免有误,请见谅) 标准文档流,顾名思义,是要按照一定规矩排列的,默认的就是元素会从左至右,从上至下排列,块级会独占一行,行内元素会和小伙伴们共享一行. 本来在标准文档流下,各个元素相 ...
- Unit 6.标准文档流,浮动,清除浮动以及margin塌陷问题
一. 什么是标准文档流 文本流其实就是文档的读取和输出顺序,也就是我们通常看到的由左到右.由上而下的读取和输出形式,在网页中每个元素都是按照这个顺序进行排序和显示的,而float和position两个 ...
- 页面标准文档流、浮动层、float属性(转)
CSS float 浮动属性介绍 float属性:定义元素朝哪个方向浮动. 1.页面标准文档流.浮动层.float属性 1.1 文档流 HTML页面的标准文档流(默认布局)是:从上到下,从左到右,遇块 ...
- python全栈开发 * 继承性 层叠性 盒模型 标准文档流 * 180809
---恢复内容开始--- 一继承性 1.继承: 给父级设置一些属性,子级继承了父级的该属性,这就是我们的css中的继承. 2. 可继承: color . font-*(size). text-*(de ...
- day 41 标准文档流 浮动
一.标准文档流 什么是标准文档流 宏观的将,我们的web页面和ps等设计软件有本质的区别,web 网页的制作,是个“流”,从上而下 ,像 “织毛衣”.而设计软件 ,想往哪里画东西,就去哪里画 标准文档 ...
随机推荐
- [device tree] interrupt
Specifying interrupt information for devices ============================================ 1) Interru ...
- monkey测试===Monkey测试结果分析(系列三)转
Monkey测试结果分析 一. 初步分析方法: Monkey测试出现错误后,一般的差错步骤为以下几步: 1. 找到是monkey里面的哪个地方出错 2. 查看Monkey里面出错前的一些事件动作,并手 ...
- MyBatis 模糊查询 防止Sql注入
#{xxx},使用的是PreparedStatement,会有类型转换,所以比较安全: ${xxx},使用字符串拼接,可以SQL注入: like查询不小心会有漏洞,正确写法如下: Mysql: ...
- Django Ajax学习二之文件上传
基于Django实现文件上传 1. url路由配置 路径:C:\Users\supery\Desktop\day82\demo_ajax\demo_ajax\urls.py from django.c ...
- redis之(十六)redis的cluster集群环境的搭建,转载
最近redis已经比较火了,有关redis的详细介绍,网上有一大堆,我这里只作简单的介绍,然后跟大家一起学习Redis Cluster 3.0的搭建与使用.Redis是一款开源的.网络化的.基于内存的 ...
- 洛谷 P2680 运输计划-二分+树上差分(边权覆盖)
P2680 运输计划 题目背景 公元 20442044 年,人类进入了宇宙纪元. 题目描述 公元20442044 年,人类进入了宇宙纪元. L 国有 nn 个星球,还有 n-1n−1 条双向航道,每条 ...
- POJ 1182 食物链 【带权并查集/补集法】
动物王国中有三类动物A,B,C,这三类动物的食物链构成了有趣的环形.A吃B, B吃C,C吃A. 现有N个动物,以1-N编号.每个动物都是A,B,C中的一种,但是我们并不知道它到底是哪一种.有人用两种说 ...
- 2015 ACM-ICPC 沈阳站
题目链接 2015 ACM-ICPC Shenyang Problem A Problem B Problem C Problem D 签到题,所有gcd的倍数都可以被写出来. 那么判断一下这类数的 ...
- 洛谷P1955 [NOI2015] 程序自动分析 [并查集,离散化]
题目传送门 题目描述 在实现程序自动分析的过程中,常常需要判定一些约束条件是否能被同时满足. 考虑一个约束满足问题的简化版本:假设x1,x2,x3...代表程序中出现的变量,给定n个形如xi=xj或x ...
- 洛谷P3197 HNOI2008 越狱
题目传送门 实际上昨天大鸡哥已经讲过这题了,结果没记住,今天一道相似的题就挂了......吃一堑长一智啊. 思路大致是这样:如果直接算发生越狱的情况会比较复杂,所以可以用间接法,用安排的总方案-不会发 ...