-
overflow属性
-
设置了高度的盒子，如果内部元素的加载高度超过了父级，会出现溢出效果。可以通过一个溢出的属性overflow，进行溢出部分内容的显示效果设置
| 属性值 | 说明 |
| — | — |
| visible | 默认值，可见的可视的，溢出部分显示的 |
| hidden | 溢出部分直接隐藏，隐藏超过边框范围的内容 |
| scroll | 溢出的部分出现滚动条，可以拖动滚动条看到隐藏部分，多出盒子高度的部分不显示，不论有没有溢出，水平和垂直方向都会出现滚动条 |
| auto | 自动的，如果没有溢出就正常显示，如果有溢出，溢出的方向自动出现滚动条 |
div {
height: 200px
/* overflow: visible */
/* overflow: hidden */
/* overflow: scroll */
overflow: auto
}
-
必须不设置高度
-
要求盒子高度必须自适应内部内容的高度
-
或者设置height的属性值是自动的
====================================================================
-
水平居中：text-align属性
-
不论单行或多行都可以设置
p {
text-align: center;
}
- 单行文本垂直居中：让文字行高line-height等于盒子高度height
p {
height: 20px;
line-height: 20px;
}
- 多行文本垂直居中：让元素高度自适应或者正好等于多行文字的高度，设置元素内边距上下值相同
p {
padding: 20px;
}
一个元素内部嵌套的子元素，在父元素中居中
- 垂直居中：与多行文字类似，让父元素高度自适应，子元素高度自动撑开父级的高度，再给父元素设置相同的上下边距。
p {
margin: 20px 0px;
}
针对类似
div {
margin {
0 auto
}
}
原因：auto只在水平方向有作用，水平方向的marign如果设置为auto，边距会自动无限增大，直到撑满整个父元素除了子元素宽度之外剩余的区域，如果两个水平方向都是auto，两边都要无限大，只能达到一个平衡，两边距离相同，导致盒子居中
=======================================================================
-
一般情况下，一个父元素的内部可以放一个或多个子元素，而且多个子元素要排成一行显示，必须保证父元素的宽度一定要足够（不考虑溢出的情况）需要遵循一个设置尺寸的规律：所有子元素的宽度加在一起不能大于父元素的宽度width。
-
父元素的width >= 所有子元素width + padding + border + margin
-
如果不满足条件：要么多余的子元素掉下来不能在一排，要么溢出父元素>
-
父子盒模型中，只有一个子元素，且子元素是类似
标签必须独占一行。 -
不设置子元素的width属性，子元素的width属性值会自动加载父级元素的width
-
如果同时设置了子元素水平方向的padding和border、margin，不需要手动去进行内减，子元素的width会自动收缩尺寸
-
子元素所有的水平方向的位置上所有属性的加和等于父元素的width
============================================================================
margin塌陷现象，在垂直方向如果有两个元素的外边距有相遇的，浏览器中加载的真正的外边距不是两个间距的加和，而是两个边距中值较大的，边距值小的塌陷到了边距值大的值内部
上面的元素有下边距，下面的元素有上边距，两个边距相遇，真正的盒子间距离是较大的那个值
-
父子元素之间也会出现margin塌陷，父元素和子元素都设置了同方向的margin-top值，两个属性之间没有其他的内容进行隔离，导致两个属性相遇，发生margin塌陷
-
本身父元素与上一个元素的距离是0，子元素如果设置了垂直方向的上边距，会带着父级一起掉下来
-
同级元素
-
如果两个元素垂直方向又兼具，只需要设置给一个元素，不要进行拆分
-
父子元素
-
让两个边距不要相遇，中间可以使用父元素border或padding将边距分隔开；更加常见的方法，父子盒模型之间的距离就不要用儿子的margin去踹出来，而是父级的padding挤出来
===============================================================
-
标准文档流，指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排版方式。前面内容发生了变化，后面的内容也会随着发生变化
-
HTML就是一种标准文档流文件
-
HTML中的标准文档流特点通过两种方式体现：微观现象和元素等级
-
空白折叠现象
-
文字类的元素如果排在一行会出现一种高低不齐、底边对齐的效果
-
自动换行，元素内一行内容写满元素的width时会出现自动进行换行
-
在标准流中，大部分元素是区分等级的，习惯将元素划分为几种常见的加载级别：块级元素、行内元素、行内块元素。
-
块级元素
-
大部分容器级标签包括p标签都是块级元素，不如
、等
-
块级元素可以设置宽高，在浏览器中正常加载
-
块级元素必须独占一行，不能与其他任何标签并排一行
-
块级元素如果不设置宽度，会自动撑满父级的width区域；高度不设置，会被内容自动撑开高度
-
行内元素
-
大部分的文本级标签，比如、、等
-
行内元素不能正常加载宽度和高度属性，其他的盒模型属性虽然能设置，但是容易出现加载问题
-
行内元素可以与其他行内或行内块元素并一排显示
-
行内元素不论是否设置宽高，宽度和高度都只能被内容自动撑开
-
行内块元素
-
比如、等
-
行内块元素可以设置宽度和高度
-
行内块元素可以与其他的行内或行内块并排一行显示
-
行内块元素不可以设置宽高，要么以原始尺寸加载要么被内容自动撑开
-
行内块依据具有标准流的微观性质，例如空白折叠现象
========================================================================
标准文档流中的元素有自己默认的浏览器家在模式，但是加载模式不是一成不变的，后期可以通过display属性更改一个标签的显示模式
- 属性值：元素根据属性值不同，可以加载对应元素等级的显示模式的特点
| 属性值 | 作用 |
| — | — |
| block | 表示元素要以块级元素模式加载，具备块级特点 |
| inline | 表示元素要以行内元素模式加载，具备行内特点 |
| inline-block | 表示元素要以行内块元素模式加载，具备行内块特点 |
| none | 表示元素及内部内容直接隐藏，让出原有标准流的位置 |
-
脱离文档流
-
display属性更改的显示模式并没有改变标准流本质性质，页面还是只能从上往下加载，存在空白折叠现象等微观性质。要想实现更多的洁面布局效果需要脱离标准流的限制
-
脱离标准流的方式
-
浮动、绝对定位、相对定位
==============================================================
-
浮动是一种非常重要的布局属性
-
属性名：float，浮动、漂流的意思
-
属性值
-
left — 左浮动
-
right — 右浮动
-
作用：让元素脱离标准文档流，同一级的浮动的元素可以并排在一排显示
p {
/* float: left */
float: right
}
- 浮动的元素脱离标准流
-
标准文档流特点：区分行快
-
块级元素：可以设置宽高，必须独占一行
-
行内元素：不能设置宽高，可以并排一行
-
浮动的元素脱离了标准流的限制，具备行块二象性，浮动的元素可以设置宽高，还可以并排一行，而且不会有空白折叠现象，如果元素不设置宽高，可以被元素内容自动撑开
=====================================================================
-
浮动属性值：left、right
-
浮动方向设置不同，进行布局时，加载位置方向不同
-
以left为例：
-
父元素宽度足够，所有子元素会按照HTML书写顺序，依次向左进行贴边
-
父元素左边 <-- 子元素1 <-- 子元素2 <-- 子元素3 <-- 子元素4
-
父元素宽度不够，例如不能放下一个子元素4，那么子元素4再贴边时，会跳过上一个子元素3，向更上一个子元素2进行贴边，如果子元素2后面位置不够，继续跳过子元素2向前面的子元素1进行贴边
-
如果子元素在跳过子元素3向更前面的子元素2贴边时，子元素2的高度不高于子元素3，子元素2没有延伸出一个高度的边让子元素4贴边，那么子元素4就会跳过子元素2向子元素1进行贴边
-
如果贴边的这个子元素4宽度小于子元素2，子元素2的高度低于子元素1和3，形成一个凹陷，子元素4会受前面子元素3高度影响，不会出现钻空现象
-
如果子元素1后面的距离也放不下子元素4，子元素4最终会铁道父元素左边，如果子元素4的宽度超过了父元素，只会出现溢出现象
-
右浮动与左浮动贴边效果是一致的，知识贴边方向不同。按照HTML书写顺序一次向右向上一个元素贴边，第一个元素贴父元素的右边
=======================================================================
-
利用浮动的贴边应用性质，可以完成多种网页布局效果
-
平均分布的表格
-
导航栏效果
-
常见的电商或企业网站布局
================================================================================
-
margin塌陷现象出现在标准流中的，浮动元素已经脱离标准流，不在具有margin塌陷现象
-
元素浮动之后，脱离了当前文档流，会将原来占有的标准流位置让给后面的一个同级元素
-
由于浏览器中有兼容问题，不会使用这种属性制作压盖效果，真正的压盖效果试用后期学习的定位制作
-
如果没有特殊需求，不允许一个父元素中的子元素有的浮动有的不浮动，同级元素中有一个浮动其他的也要浮动
-
与前面压盖效果结构类似，同级元素中前面的元素浮动，后面的元素不浮动，不浮动的元素内部还有一些文字，浮动的盒子1会压盖住盒子2的一部分，但是盒子2上的文字内容不会被覆盖，他会让开盒子1的位置，围绕他进行加载
-
可以利用字围现象制作一些特殊的图文混排布局效果
=================================================================
-
标准流中的元素，不设置高度的情况下，都能被内部的标准流元素自动撑高。如果内部的子元素进行了浮动，浮动的子元素是撑不高标准流父亲的
-
父元素没有高度，会影响后面元素的标准流位置，如果浮动的子元素足够高时，有可能影响到后面浮动元素的贴边
===============================================================
- 给标准流的父元素强制给一个合适的高度
-
解决：父元素有了高度，前面的浮动不能影响后面元素的标准流位置和贴边
-
问题：父元素高度不是自适应，一旦子元素高度变化，问题可能再次出现
- clear属性
-
clear，清除
-
作用：清除标签元素自身受到前面的浮动元素的影响
-
属性值
-
left — 清除前面左浮动带来的影响
-
right — 清除前面右浮动带来的影响
-
both — 清除前面所有浮动带来的影响
-
给彼岸准刘父元素添加clear属性，氟元素不收前面浮动影响，不会再占有浮动让出的位置
-
解决：浮动元素影响后面元素标准流位置和贴边
-
问题：父元素不能高度自适应，两个父元素之间如果有margin效果不正确
- 隔墙法
-
外墙法：在两个大的父盒子之间，添加一个空的div标签，标签上带有clear：both属性
-
解决：浮动影响后面元素标准流位置和贴边，模拟父元素间的距离
-
问题：父元素没有高度自适应
-
内墙法：在父元素内部，所有浮动子元素后面添加一个空的div标签，标签高度为0，添加clear属性
-
解决：父元素高度自适应，浮动影响后面的元素的位置和贴边
-
缺点：浮动是CSS样式属性带来的问题，内墙法使用HTML结构去辅助解决问题，如果页面中浮动元素很多，需要添加多个没有语义的空标签，造成HTML结构的冗余
===============================================================
-
伪类
-
本质是使用味蕾方法利用CSS代码书写一堵内墙
-
伪类选择器：通过选中的标签添加伪类，去选中标签的某个状态或位置
-
:after：这个伪类表示选中的是某个标签内部的最后的位置
-
书写方法：前面必须加普通的选择器，后面连续书写伪类名称
-
将伪类添加给一个选中父盒子的选择器后面，一般给需要清除浮动的父盒子设置一个clearfix的类名
.clearfix:after {
content: “1”; /* 添加一个文字内容 */
display: block; /* 将文字转为块级元素 */
height: 0; /* 将盒子高度固定为0，避免影响父盒子高度 */
clear: both; /* 清除前面浮动影响 */
visibility: hidden; /* 将创建的元素占位置隐藏 */
}
-
溢出隐藏
-
小偏方：给内部有浮动的子元素的父元素添加溢出隐藏 overflow: fidden;属性，可以解决浮动的所有问题
-
元素高度设置后，overflow: hidden;效果是将超过高度的部分直接隐藏。
-
元素高度没有设置时，如果元素同时设置了overflow: hidden属性，元素会自适应内容的高度
-
高度自适应原因：一个元素没有设置高度，同时设置了溢出隐藏，浏览器在加载盒子尺寸时，遇到了溢出隐藏浏览器会强制性去检索内部的子元素的高度，不论子元素是标准流还是浮动，都会将最高的高度作为父盒子高度加载
-
浮动影响后面的元素：父元素有了高度后，可以管理住内部所有的浮动元素，不会延伸到后面标签中影响贴边
总结
-
如果父元素高度是固定的，建议使用height属性解决
-
如果父元素高度需要自适应，建议使用overflow属性解决浮动问题
================================================================
-
概念
-
伪类和类之间有一定的相似之处，也存在明显的区别
-
普通的类：必须给标签设置对应的class属性值，才能选中标签，而且类选择器后面添加的属性，会立即加载到浏览器之上
-
伪类：不需要给标签添加任何属性，伪类名都是语法提前规定好的，书写时伪类必须搭配其他选择其适用，伪类选择器后面添加的样式不一定立即加载到浏览器之上，只有用户触发了对应的行为，伪类的样式才会立即加载
-
伪类选择器的权重与普通的类选择器相同
-
伪类选择器的写法：前面是普通的选择器，后面紧跟：伪类名
-
a标签可以根据用户行为不同，划分四种状态，通过a标签的伪类可以将四种状态选中设置为不同的样式效果，用户触发对应行为，就可以加载对应的样式
a:link {
color: gray /* 访问前状态 */
}
a:visited {
color: cyan /* 访问后状态 */
}
a:hover {
color: red /* 鼠标悬浮状态 */
}
a:active {
color: yellow /* 鼠标点击状态 */
}
-
a标签的伪类书写顺序
-
a标签上可能会同时触发2~3个状态，每个状态的属性都会进行加载，相同属性之间会发生层叠
-
伪类的权重是相同的，只能根据书写顺序，后写的层叠先写的，所以伪类书写顺序非常重要
-
要想让每个伪类的状态正常加载，书写顺序必须是：link — visited — hover — active
-
a标签的伪类实际应用
-
一般会将访问前和访问后状态设置为一样的效果，保证页面的统一性，可以选择性的设置鼠标移上和鼠标点击状态
a:link,a:visited {
color: #666;
}
a:hover {
color: #f00;
}
-
更加常用的一种设置方式如下：
-
a标签任何普通的选择器，可以同时选中四种状态，可以将四种状态设置为相同的样式，属性可以设置所有的a默认显示的属性，包括盒模型、文字等。
-
a:hover伪类选择器：设置鼠标移上时不一样的样式属性
a {
width: 150px;
height: 150px;
background-color: red;
}
a:hover {
background-color: yellow;
}
=========================================================================
-
属性名：background-color
-
作用：在盒子区域添加背景颜色的修饰
-
加载区域：在border及以内加载背景颜色
-
属性值：颜色名、颜色值
p {
background-color: red;
}
-
属性名：background-image
-
作用：给盒子添加图片的背景修饰
-
加载范围：默认的加载到边框及以内部分。后期如果图片不重复加载，加载从border以内开始
-
属性值：url（图片路径）
-
url：uniform resource locator，统一资源定位符，小括号内部书写查找图片的路径
p {
background-image: url(xl.jpg);
}
-
属性名：background-repeat
-
作用：设置添加的背景图是否要在盒子中重复进行加载
-
根据属性值不同，有四种重复加载方式
| 属性值 | 作用 |
| — | — |
| repeat | 重复，默认属性值，表示会使用背景图片重复加载填满整个盒子背景区域 |
| no-repeat | 不重复，不论背景图是否大于盒子范围，都只加载一次图片 |
| repeat–x | 水平重复，使用背景图片水平重复加载铺满第一行，垂直方向不重复 |
| repeat–y | 垂直重复，使用背景图片垂直重复加载铺满第一列，水平方向不重复 |
p {
/* background-repeat: repeat; */
/* background-repeat: no-repeat; */
/* background-repeat: repeat-x; */
background-repeat: repeat-y;
}
=========================================================================
-
属性名：background-position
-
作用：主要用于设置不重复的图片在背景区域的加载开始位置
-
属性值：三种写法，单词表示法、像素表示法、百分比表示法。不论哪种写法，属性值都有两个，值之间用空格间隔。
-
第一个值：表示背景图片在水平方向的位置
-
第二个值：表示背景图片在垂直方向的位置
-
单词表示法
-
属性值都是使用代表方向的单词进行书写
-
水平方向可选单词：left、center、right
-
垂直方向可选单词：top、center、bottom
-
单词表示图片与合资北京区域进行对应方向的对齐
p {
background-position: left top;
}
-
像素表示法
-
使用像素值作为背景定位的属性值
-
第一个属性值：像素是几，表示背景图片左上角针对border以内的左上顶点水平方向位移的距离
-
第二个属性值：像素是几，表示背景图片左上角针对border以内的坐上定点垂直方向位移的距离
-
注意点
-
像素值区分正负，正负代表位移方向不同
-
正：针对盒子的原点向右下移动
-
负：针对盒子的原点向左上移动
-
可以利用属性值为负数制作在小盒子中显示大的背景图的一部分
-
制作方法需要根据使用FW软件量取尺寸，读取数据
p {
background-position: 100 400;
}
-
百分比表示法
-
百分比表示法适用百分比数字作为属性值
-
100%代表的数值：
-
水平方向，等价于盒子的border以内的背景区域宽度减去图片宽度
-
垂直方向，等价于盒子的border以内的背景区域高度减去图片高度
=========================================================================
-
属性名：background-attachment
-
作用：设置的是背景图片是否要随着页面或者盒子的滚动而滚动
| 属性值 | 说明 |
| — | — |
| scroll | 滚动的，表示背景图片与盒子保持相对位置不变，随着页面的滚动而滚走 |
| fixed | 固定的，背景图的定位参考点从盒子border以内的左上顶点变为了浏览器窗口的左上顶点，页面滚动时，浏览器窗口的左上顶点是不变的，导致背景图固定在浏览器窗口的某个位置，不会随着页面滚动而滚走 |
p {
background-attachment: fixed;
}
=========================================================================
-
background属性可以将五个单一属性的值进行合写
-
属性值：可以有1-5个属性值，值之间用空格间隔，背景定位的两个属性值算作一个属性值，不能被分开也不能颠倒顺序。五个属性值之间可以互换位置
p {
background: url(xl.jpg) no-repeat center top fixed #fff;
}
-
注意事项
-
如果属性值没有设置完全，其他没有设置的单一属性会按照默认值加载
p {
background: #fff;
}
- 如果想去层叠综合属性中的一部分，其他的属性保持不变，最好使用单一属性写法进行层叠
p {
background: url(xl.jpg) no-repeat center top fixed #fff;
}
p {
background-attachment: scroll;
}
======================================================================
/* 方式1 */
/* 方式2 */
h1 a {
display: block;
width: 150px;
height: 200px;
background: url(xl.jpg) no-repeat;
/* 消除文字方法1 */
font-size: 0px;
/* 消除文字方法2 */
text-indent: -10em;
overflow: hidden;
}
=============================================================================
-
制作方法
-
在一个盒子中有背景图部分，而且有文字内容，文字会让开背景图区域进行加载，北京区域应该使用padding挤出位置
-
四个方向都可以设置
ul{
width: 300px;
padding-left: 10px;
border: 1px solid #333;
margin: 10px;
list-style: none;
font: 16px/32px “微软雅黑”;
}
ul li {
padding-left: 20px;
background: url(xl.jpg) no-repeat left center;
}
- 新1闻1新1闻1新1闻1新1闻1新1闻
- 新2闻2新2闻2新2闻2新2闻2新2闻
- 新3闻3新3闻3新3闻3新3闻3新3闻
- 新4闻4新4闻4新4闻4新4闻4新4闻
- 新5闻5新5闻5新5闻5新5闻5新5闻
-
====================================================================
-
当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。
-
然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites、CSS雪碧）
-
CSS精灵
-
CSS精灵是一种处理网页背景图像的方式
-
它将一个页面涉及到所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来
-
通常情况下，这个有很多小的背景图像合成的大图被称为精灵图
-
CSS精灵的技术依据
-
将网页中需要用到的小尺寸背景图制作成一张背景透明的PNG图片
-
利用北京定位技术，将精灵图的每个小图片加载到应用的标签上
-
制作精灵图的注意事项
-
精灵图上放的都是小的装饰性质的背景图片，插入图片不能往上放
-
精灵图的宽度取决于最宽的那个背景图片的标签宽度
-
精灵图可以横向摆放也可以纵向摆放，但是每个图片之间必须留够足够的空白，保证背景图片加载到一个标签内部时，不能出现多余内容。
-
在精灵图的最低端，尽量留一点空白，方便以后添加其他精灵图
-
可以使用一些在线工具，快速生成精灵图
p {
width: 100px;
height: 100px;
background: url(xl.jpg) no-repeat 100px 100px;
}
====================================================================
- 背景半透明
-
CSS3支持背景半透明的写法，颜色值增加了一种rgba模式
-
rgba模式：在rgb基础上增加了一个不透明的设置，不透明度alpha取值范围在0-1之间，0表示完全透明，1表示完全不透明，0.5表示半透明。
p {
background-color: rgba(255, 0, 0, 0.5)
}
- 半透明也可以给文字和边框透明，都是rgba的格式来写
color: rgba(0, 0, 0, 0.3);
border: 1px solid rgba(0, 0, 0, 0.3);
- 背景缩放
- 通过background-size设置背景图片的尺寸，就像我们设置的的尺寸一样，在移动web开发中做屏幕适配应用非常广泛
| 属性值 | 说明 |
| — | — |
| px值 | 1-2个像素值，只设置1个值，垂直方向等比例拉伸；设置2个值，按照设置值加载 |
| 百分比 | 同像素值设置方法相同，设置百分比时，数值参照盒子的宽、高属性 |
| cover | 自动调整缩放比例，把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。如有溢出部分则会隐藏 |
| contain | 自动调整缩放比例，把图像扩展至最大尺寸，保证图片始终完整显示在背景区域 |
p {
background: url(xl.jpg);
background-size: 10px;
}
- 多背景
-
CSS3中规定，一个盒子上，可以添加多个背景图片
-
background-image的属性值书写时，以逗号分隔多背景的URL路径地址
-
注意：背景加载时，先写的背景压盖后写的背景图
p {
background-image: url(xl.jpg), url(bg_xl.png)
}
==============================================================
-
position
-
属性值
-
relative — 相对定位
-
absolute — 绝对定位
-
fixed — 固定定位
-
作用
-
设置定位的元素，他需要根据某个参考元素发生位置的偏移
-
偏移量属性
-
水平方向：left、right
-
垂直方向：top、bottom
-
属性值：常用px为单位的数值，或者百分比。
==============================================================
-
属性值：relative
-
参考元素：标签加载的原始位置。
-
必须搭配偏移量属性才能发生位置移动
.box {
position: relative;
left: 100px;
right: 100px;
}
-
性质
-
相对定位的元素不脱离标签的原始状态（标准流、浮动）不会让出原来占有的位置
-
元素显示效果上，原位留坑，形影分离
-
注意事项
-
偏移量属性区分正负
-
正数：偏移方向与属性名方向相反
-
负数：偏移方向与属性名方向相同
-
同一个方向，不能设置两个偏移量属性，如果水平方向同时设置了left和right属性，只会加载left属性。垂直方向只加载top属性。
-
由于相对定位的参考元素是自身，left的正值等价于right的负值，top的正值等价于bottom的负值
-
为了方便记忆，可以选择只使用left、top组合
================================================================
-
由于相对定位元素比较稳定，不会随意让出位置，可以将相对定位的元素作为后期绝对定位的参考元素，就是所说的子绝父相的情况
-
相对定位比较稳定，可以在占有原始位置的情况下，对价在效果区域进行位置调整，进行微调设置。或者对文字进行微调
===============================================================
-
属性值：absolute，绝对的意思
-
参考元素：参考的是距离最近的有定位的祖先元素，如果祖先都没有定位，参考
-
必须去搭配偏移量属性才会发生位置的移动
p {
position: absolute;
top: 100px;
left: 100px;
}
-
性质
-
绝对定位的元素脱离标准流，会让出标准流位置，可以设置宽高，也可以随时定义位置，绝对定位的元素不设置宽高只能被内容撑开
-
注意
-
绝对定位的参考元素是不固定的，不同的参考元素以及不同的偏移量组合，会导致绝对定位元素的参考点不同，具体位移效果不同
-
以为参考元素时，参考点的确定与偏移量方向有关
-
如果有top参与的定位，参考点就是也免得左上顶点和右上顶点。自身的对比点是盒子的所有盒模型属性最外面的左上角或右上角
-
如果有bottom参与的绝对定位，参考点是页面首屏的左下顶点或右下顶点。对比点是盒子的所有盒模型属性最外面的左下角或右下角
实际应用中，如果以为参考元素，不同分辨率的浏览器中，绝对定位的元素位置是不同的，所以较少使用作为参考元素
===============================================================
-
祖先级为参考元素
-
如果祖先级中有定位的元素，就不会去参考
-
参考元素：参考的是祖先元素中有任意定位的，在HTML结构中距离目标最近的祖先
.bigBox {
position: relative;
width: 500px;
height: 500px;
}
.bigBox div {
position: absolute;
width: 50px;
height: 50px;
}
根据绝对定位的参考元素的定位类型不同，有三种定位的组合方式：子绝父相、子绝父绝、子绝父固，由于相对定位的祖先级位置更稳定，大多使用子绝父相的情况
-
祖先元素参考点
-
如果绝对定位的参考元素是某个祖先级，参考点是盒子border以内的四个顶点，组合方向决定了参考点。绝对定位的元素只关心对比点和参考点之间的距离，会忽视参考元素的padding区域。
-
left、top：参考点是祖先的border以内的左上顶点，对比点是盒子自身的左上角
-
right、top：参考点是祖先的border以内的右上顶点，对比点是盒子自身的右上角
-
left、bottom：参考点是祖先的border以内的左下顶点，对比点是盒子自身的左下角
-
right、bottom：参考点是祖先的border以内的右下顶点，对比点是盒子自身的右下角
==============================================================
-
属性值：fixed，固定的意思
-
参考元素：浏览器窗口
-
参考点：浏览器窗口的四个顶点。跟偏移量组合方向有关
-
由于浏览器窗口的四个顶点位置不会发生变化，会导致固定定位的元素会始终显示在定位位置
.box {
position: fixed;
right: 100px;
bottom: 100px;
}
-
性质
-
固定定位的元素脱离标准流，让出标准流位置，可以设置宽高，根据偏移量属性可以任意设置在浏览器窗口的位置。固定定位的元素会始终显示在浏览器窗口时
====================================================================
-
压盖效果
-
所有的定位类型都可以实现压盖效果
-
由于绝对定位的元素脱标，不占标准流位置，压盖效果更彻底，实际工作中，常见的是绝对定位制作的压盖
-
居中
-
定位的元素，如果想在参考元素中居中显示，有自己的居中方法：
-
第一步：在居中的方向使用一个偏移量属性，例如left，设置属性值为50%。导致图片的左顶点移动到参考元素的中心位置
-
第二步：给绝对定位的子盒子设置一个同方向的margin，例如margin-left，属性值为负的自身宽度的一半
-
扩展应用
-
解决标准流中，宽的子盒子在窄的父盒子中的居中，可以设置大的子盒子相对定位，利用相对定位居中的方法进行居中
-
浮动的元素居中，在不改变原始浮动状态情况下，可以利用相对定位居中方法
========================================================================
-
默认的压盖顺序
-
定位的元素不区分定位类型，都会去压盖标准流或浮动的元素
-
如果都是定位的元素，在HTML中后写的定位压盖先写的定位
-
因此，书写代码是，需要注意压盖效果，必须合理设置HTML元素的书写顺序
-
自定义压盖顺序
-
如果想更改定位的元素的压盖顺序，可以设置一个z-index属性
-
属性值：数字
-
注意事项
-
属性值大地会压盖属性值小的，设置z-index属性的会压盖没有设置的
-
如果属性值相同，比较HTML书写顺序，后写的压盖先写的
-
z-index属性只能设置给定位的元素才会生效，如果给没有定位的元素设置，不会生效
-
父子盒模型中，如果父子盒子都进行了定位，与其他的父子级有压盖的部分
-
父级盒子：如果不设置z-index，后写的压盖先写的；如果设置了z-index，值大的压盖小的
-
子级盒子：如果父级没有设置z-index属性，子级z-index大的会压盖小的；如果父级设置了z-index值，无论子级值是多少，都是父级的值大的子级压盖父级值小的子级，俗称“从父效应”
==================================================================
轮播 -
- 1
- 2
- 3
-
==================================================================
轮播 -
-
-
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新
如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）
最后
今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动，或者直接进入你的收藏夹里吃灰，那么我写这篇文章就没多大意义了。所以看完之后，还是多多行动起来吧！
可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。
一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
n a:hover {
background-color: rgba(211, 47, 47, 0.6);
}
.box .sub {
position: absolute;
left: 100px;
bottom: 50px;
width: 120px;
}
.box .sub li {
float: left;
width: 20px;
height: 20px;
margin-right: 20px;
background-color:rgba(211, 47, 47, 0.6);
font: 12px/20px “微软雅黑”;
text-align: center;
color: #666666;
cursor: pointer;
}
.box .sub .current {
background-color: yellow;
}
-
-
-
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
[外链图片转存中…(img-4unVHJqz-1712883432008)]
[外链图片转存中…(img-IzAxiIZs-1712883432008)]
[外链图片转存中…(img-Av7S1Oyo-1712883432008)]
[外链图片转存中…(img-SO0N70dI-1712883432009)]
[外链图片转存中…(img-sIbVc5mX-1712883432009)]
[外链图片转存中…(img-mTRVrDv5-1712883432009)]既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新
如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）
[外链图片转存中…(img-9hA9gzBi-1712883432010)]最后
今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动，或者直接进入你的收藏夹里吃灰，那么我写这篇文章就没多大意义了。所以看完之后，还是多多行动起来吧！
可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。
一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
[外链图片转存中…(img-jUmVjBsn-1712883432010)]
6238
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
