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

首先,取得元素的内容,加上内边距(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. SQL Server 2008作业失败:无法确定所有者是否有服务器访问权限

    转自:http://www.mzwu.com/article.asp?id=3592 下午准备将服务器数据导一份到本地,连上服务器找数据库备份文件发现最后一次备份是7月1日,竟然十几天没生成新备份,查 ...

  2. Java中Integer和int的异同

    public void Test1() { int a = 128; Integer b = 128; Integer c = 128; //Integer会自动拆箱成int,所以为ture Syst ...

  3. java Int 和 String 之间的转换

    String 转换成 int Integer.parseInt(formParams.get("id")) int 转换成 string Integer.toString(id);

  4. grpc,protoc, protoc-gen-go,rust

    Rust 与服务端编程的碎碎念https://zhuanlan.zhihu.com/p/30028047 GRPC:golang使用protobuf https://segmentfault.com/ ...

  5. Windows 10 家庭版/专业版 彻底关闭windows update自动更新

    转载: https://blog.csdn.net/u014162133/article/details/84973426# https://blog.csdn.net/qq_40820862/art ...

  6. 【数据可视化-Echarts】Echart基础

    林峰老师Echart基础课程笔记

  7. Java连接MySQL报出警告 WARN: Establishing SSL connection without server's identity verification is not recommended.

    很多人使用JDBC连接MySQL时报出警告: WARN: Establishing SSL connection without server's identity verification is n ...

  8. Cocos 2dx项目lua调用OC出现卡死但不闪退的坑

    最近新上线的一个游戏,发现线上游戏有部分功能在点击的时候出现了没有反应的情况.通过调试源码,发现是原生OC的代码出现了崩溃,但是比较奇怪的是线上的Bugly没有任何记录,这个功能属于高频高能,而且又是 ...

  9. java之项目构建工具Gradle

    介绍 Java 作为一门世界级主流编程语言,有一款高效易用的项目管理工具是 java 开发者共同追求的心愿和目标.显示 2000 年的 Ant,后有 2004 年的 Maven 两个工具的诞生,都在 ...

  10. 3.1.2 Spring之IoC

    二.Spring之IoC 1. IoC与DI (1) IoC 控制反转( IoC, Inversion of Control) , 是一个概念, 是一种思想. 控制反转就是对对象控制权的转移, 从程序 ...