一、CSS文档流
CSS 有三种基本的定位机制：普通流、浮动流、定位流。
1、普通：上下排列的布局
2、浮动：左右排列布局的时候
3、定位：层叠（叠加）排列布局（注：大部分情况）
定位属性：position：检索或设置对象的定位方式
1、static：默认值；没有定位效果；（可以用于取消元素之前的定位设置）
2、relative：相对定位（参照物：自己所在的位置）
特点：如果没有定位偏移量，对元素本身没有任何影响
不使元素脱离文档流，空间是会被保留。
不影响其它元素布局
left、top、right、bottom是相对于当前元素自身进行偏移的，不能独立存在，必须配合定位元素一起使用
3、absolute：绝对定位（参照物：包含块–该元素的祖先级元素）
使元素完全脱离文档
使用内联元素支持宽高（让内联具备块特性）
使块元素默认宽根据内容决定（让块具备内联的特性）
如果有定位的祖先元素相对定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移（绝对、相对、固定）
注：如果祖先元素中有多个元素具备定位模式，那么是离自己最近的祖先元素进行偏移。
注：默认情况下是相对可视窗口进行定位的。
绝对定位元素会根据包含块进行绝对定位，默认情况下，浏览器的可视窗口是一个大的包含块，默认情况下元素会相对浏览器的可视窗口进行定位；如果他的祖先级元素定义了包含块，那么它就离它最近的祖先级元素进行绝对定位。
怎么给它的祖先级元素定义包含块：给祖先级元素添加position：relative、absolute、fixed。**
包含块的概念：
包含块是绝对定位的基础，包含块就是为定位元素提供坐标，偏移和显示范围的参照物，即确定绝对定位的偏移起点和百分比 长度的参考；
默认状态下，html是一个大的包含块，所有绝对定位的元素都是根据窗口来定自己所处的位置和百分比大小的显示的，如果我们定义了包含元素为包含元素块以后，对于被包含的绝对定位元素来说，就会根据最接近的具有定位功能的上级包含元素来定位自己的显示位置。
定义元素为包含块：给绝对定位元素的父元素添加声明position：relative；
绝对定位和相对定位的区别：
1、相对定位的参照物是自己本身所在的位置，绝对定位的参照物是包含块
2、相对定位是不会脱离文档流的，而却不会对页面的布局产生影响；绝对定位会脱离文档流，原来的位置不再占有，后面的内容会把位置补上去
z-index：auto | number
检索或设置对象的层叠顺序
auto：默认值
number：无单位的整数值，可为负数
没有设置z-index时，最后写的对象优先显示在上层，设置后，数值越大，层越靠上
注：它只针对于具有定位属性的元素起作用
4、固定定位：fixed（参照物：始终都是相对于整个浏览器窗口进行固定定位的）
使元素完全脱离文档流
使内联元素支持宽高（让内联具备块特性）
使块元素默认宽根据内容决定（让块具备内联块的特性）
相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响不会受到祖先元素的影响。
5、sticky：黏性定位
在没有到达指定位置的时候，是没有定位效果的，到达了指定位置，就变成了固定定位的模式。
黏性定位：设置了sticky的元素，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置top、left等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left。top等属性成固定位置的效果。
二、命名锚点链接的应用：（超链接的一种链接形式，在页面内不同位置的跳转）
命名锚点的作用：在同一页面内不同位置进行跳转。
制作锚标记：
1、给元素定义命名锚记名
语法：<标记 id= " 命名锚记名 " > </标记>
2、命名锚记链接
语法：
补充：pc端的滚动条是占位置的，移动端是不占的
三、宽高自适应：（让页面显示的更灵活）
网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整，这是pc自适应。
自适应的优点：
元素自适应在网页布局中非常重要，它能够使网页显示更灵活，可以适应在不用设备、不同窗口和不同分辨率下显示。
一：相对窗口和父元素的自适应写法：
宽度：
当块状元素不写宽度的时候，默认的宽度是100%；是父元素宽度的100%；也就是始终跟父元素是同宽的。
width：100%；
（默认情况下）如果给块元素加了绝对定位或者固定定位，它的宽度就不再是100%显示，也不会跟父元素同宽了，而是跟里面的内容同宽，如果元素里面没有内容，又没有定义宽高，这个是元素就不见了
高度：body,html{height: 100%;}
让元素的高度相对浏览器窗口显示百分比的值的时候，一定要给HTML和body设置高度100%
高度自适应：
1、相对窗口自适应 body,html{height: 100%;} （全屏显示的页面必须要给html，body设置高度100%）
注：百分比设置宽高的时候，都是相对当前元素最近的父元素显示的百分比的值（百分比这个值显示大小的参照物就是自己最近的父元素）
2、相对元素或者内容自适应：（高度自适应）
①非浮动元素的父元素的高度自适应
实现方法：
1、不设置高，或者设置为auto
2、通过最小高度实现高度自适应（min-height：300px；height：300px；）
3、给需要高度自适应的元素添加这些属性：min-height：value； height：auto !important； height：value；
注：带有 !important；关键字过滤器的属性，要写到相同属性之前
兼容IE6的写法：
/_height：300px；/ ""叫做下划线过滤器，加了下划线过滤器之后，只有IE6这个浏览器识别当前的属性，其它浏览器就都不识别了
height：auto !important；/* 具有最高优先级，有的浏览器都会去识别这具有!important；过滤器的这个属性；!important；对于IE6来说，是无效的，IE6不支持 */
height：300px； 专门让IE6识别的
""叫做下划线过滤器，专门来单独过滤IE6这个浏览器的
过滤器： !important；关键字过滤器，具有最高优先级，ie6不支持
" * "、" + " 过滤IE7及以下的 浏览器 *height：300px；
" \9 " 过滤所有的IE浏览器； height：300px \9；
" \0 " 过滤IE8及以上浏览器 height：300px \0；
②浮动元素的父元素高度自适应
说明：当父元素不设置高度的时候，第一级子元素浮动后，父元素高度塌陷；
只要解决高度塌陷的问题，父元素就能实现高度自适应了
1、给父元素一个固定高度，可以解决高度塌陷问题（在特定的时候去使用，加了固定高度后，就不能自适应了）
2、overflow：hidden；解决高度塌陷并能实现高度自适应的方法一；弊端：只要里面的内容或者元素超出父元素以外，就会被隐藏；（遵循BFC的显示原则）
3、在浮动元素的下方添加一个空元素，并且给它设置属性：
空标记：< div class = " clear_fix ">< /div >
clear:both; height:0; overflow:hidden;
弊端：会添加很多空标记，增加结构复杂度，产生代码冗余；
4、display:table;给父元素添加让父元素转换元素类型跟表格特性一样； 弊端会改变当前元素的元素类型
5、万能清除法：
:after{
content:"";
clrar:both;
display:block;
height:0;
overflow:hidden;
visibility:hidden;
}
说明：推荐使用万能清除法；
弊端：代码重复
隐藏属性：visiblility:visible（显示）/hidden（隐藏）;
visibility: hidden;和display:none;的区别；
visibility: hidden;属性会使对象不可见，但该对象在网页所占的空间没有改变，等于留出一片空白区域而display:none;属性会使这个对象彻底消失不显示，也不再占用位置。
说明：visibility: hidden;让元素隐藏；元素的位置保留；
display:none;让元素隐藏，元素的位置不保留，也被隐藏了；
伪元素（对象）选择符：（这几个伪元素选择器前面的冒号可写一组，也可以写两组）
①、::after:与content属性一起使用，定义在对象后的内容（必须具有属性content:"";）
语法：选择符：:after{content: " 文字 "；}
选择符：:after{content: url(图片路径)；}
②、::before:与content属性一起使用，定义在对象前的内容
语法：选择符：:before{content: " 文字 "；}
选择符：:before{content: url(图片路径)；}
③、::first-letter 定义对象内第一个字符的样式。
说明：*（该伪元素只能用于块级元素）
④、::first-letter 定义对象内第一行的样式。
说明：*（该伪元素只能用于块级元素）
注：如果想实现元素高度自适应（相对元素或者内容）：
1、高度能不能写成固定的值
2、高度不能固定，怎么设置
二、相对内容宽度自适应：
设置背景图大小的属性：background-size:：；
px 设置两个值：第一个值代表的是宽；第二值代表的高度
% 设置两个值：第一个值代表的是宽；第二值代表的高度（相对元素大小显示的百分比大小）
cover 让图片等比例放大或缩小，直到把元素的两边都覆盖满为止（覆盖整个元素）
contain 让图片等比例放大或缩小，图片完全显示在元素内（被包含在元素内的）
min-width：最小宽度（当缩放到设置的最小宽度的时候就会出来滚动条）
max-width：最大宽度（内容区的宽度只有那么多，超出了就会折行）
min-heigth：最小高度（当缩放到设置的最小高度的时候就会出来滚动条）
max-height：最大高度（内容区的高度只有那么多，超出了就会在元素外显示
注：这组属性在IE6浏览器里是不支持的（ie6自带高度自适应）
padding和margin显示百分比显示值的时候，它的参照物是根据窗口的宽度来显示
padding-top/bottom；margin-top/bottom；在设置百分比的时候，百分比大小显示的参照物窗口宽度（会根据窗口显示百分比值）
来源：CSDN
作者：一杯浓茶一支烟
链接：https://blog.csdn.net/qq_45216853/article/details/104580850