文本垂直操作：vertical-align的使用图示。middle设置居中。 vertical-align 只对行内元素、行内块元素和表格单元格（table-cell）元素生效：不能用它垂直对齐块级元素。
英文 | https://javascript.plainenglish.io/4-key-css-properties-explained-in-4-minutes-9567d1b5af86
1、浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响? 浮动元素：浮动元素的框可以向左或者向右移动，直到它的外边缘碰到父元素包含框或者另一个浮动元素的边框为止；浮动元素不在文档
css在前端的学习中是一个绕不过去的课题，他决定如何显示的你网页内容，初学css你也许会觉得它很容易，无非就是控制元素的位置，大小，颜色等等表现层面的东西，但当你真正使用它去做一些事前的时候，往往会出现无处下抓的现象，这么多属性，我该使用哪个属性来实现想要的效果呢，更有时候自己以为的效果跟实际出来的效果又有很大差异，有人说css是感性的，确实，它不像javasctipt这种有很强逻辑性的语言，它的很多特性毫无逻辑可以，你只能试出来，从这个角度而言，其实css是很难学的，你需要积累很多很多的场景，才能说可以灵活的使用css，这篇文章就css中最常见的场景---布局，介绍一下集中常见的布局方法。
从这一篇开始，将要介绍 CSS 中最重要的两个知识 - 浮动和定位。 前面几篇关于 CSS 的知识，只是讲解了一个元素作为一个个体时的样式，从这篇布局内容开始，将要介绍多个元素放在一起，从总体角度确定每个元素的位置。 布局分类:
固定定位 是 固定在屏幕中的某个位置 , 即使拖动滚动条 , 固定定位的元素仍然保持位置不变 ;
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/166621.html原文链接：https://javaforall.cn
默认情况下，块级元素的内容宽度就是父元素宽的 100%，且与其内容一样高。内联元素的宽高与内容宽高一样。不能对内联元素设置宽度或高度——它们只是位于块级元素的内容中。如果要以这种方式控制内联元素的大小，则需要将其设置为类似块级元素 display: block。
对 CSS 布局掌握程度决定你在Web开发中的开发页面速度。随着Web技术的不断革新，实现各种布局的方式已经多得数不胜数了。
文档流（定位流，普通流，浮动流） 1、普通流定位 static（默认方式） 普通流定位，又称为文档流定位，是页面元素的默认定位方式 页面中的块级元素：按照从上到下的方式逐个排列 页面中的行内元素：按照
BFC 就是块级格式上下文，是页面盒模型布局中的一种 CSS 渲染模式，相当于一个独立的容器，里面的元素和外部的元素相互不影响。那么首先先来说一下常见的三种控制布局的定位方案
注意：绝大多数情况下，相对定位，会与绝对定位配合使用。 **原因：**绝对定位的元素（即设置了 position: absolute; 的元素）相对于其最近的一个已定位的祖先元素进行定位。如果没有已定位的祖先元素，它将相对于浏览器窗口（即 body 元素）进行定位。 通过将父元素设置为相对定位（position: relative;），而将子元素设置为绝对定位（position: absolute;），可以使子元素的定位基于父元素，而不是整个页面。这使得布局更具可控性和可预测性。
默认情况下，HTML元素都在标准流中呈现和展示。我们之前把元素分为块级元素，行内元素，行内块级元素，他们的特性是块级独占一行，行内和行内块级可以在一行内共存，这些特性都是针对标准流的。总结一下就是，标准流中元素只能在水平或垂直方向上排版。如果元素是块级元素, 那么就会垂直排版，如果元素是行内元素/行内块级元素, 那么就会水平排版。
这12个问题，基本上就是HTML和CSS基础中的重点个难点了，也是必须要弄清楚的基本问题，其中定位的绝对定位和相对定位到底相对什么定位？这个还是容易被忽视的，浮动也是一个大坑，有很多细节。
行内块级元素: 行内块级元素显示会与其他相邻元素出现在同一行, 并且两个相邻元素之间存在空白空间. 例如<Button>标签
首先 , 设置固定定位 , 固定定位盒子始终显示在浏览器中指定的位置 , 与父容器或其它容器无关 ;
CSS中position属性是比较常用的元素定位方案，position常用的取值有static、relative、absolute、fixed、sticky、inherit。
做前端的同学，肯定非常熟悉 CSS 的 position 属性，它用于指定一个元素在文档中的定位方式。top，right，bottom 和 left 属性则决定了该元素的位置。
版权声明：本文为博主原创文章，欢迎转载，转载请注明出处。 https://blog.csdn.net/FE_dev/article/details/68954481
无依赖绝对定位元素可以使用margin值进行定位，实现脱离文档流的相对定位效果，脱离文档流可以解决溢出限制的问题
标准文档流 指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的 流式排列方式 。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。
块级元素在普通文档流中独占一行，可设置宽高宽度默认是父级100%，内外边距，可容纳其他元素。
带!important 标记的样式属性优先级最高； 样式表的来源相同时： !important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
imgfixed：元素的定位是相对于 window （或者 iframe）边界的，和其他元素没有关系。但是它具有破坏性，会导致其他元素位置的变化。
背景图片定位的值可以是应为left,right,top,bottom,center
一般来说，我们不需要特别声明它，但有时当我们遇到继承时，我们不愿意看到元素继承的属性影响本身，所以我们可以使用Position:static取消继承，即恢复元素定位的默认值。设置为static的元素总是位于页面流给出的位置(static元素会忽略任何top、bottom、left或right声明)。一般不常用。
（注1：如果有问题欢迎留言探讨，一起学习！转载请注明出处，喜欢可以点个赞哦！） （注2：更多内容请查看我的目录。）
静态定位是所有元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。 所谓静态位置就是各个元素在HTML文档流中默认的位置。
2020年，是个不平凡的一年，因为疫情的蔓延打乱了我的全盘计划。但在工作中，完成了目标项目、攻克了技术难关、学习了新的技术，也感谢平台！
上述 父容器 的定位 不一定是 绝对定位 , 其它类型的定位也可以 , 在本博客的示例中 , 使用的就是 相对定位 ;
我们经常使用元素的width:100%和height:100%将元素的宽度和高度扩充至父元素的宽度和高度。但是前提是需要对其父元素显示设置宽度和高度，否则无效。
众所周知，前端内容多而杂，经过查阅各种资料，总结了一些知识点，以备后续复习使用。文章分为上（html，css）中(js)下(vue)三部分。
生成绝对定位的元素，其相对于 static 定位以外的第一个父元素进行定位,会脱离normal flow。注意：是除了static外
简要介绍：前端开发中，静态网页通常需要适应不同分辨率的设备，常用的自适应解决方案包括媒体查询、百分比、rem和vw/vh等。本文从px单位出发，分析了px在移动端布局中的不足，接着介绍了几种不同的自适应解决方案。
“理论不懂就实践，实践不会就学理论”，非常赞同bluedavy的这句话。实践过程中经常会遇到某个属性的使用，浏览器渲染效果与预期效果不符，虽然通过死记硬背能避免或巧妙应用这种效果，但总感心虚发慌、毫无自信，因为不知晓背后的原理。这时就不要再用“就是这样的”的借口来搪塞自己，我们需要重新认识它。 实践与现象 绝对定位是一种常用的定位方式，也经常会看到一些使用技巧，轻松搞定一些不太容易实现的效果。现介绍两个绝对定位的使用技巧： 1. 绝对定位元素，水平方向（top和bottom）或和垂直方向（left和righ
大家都知道，position:fixed 在日常的页面布局中非常常用，在许多布局中起到了关键的作用。它的作用是： position:fixed 的元素将相对于屏幕视口（viewport）的位置来指定其
2020年，是个不平凡的一年，因为疫情的蔓延打乱了我的全盘计划。但是这也让我和云+社区一起共同努力，在工作中，完成了目标项目、攻克了技术难关、学习了新的技术，也感谢腾讯云+社区的平台！
:nth-child 只计算父元素的第几个子元素 ,不管是否是同种类型,也不会排除干扰项.
网页布局中，我们是如何把里面的文字，图片，按照美工给我们的效果图排列的整齐有序呢？
说起CSS单位，我们最熟悉的可能就是像素单位（px），它是一个绝对单位，也就是说一个10px的文字，放在哪里都是一样大的。单位可以影响颜色、距离、尺寸等一系列的属性。CSS中单位的形式有很多种，下面就分别来看看这些单位。
对于IE5.x和6来说，在怪异模式中width等于content、左右padding和左右border。
标准流在最底层 (海底) ------- 浮动 的盒子 在 中间层 (海面) ------- 定位的盒子 在 最上层 （天空）
“理论不懂就实践，实践不会就学理论”，非常赞同bluedavy的这句话。实践过程中经常会遇到某个属性的使用，浏览器渲染效果与预期效果不符，虽然通过死记硬背能避免或巧妙应用这种效果，但总感心虚发慌、毫无自信，因为不知晓背后的原理。这时就不要再用“就是这样的”的借口来搪塞自己，我们需要重新认识它。
CSS属性书写顺序 布局定位属性：display / position / float / clear / visibility / overflow 自身属性：width / height / margin / padding / border / background 文本属性：color / font / text-decoration / text-align / vertical-align / white-space / break 其他属性：content / cursor /border-r
position属性取值：static(默认)、relative、absolute、fixed、inherit、sticky。 float属性取值：none(默认)、left、right、inherit。 display属性取值：none、inline、inline-block、block、table相关属性值、inherit。 固定定位 fixed： 元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。Fixed 定 位使元素的位置与文档流无关，因此不占据空间。 Fixed 定位的元素和其他元素重叠。（脱离文档流） 相对定位 relative： 如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直 或水平位置，让这个元素“相对于”它的起点进行移动。 在使用相对定位时，无论是 否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。 绝对定位 absolute： 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那 么它的位置相对于 。absolute 定位使元素的位置与文档流无关，因此不占据空间。absolute 定位的元素和其他元素重叠。（脱离文档流） 粘性定位 sticky： 元素先按照普通文档流定位，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。而后，元素定位表现为在跨越特定阈值前为相对定 位，之后为固定定位。 默认定位 Static： 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声 明）。 inherit: 规定应该从父元素继承 position 属性的值。
CSS定位属性允许你为一个元素定位。它也可以将一个元素放在另一个元素后面，并指定一个元素的内容太大时，应该发生什么。
很多人认为页面页脚部分不就是用footer主义化标签包起来嘛，然而不然；如果你足够细心的话就会发现当我们页面中主体内容不够多的时候会发生这样的情况：
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
