CSS今天就更新完啦~,接下来还是要不断的学习，一起加油吧???
???
CSS入门笔记第一弹：CSS入门笔记第一弹~
CSS入门笔记第二弹：CSS入门笔记第二弹~
此篇定位所占篇幅之多，可见其之重要???
定位：将盒子定在某一个位置，所以定位也是在摆放盒子， 按照定位的方式移动盒子
定位也是用来布局的
???
浮动可以让多个块级盒子一行没有缝隙排列显示， 经常用于横向排列盒子。
定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。
定位 ：
用于指定一个元素在文档中的定位方式
决定了该元素的最终位置
边偏移（方位名词）
边偏移 :定位的盒子移动到最终位置。有 top、bottom、left 和 right 4 个属性
???
边偏移属性
示例
描述
top
top: 80px
顶端偏移量，定义元素相对于其父元素上边线的距离。
bottom
bottom: 80px
底部偏移量，定义元素相对于其父元素下边线的距离。
left
left: 80px
左侧偏移量，定义元素相对于其父元素左边线的距离。
right
right: 80px
右侧偏移量，定义元素相对于其父元素右边线的距离
定位的盒子有了边偏移才有价值。 一般情况下，凡是有定位地方必定有边偏移。
通过
position属性定义元素的定位模式
???
选择器 {
position: 属性值;
}
值
语义
static
静态定位
relative
相对定位
absolute
绝对定位
fixed
固定定位
选择器{position:static;}
/*脱标*/
选择器{position:absolute;}
/*相对定位相对于自己原来的位置移动，没有脱标*/
选择器{position:relative;}
/*脱标 以浏览器的可视窗口为参考点*/
选择器{position:fixed;}
定位模式
是否脱标
移动位置
是否常用
static 静态定位
否
不能使用边偏移
很少
relative 相对定位
否 (占有位置)
相对于自身位置移动
基本单独使用
absolute绝对定位
是（不占有位置）
带有定位的父级
要和定位父级元素搭配使用
fixed 固定定位
是（不占有位置）
浏览器可视区
单独使用，不需要父级
sticky 粘性定位
否 (占有位置)
浏览器可视区
当前阶段少
静态定位是元素的默认定位方式，无定位的意思
选择器 {
position: static;
}
相对定位是元素在移动位置的时候，是相对于它自己原来的位置来说的
选择器 {
position: relative;
}
???划重点啦
相对定位的特点：
1.它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）。
2.原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。
因此，相对定位并没有脱标。它最典型的应用是给绝对定位当爹的
绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的
选择器 {
position: absolute;
}
???划重点啦
绝对定位的特点总结：
1.如果没有祖先元素或者祖先元素没有定位，则以浏览器为基准定位（Document 文档）。
2.如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。
3.绝对定位不再占有原先的位置。所以绝对定位是脱离标准流的。（脱标）
???
其它：
完全脱标 —— 完全不占位置；
父元素没有定位，则以浏览器为准定位
父元素要有定位
???这个超级重要
子级是绝对定位的话，父级要用相对定位。
总结： 因为父级需要占有位置，因此是相对定位， 子盒子不需要占有位置，则是绝对定位
固定定位是元素固定于浏览器可视区的位置
选择器 {
position: fixed;
}
???划重点啦
1.以浏览器的可视窗口为参照点移动元素。
- 跟父元素没有任何关系
- 不随滚动条滚动。
2.固定定位不在占有原先的位置。
- 固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位。
- 完全脱标—— 完全不占位置；
- 只认浏览器的可视窗口 —— 浏览器可视窗口 + 边偏移属性 来设置元素的位置；
- 跟父元素没有任何关系；单独使用的
- 不随滚动条滚动。
粘性定位可以被认为是相对定位和固定定位的混合
选择器 {
position: sticky;
top: 10px;
}
???
粘性定位的特点：
1.以浏览器的可视窗口为参照点移动元素（固定定位特点）
2.粘性定位占有原先的位置（相对定位特点）
3.必须添加 top 、left、right、bottom 其中一个才有效
用定位布局时，可能会出现盒子重叠的情况。此时，可以使用 z-index 来控制盒子的前后次序 (z轴)
选择器 {
z-index: 1;
}
???
z-index 的特性如下：
注意：z-index
只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。
选择器 {z-index:1;}
数值可以是正整数负数0 默认auto 数值越大 盒子越往上
只有定位的盒子才有z-index属性
left: 50%;：让盒子的左侧移动到父级元素的水平中心位置；
margin-left: -100px;：让盒子向左移动自身宽度的一半。
1.left：50%
2.margin-left：版心宽度的一半距离
让一个元素在页面中消失或者显示出来
属性
区别
用途
display 显示 （重点）
隐藏对象，不保留位置
配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单， 应用极为广泛
visibility 可见性 （了解）
隐藏对象，保留位置
使用较少
overflow 溢出（重点）
只是隐藏超出大小的部分
1. 可以清除浮动 2. 保证盒子里面的内容不会超出该盒子范围
display 设置或检索对象是否及如何显示。
display: none 隐藏对象
display：block 除了转换为块级元素之外，同时还有显示元素的意思。
特点： display 隐藏元素后，不再占有原来的位置
???
实际开发场景：
配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单， 应用极为广泛
visibility 属性用于指定一个元素应可见还是隐藏
visibility：visible ; 元素可视
visibility：hidden; 元素隐藏
特点：visibility 隐藏元素后，继续占有原来的位置
???
属性值
描述
visible
不剪切内容也不添加滚动条
hidden
不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll
不管超出内容否，总是显示滚动条
auto
超出自动显示滚动条，不超出不显示滚动条
overflow: hidden;
/* scroll移除的部分显示滚动条 */
overflow: scroll;
/*auto超出自动显示滚动条，不超出不显示*/
overflow: auto;
overflow:visible;
为了有效地减少服务器接收和发送请求的次数**，提高页面的加载速度，出现了 CSS 精灵技术（也称 CSS Sprites、CSS 雪碧）
原因：
一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。
原理：
将网页中的一些小背景图像整合到一张大图中 ，这样服务器只需要一次请求就可以了
???
使用精灵图：
2、测量字母的大小及坐标
- 精灵图主要针对于小的背景图片使用。
- 主要借助于背景位置来实现—background-position 。
- 一般情况下精灵图都是负值。（千万注意网页中的坐标： x轴右边走是正值，左边走是负值， y轴同理。）
精灵图有诸多优点的，但是缺点很明显。
1.图片文件还是比较大的。
2.图片本身放大和缩小会失真。
3.一旦图片制作完毕想要更换非常复杂。
字体图标 iconfont很好的解决了以上问题。
字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。
???
轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求
- 灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等
- 兼容性：几乎支持所有的浏览器，请放心使用
- 注意： 字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化。
使用方法可以参考我之前写的一篇博客：icomoon下载字体图标
网页中常见一些三角形，使用 CSS 直接画出来就可以，不必做成图片或者字体图标
???
上三角
建一个盒子
.shangsanjiao{
width:0;
height:0;
border-right:50px solid transparent;
border-left:50px solid transparent;
border-bottom:50px solid red;
}
右三角
.kailong{
width:0;
height:0;
border-top:50px solid transparent;
border-bottom:50px solid transparent;
border-left:50px solid red;
}
下三角
.kailong{
width:0;
height:0;
border-right:50px solid transparent;
border-left:50px solid transparent;
border-top:50px solid red;
}
两种写法
.box2 {
width: 0;
height: 0;
border: 50px solid transparent;
border-top-color: pink;
}
左三角
.kailong{
width:0;
height:0;
border-top:50px solid transparent;
border-bottom:50px solid transparent;
border-right:50px solid red;
}
所谓的界面样式，就是更改一些用户操作样式，以便提高更好的用户体验。
- 更改用户的鼠标样式
- 表单轮廓
- 防止表单域拖拽
???
- pink老师太好啦
- pink老师太好啦
- pink老师太好啦
- pink老师太好啦
- pink老师太好啦
属性值
描述
default
小白 默认
pointer
小手
move
移动
text
文本
not-allowed
禁止
li {
cursor: pointer;
}
给表单添加 outline: 0; 或者 outline: none; 样式之后，就可以去掉默认的蓝色边框。
input {
outline: none;
}
实际开发中，我们文本域右下角是不可以拖拽的
textarea{
resize: none;
}
CSS 的 vertical-align 属性使用场景： 经常用于设置图片或者表单(行内块元素）和文字垂直对齐。
官方解释： 用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效
vertical-align : baseline | top | middle | bottom
???
图片、表单都属于行内块元素，默认的 vertical-align 是基线对齐。
此时可以给图片、表单这些行内块元素的 vertical-align 属性设置为 middle 就可以让文字和图片垂直居中对齐了。
???
bug：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。
主要解决方法有两种：
给图片添加 vertical-align:middle | top| bottom 等。 （提倡使用的）
把图片转换为块级元素 display: block;
单行文本溢出显示省略号–必须满足三个条件：
???
/*1. 先强制一行内显示文本*/
white-space: nowrap; （ 默认 normal 自动换行）
/*2. 超出的部分隐藏*/
overflow: hidden;
/*3. 文字用省略号替代超出的部分*/
text-overflow: ellipsis;
多行文本溢出显示省略号，有较大兼容性问题，适合于webKit浏览器或移动端（移动端大部分是webkit内核）
/*1. 超出的部分隐藏 */
overflow: hidden;
/*2. 文字用省略号替代超出的部分 */
text-overflow: ellipsis;
/* 3. 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 4. 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;
/* 5. 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;
CSS笔记就此已经整理完了，，后面如果发现有需要补充或者有些的不对的地方 我会对文章更改的~???
下面还是要继续学习冲冲冲~
???
“少年有梦，不应止于心动，更要付诸行动”???
先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。自己不成体系的自学效率很低又漫长，而且容易碰到天花板技术停止不前。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。添加下方名片，即可获取全套学习资料哦