摘要：元素的高度文档流文档内元素流动的方向叫做文档流。块级元素高度一个元素的高宽度是由其内容决定的，不到万不得已的时候一般不要设置宽高，块级元素高度是由其内部文档流高度总和决定的，并不一定是等于，只是决定，例如设置字体是，但是它的元素高度却不是。
position定位
CSS position属性用于指定一个元素在文档中的定位方式。top，right，bottom 和 left 属性则决定了该元素的最终位置。
定位类型定位元素（positioned element）是其计算后位置属性为 relative, absolute, fixed 或 sticky 的一个元素。
相对定位元素（relatively positioned element）是计算后位置属性为 relative 的元素。
绝对定位元素（absolutely positioned element）是计算后位置属性为 absolute 或 fixed 的元素。
粘性定位元素（stickily positioned element）是计算后位置属性为 sticky 的元素。
大多数情况下，height和width 被设定为auto的绝对定位元素，按其内容大小调整尺寸。但是，被绝对定位的元素可以通过指定top和bottom ，保留height未指定（即auto），来填充可用的垂直空间。它们同样可以通过指定left 和 right并将width 指定为auto来填充可用的水平空间。
除了刚刚描述的情况（绝对定位元素填充可用空间）：
如果top和bottom都被指定（技术上，而不是auto），top 胜出。
如果指定了left 和right两侧，则在direction为ltr（英语，水平日语等）时left 赢，并且在direction为rtl时right赢（阿拉伯文，希伯来文等）。
语法position 属性被指定为从下面的值列表中选择的单个关键字。
取值static
该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。
relative
该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效。
absolute
不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。
fixed
不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform 属性非 none 时，容器由视口改为该祖先。
position: fixed;相对于屏幕定位
.topNavBar {
position: fixed;
top: 0;
left: 0;
width: 100%;
}/*相对于屏幕左上角固定
绝对定位，在子元素写position: absolute;在父元素写position: relative;
.userCard .welcome {
display: inline-block;
position: relative;
}
.userCard .welcome .triangle {
display: block;
position: absolute;
top: 100%;
left: 4px;
}/*紧贴父元素下方，在父元素从左往右4px边距
简单的几种居中
这只是暂时用到的居中方法，在后面会专门更新一篇居中
让 .xxx 子代中的内联元素居中
.xxx {text-align: center;}
div子标签水平居中
div{
margin-left:auto;
margin-right:auto;
}
div高度为30px，div标签内大小为14px字垂直居中
div{
font-size: 14px;
line-height: 30px;
}
或
div{
font-size: 14px;
line-height: 24px;
padding: 3px 0;
}
行高等于高度，或者行高加上padding等于高度，就可以使div内文字垂直居中，但是仅限于在font-size比较小的时候可以用line-height来控制内联元素所占的高度，太大就会容易出bug，如果需要一个特定的高度，可以在那基础上添加padding来增加。
元素的高度 文档流文档内元素流动的方向叫做文档流。
内联元素从左往右流动，如果宽度不够就会另起一行，汉字的话一句话有可能会从中间，但是如果是英文，css如果没有声明 word-break: break-all; 英文是不会换行的。
块级元素是从上往下流动，每个块占一行。
块级元素高度一个元素的高宽度是由其内容决定的，不到万不得已的时候一般不要设置宽高，块级元素高度是由其内部文档流高度总和决定的，并不一定是等于，只是决定，例如设置字体是100px，但是它的元素高度却不是100px。
内联元素的高度给内联元素设置宽高是无效的，设置 margin-top margin-bottom 也是无效的，内联元素的高度也是由文档流内部元素决定，居中对齐是由基线对齐的，而且由于浏览器会给不同字体一个建议的行高，这个内联元素的行高就是综合建议行高和其他相关设计来决定的。
零散知识点背景图片居中：background-position: center center;
背景图片按比例缩放：background-size: cover;
设置宽度可以设置最大宽度，这样如果屏幕变小就可以自适应。
设置display:inline block;后，外边距margin不会合并。
想要并排，先在子元素float:left;然后在所有子元素的父元素上设置clearfix，后加上伪类。
.clearfix::after {
content: "";
display: block;
clear: both;
}
做半透层背景：background-color: rgba(0,0,0,0.8);/不要颜色（黑色），半透层背景/
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/113481.html
摘要：注本文首发于个人博客学习笔记。最近看了下变量，又名自定义属性，跟大家分享一下我的学习笔记。使用自定义属性来设置变量名，并使用特定的来访问。二学习笔记声明调用声明方式变量声明的方式非常简单，如下，声明了一个名叫的变量。 注：本文首发于个人博客 《CSS Variables学习笔记》。 最近看了下CSS Variables（CSS变量，又名CSS自定义属性），跟大家分享一下我的学习笔记。 ...
摘要：指普通的规则，由选择器和属性指定构成的规则。用于跟命名空间配合的一个规则，表示内部的选择器全都带上特定命名空间。注意属性不允许使用连续的两个中划线开头，否则会被认为是变量。 笔记说明 重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入winter的专栏学习【原文有...
摘要：指普通的规则，由选择器和属性指定构成的规则。用于跟命名空间配合的一个规则，表示内部的选择器全都带上特定命名空间。注意属性不允许使用连续的两个中划线开头，否则会被认为是变量。 笔记说明 重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入winter的专栏学习【原文有...
摘要：指普通的规则，由选择器和属性指定构成的规则。用于跟命名空间配合的一个规则，表示内部的选择器全都带上特定命名空间。注意属性不允许使用连续的两个中划线开头，否则会被认为是变量。 笔记说明 重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入winter的专栏学习【原文有...
摘要：的由来就是加强版的，要讲那就一定要从讲起英文全称是一个最初由设计并由开发的层叠样式表语言。年发行，年版本稳定，设计和开发分开进行，让这个语言的功能相当完善。变量允许使用变量，所有变量以开头。 SCSS的由来 SCSS就是加强版的CSS，要讲SCSS那就一定要从SASS讲起 SASS Sass（英文全称：Syntactically Awesome Stylesheets）是一个最初由Ha...
阅读 1654·2021-09-26 09:55
阅读 5246·2021-09-22 15:40
阅读 2011·2019-08-30 15:53
阅读 1497·2019-08-30 11:15
阅读 1713·2019-08-29 15:41
阅读 1868·2019-08-28 18:13
阅读 3144·2019-08-26 12:00
阅读 1667·2019-08-26 10:30
