CSS布局学习(三) - Normal Flow 正常布局流(官网直译)
默认情况下,元素是如何布局?
首先,取得元素的内容,加上内边距(padding),边框(border),外边距(margin)放在一个盒子中 - 这就是我们之前看到的盒子模型
默认情况下,块级元素的内容宽度是其父元素宽度的100%,高度与其父元素相同。行内元素的高度与高度对应其内容的宽度与高度。不能设置行内元素的width与height - 它们位于块级元素的内容区。如果你想要设置行内元素的尺寸,需要将其设置为块级元素相类似的元素,可以以设置display:block这种方式实现(或者dispaly:inline-block;inline-block混合了inline与block的特性)
这解释了独立元素的布局,但是元素之间如何相互影响呢?正常布局流是一套在浏览器可视区域内放置排列元素的系统。默认情况下,块级元素是按照块出现在文档书写模式的方向放置 - 每一个块级元素出现在上一个块级元素的下一行,它们会自身设置好的margin分隔。因此,在英语,其它水平的,自上而下的书写模式中,块级元素都是垂直排列的。
行内元素的表现有所不同 - 它们不会另起一行;只要它们的父级块级元素的宽度足够,它们会与其它行内元素,相邻的文本内容出现在同一行。如果空间不够,那么溢出的文本或者行内元素就会移到新的一行。
如果相邻的两个元素都设置了margin并且两个margin有重叠,那么更大的margin被保留,小的消失 - 这种现象叫做外边距叠加
CSS布局学习(三) - Normal Flow 正常布局流(官网直译)的更多相关文章
- CSS布局学习(三) - position属性定义及解释(官网直译)
static ①元素的位置是在文档正常布局流中的位置. ②设置top right bottom left与z-index无效. ③在未指定position时,static是默认值 以下例子进行说明: ...
- 你不知道的css各类布局(三)之自适应布局
自适应布局 概念 自适应布局(Adaptive Layout)是对凡是有自适应特性的一类布局的统称 自适应布局使用media query来检测当前浏览器的宽度进而通过CSS样式调整页面大小.自适应布局 ...
- 【Tools】三款笔记本电脑硬件检测工具-官网下载
一.CPU-Z 下载地址: https://www.cpuid.com/softwares/cpu-z.html 描述: CPU-Z已经是大名鼎鼎了.这里就不多说了. 二.Cinebench 下 ...
- 纯css实现div三列等高布局的最简单方法简化版/也可以多列
使用正padding和负margin对冲实现多列布局方法 这种方法很简单,就是在所有列中使用正的上.下padding和负的上.下margin,并在所有列外面加上一个容器,并设置overflow:hid ...
- CSS定位的三种机制:普通流、绝对定位和浮动
1.普通流: position : static – 元素框正常生成.即上述不对元素进行任何样式设置的默认形态. position : relative (此时设置top, right, bottom ...
- Knockout.Js官网学习(系列)
1.Knockout.Js官网学习(简介) 2.Knockout.Js官网学习(监控属性Observables) Knockout.Js官网学习(数组observable) 3.Knockout.Js ...
- 利用HTML和CSS设计一个静态的“小米商城官网首页”
一.小项目说明 这是个例行的小项目练习,主要利用html和css的基础知识,复刻一个缩减版的小米商城网页.包括[导航栏].[头部logo区,快捷键.搜索框].[网页主体].[网页尾部]几个部分.目前只 ...
- 官网英文版学习——RabbitMQ学习笔记(一)认识RabbitMQ
鉴于目前中文的RabbitMQ教程很缺,本博主虽然买了一本rabbitMQ的书,遗憾的是该书的代码用的不是java语言,看起来也有些不爽,且网友们不同人学习所写不同,本博主看的有些地方不太理想,为此本 ...
- 官网安装Python包太慢?教你三种下载安装方式-PiP、conda、轮子,教你三种Pytorch的下载安装方式,保证你再也不用出现Error
上一期我们介绍了CUDA下载安装以及其总结,这一期教大家如何在Anaconda中使用CUDA来进行加速.神经网络依赖cuDNN的下载安装,以及下载和安装Pytorch-GPU安装包的三种方式(cond ...
随机推荐
- SQL Server 2008作业失败:无法确定所有者是否有服务器访问权限
转自:http://www.mzwu.com/article.asp?id=3592 下午准备将服务器数据导一份到本地,连上服务器找数据库备份文件发现最后一次备份是7月1日,竟然十几天没生成新备份,查 ...
- Java中Integer和int的异同
public void Test1() { int a = 128; Integer b = 128; Integer c = 128; //Integer会自动拆箱成int,所以为ture Syst ...
- java Int 和 String 之间的转换
String 转换成 int Integer.parseInt(formParams.get("id")) int 转换成 string Integer.toString(id);
- grpc,protoc, protoc-gen-go,rust
Rust 与服务端编程的碎碎念https://zhuanlan.zhihu.com/p/30028047 GRPC:golang使用protobuf https://segmentfault.com/ ...
- Windows 10 家庭版/专业版 彻底关闭windows update自动更新
转载: https://blog.csdn.net/u014162133/article/details/84973426# https://blog.csdn.net/qq_40820862/art ...
- 【数据可视化-Echarts】Echart基础
林峰老师Echart基础课程笔记
- 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 ...
- Cocos 2dx项目lua调用OC出现卡死但不闪退的坑
最近新上线的一个游戏,发现线上游戏有部分功能在点击的时候出现了没有反应的情况.通过调试源码,发现是原生OC的代码出现了崩溃,但是比较奇怪的是线上的Bugly没有任何记录,这个功能属于高频高能,而且又是 ...
- java之项目构建工具Gradle
介绍 Java 作为一门世界级主流编程语言,有一款高效易用的项目管理工具是 java 开发者共同追求的心愿和目标.显示 2000 年的 Ant,后有 2004 年的 Maven 两个工具的诞生,都在 ...
- 3.1.2 Spring之IoC
二.Spring之IoC 1. IoC与DI (1) IoC 控制反转( IoC, Inversion of Control) , 是一个概念, 是一种思想. 控制反转就是对对象控制权的转移, 从程序 ...