默认情况下,元素是如何布局?

首先,取得元素的内容,加上内边距(padding),边框(border),外边距(margin)放在一个盒子中 - 这就是我们之前看到的盒子模型

默认情况下,块级元素的内容宽度是其父元素宽度的100%,高度与其父元素相同。行内元素的高度与高度对应其内容的宽度与高度。不能设置行内元素的width与height - 它们位于块级元素的内容区。如果你想要设置行内元素的尺寸,需要将其设置为块级元素相类似的元素,可以以设置display:block这种方式实现(或者dispaly:inline-block;inline-block混合了inline与block的特性)

这解释了独立元素的布局,但是元素之间如何相互影响呢?正常布局流是一套在浏览器可视区域内放置排列元素的系统。默认情况下,块级元素是按照块出现在文档书写模式的方向放置 - 每一个块级元素出现在上一个块级元素的下一行,它们会自身设置好的margin分隔。因此,在英语,其它水平的,自上而下的书写模式中,块级元素都是垂直排列的。

行内元素的表现有所不同 - 它们不会另起一行;只要它们的父级块级元素的宽度足够,它们会与其它行内元素,相邻的文本内容出现在同一行。如果空间不够,那么溢出的文本或者行内元素就会移到新的一行。

如果相邻的两个元素都设置了margin并且两个margin有重叠,那么更大的margin被保留,小的消失 - 这种现象叫做外边距叠加

CSS布局学习(三) - Normal Flow 正常布局流(官网直译)的更多相关文章

  1. CSS布局学习(三) - position属性定义及解释(官网直译)

    static ①元素的位置是在文档正常布局流中的位置. ②设置top right bottom left与z-index无效. ③在未指定position时,static是默认值 以下例子进行说明: ...

  2. 你不知道的css各类布局(三)之自适应布局

    自适应布局 概念 自适应布局(Adaptive Layout)是对凡是有自适应特性的一类布局的统称 自适应布局使用media query来检测当前浏览器的宽度进而通过CSS样式调整页面大小.自适应布局 ...

  3. 【Tools】三款笔记本电脑硬件检测工具-官网下载

    一.CPU-Z 下载地址: https://www.cpuid.com/softwares/cpu-z.html 描述: CPU-Z已经是大名鼎鼎了.这里就不多说了.  二.Cinebench   下 ...

  4. 纯css实现div三列等高布局的最简单方法简化版/也可以多列

    使用正padding和负margin对冲实现多列布局方法 这种方法很简单,就是在所有列中使用正的上.下padding和负的上.下margin,并在所有列外面加上一个容器,并设置overflow:hid ...

  5. CSS定位的三种机制:普通流、绝对定位和浮动

    1.普通流: position : static – 元素框正常生成.即上述不对元素进行任何样式设置的默认形态. position : relative (此时设置top, right, bottom ...

  6. Knockout.Js官网学习(系列)

    1.Knockout.Js官网学习(简介) 2.Knockout.Js官网学习(监控属性Observables) Knockout.Js官网学习(数组observable) 3.Knockout.Js ...

  7. 利用HTML和CSS设计一个静态的“小米商城官网首页”

    一.小项目说明 这是个例行的小项目练习,主要利用html和css的基础知识,复刻一个缩减版的小米商城网页.包括[导航栏].[头部logo区,快捷键.搜索框].[网页主体].[网页尾部]几个部分.目前只 ...

  8. 官网英文版学习——RabbitMQ学习笔记(一)认识RabbitMQ

    鉴于目前中文的RabbitMQ教程很缺,本博主虽然买了一本rabbitMQ的书,遗憾的是该书的代码用的不是java语言,看起来也有些不爽,且网友们不同人学习所写不同,本博主看的有些地方不太理想,为此本 ...

  9. 官网安装Python包太慢?教你三种下载安装方式-PiP、conda、轮子,教你三种Pytorch的下载安装方式,保证你再也不用出现Error

    上一期我们介绍了CUDA下载安装以及其总结,这一期教大家如何在Anaconda中使用CUDA来进行加速.神经网络依赖cuDNN的下载安装,以及下载和安装Pytorch-GPU安装包的三种方式(cond ...

随机推荐

  1. scala-maven-plugin excludes

    Hello, every one. I have a problem to add excludes to scala-maven-plugin. There are two scala files: ...

  2. mac sed 使用踩坑实录

    [转自别处] 比如我sed想做文件原地的替换,但是怎么写都出错,错误提示还莫名其妙,后来多方搜索才知道Mac上的sed如果参数有-i就必须加上备份指令,即-i后添加任意字符,那些字符就作为备份文件的后 ...

  3. JAVA期末考试整理

    Technical problem: 0.read: Scanner input= new Scanner(System.in) random#: x=(int)(Math.random()*10) ...

  4. 转 Kafka、RabbitMQ、RocketMQ等消息中间件的对比 —— 消息发送性能和优势

    Kafka.RabbitMQ.RocketMQ等消息中间件的对比 —— 消息发送性能和优势 引言 分布式系统中,我们广泛运用消息中间件进行系统间的数据交换,便于异步解耦.现在开源的消息中间件有很多,前 ...

  5. Web开发——HTML基础(高级文本格式 列表/style)

    文档资料参考: 参考:https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_fo ...

  6. JMeter中的正则表达式的匹配

    ==

  7. ubuntu14安装mantis实践(包含LAMP/PHP)

    安装LAMP 参考 https://www.linuxidc.com/Linux/2016-12/138757.htm sudo add-apt-repository ppa:ondrej/apach ...

  8. HBase笔记6 过滤器

    过滤器 过滤器是GET或者SCAN时过滤结果用的,相当于SQL的where语句 HBase中的过滤器创建后会被序列化,然后分发到各个region server中,region server会还原过滤器 ...

  9. laravel----------laravel5.3调度任务以及Artisan

    1.在使用的过程中会遇到有些函数不能用需要在php配置文件里面打开: disable_functions = exec,passthru,popen,proc_open,shell_exec,syst ...

  10. Android -- 贝塞尔曲线公式的推导和简单使用

    1,最近看了几个不错的自定义view,发现里面都会涉及到贝塞尔曲线知识,深刻的了解到贝塞尔曲线是进阶自定义view的一座大山,so,今天先和大家来了解了解. 2,贝塞尔曲线作用十分广泛,简单举几个的栗 ...