CSS系列:CSS中盒子之间的关系
1. 标准文档流
标准文档流是值在不使用其他的雨排列和定位相关的特殊CSS规则时,各种元素的排列规则。
1.1 块级元素(block level)
块级元素不会排在同一行中,总是以一个块的形式表现出来,并且跟同级的块级元素依次竖直排列,左右撑满。
1.2 行内元素(inline)
行内元素本身不占用独立的区域,只在其他元素的基础上指出一定的范围。
行内元素在DOM树中同样是一个节点,从DOM的角度来看,块级元素与行内元素没有区别,都是树上的一个节点;而从CSS的角度来看,二者区别在于块级元素拥有自己的区域,行内元素则没有。
div是一个块级元素,它包围的元素会自动换行。span是一个行内元素,在它的前后不会换行。
2. 盒子在标准文档流中的定位原则
行内元素之间的水平margin,块级元素之间的数值margin。
CSS系列:CSS中盒子之间的关系的更多相关文章
- 持续集成:TestNG中case之间的关系
持续集成:TestNG中case之间的关系 poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家咨询qq: ...
- 探讨PostgreSQL实例中数据库之间的关系
疑问 前几天PG学习微信群有人在问"pg_class 存储了对象和命名空间,表空间的对应关系,为什么没有和数据库的关系?我想查数据库下面有多少对象,找不到数据库和对象的关系?" 简 ...
- Spring基础——在 IOC 容器中 Bean 之间的关系
一.在 Spring IOC 容器中 Bean 之间存在继承和依赖关系. 需要注意的是,这个继承和依赖指的是 bean 的配置之间的关系,而不是指实际意义上类与类之间的继承与依赖,它们不是一个概念. ...
- CSS系列:长度单位&字体大小的关系em rem px
em是相对长度单位.相对于当前对象内文本的字体尺寸.如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸. 任意浏览器的默认字体高都是16px.所有未经调整的浏览器都符合: 1em=1 ...
- 【前端Talkking】CSS系列——CSS深入理解之line-height
1.写在前面 两个多周的时间没有写文章了,手好痒好痒,趁着公司在装修,从上周末到本周都在家办公,同时公司的项目并不紧急,于是抽着时间梳理了一下CSS中关于行高line-height的理解,今天发布出来 ...
- HTML+CSS系列:CSS选择器(标签、ID、类、通配符、后代、子元素、并集、伪类)
一.标签选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- CSS系列目录
1. 在HTML中引入CSS的方法 2. CSS选择器 2.1 CSS3新增选择器 3. CSS的继承与层叠特性 4. CSS中盒子模型 5. CSS中盒子之间的关系 6. CSS中盒子的 ...
- CSS中width和height与盒子模型的关系
盒子模型 css中盒子模型包含属性margin.border.padding.width与height,他们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也具有这些属性,所以 ...
- 认识CSS中盒子模型
前端之HTML,CSS(六) CSS 盒子模型 CSS中的重点,理解盒子模型对于CSS才能有更清晰的认识.网页说简单一点其实就是一块一块的拼接出来的,可以想象成拼图,所有图块拼接在一起就成了一幅图像. ...
随机推荐
- nginx:文件下载指定保存文件名的配置
一般在我们上传完资源文件之后,为了避免文件名冲突,会将文件名改成毫无意义的一段字符.这个字符,可能是MD5产生的,或者是其他方式产生的字符串.这时候,下载的时候,默认保存的文件名会是这段毫无意义的文件 ...
- ECF R9(632E) & FFT
Description: 上一篇blog. Solution: 同样我们可以用fft来做...就像上次写的那道3-idoit一样,对a做k次卷积就好了. 同样有许多需要注意的地方:我们只是判断可行性, ...
- Codeforces Round #259 (Div. 2)
A. Little Pony and Crystal Mine 水题,每行D的个数为1,3.......n-2,n,n-2,.....3,1,然后打印即可 #include <iostream& ...
- linux安装oracle11g
准备oracle安装文件 Oracle11gR2包含两个文件linux_11gR2_database_1of2.zip和linux_11gR2_database_2of2.zip,将这两个文件通过SS ...
- Python框架之Tornado(二)请求阶段
概述 上图是tornado程序启动以及接收到客户端请求后的整个过程,对于整个过程可以分为两大部分: 启动程序阶段,又称为待请求阶段(上图1.2所有系列和3.0) 接收并处理客户端请求阶段(上图3系列) ...
- Linux 环境变量 设置 etc profile
一.Linux的变量种类 按变量的生存周期来划分,Linux变量可分为两类: 1.永久的:需要修改配置文件,变量永久生效. 2.临时的:使用export命令声明即可,变量在关闭shell时失效. 二. ...
- 【Beta】Daily Scrum Meeting第七次
1.任务进度 学号 已完成 接下去要做 502 发布任务到服务器 测试 509 将各api的处理逻辑放到类里面 让主api调用这些类 517 删除任务和教师的控件及逻辑 提交报课审核信息 530 完善 ...
- C代码实现数组
直接上代码,没有什么说的 # include <stdio.h> # include <malloc.h> # include <stdlib.h> //用C实现数 ...
- 关于兼容IE的一些策略
--css 盒子模型下的 box-sizing 属性,只兼容到ie8: -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o- ...
- touchstart、touchmove、touchend 实现移动端上的触屏拖拽
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...