我手把手教出来的徒弟入职仅一个月就靠CSS样式竟受到领导的“大加赞赏”！！！

前端的技术一直更新特别快，特别是框架这块。

但是归根结底，那都是后话，因为我们要想在企业站住脚步，扎根就一定要稳，跟做人是一个道理。起步可以慢，但是我们掌握了一定的技巧后，我们可以融会贯通，做事情事半功倍！

今天给大家带来的第二节课：核心语法阶段——html/css（定位）

一：定位
圆角和鼠标悬停的时候变颜色

• position属性：
  station：默认属性，没有定位
  relative：相对定位
  absolute：绝对定位
  fixed：固定定位

1.相对定位

• relative属性值——相对自身原来位置进行偏移

偏移设置：top,left,right,bottom
left:来描述盒子向右移动；
right：来描述盒子向左移动
top:来描述盒子向下的移动
bottom：描述盒子的向上移动
如果是负数就是相反的方向

相对定位的盒子，不脱离标准流，原有的位置保留不变，其后的元素不能占用其原有的位置。

相对定位的主要用途是作为其内部元素绝对定位时的参照标准。

2.绝对定位

• absolute属性

偏移设置：left，right，top，bottom
绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块

设置成为父子级后：相对于父级进行运动

3.Z-index属性

调整元素定位时的重叠层的上下位置
1.Z-index属性值：整数，默认值为0
2.设置了postion属性时，z-index属性可以设置各元素之间的重叠关系
3.z-index值大的层位于其值小的层的上方

此时的颜色红色在最上面：

当我们加上z-index的时候：
蓝色就会在所有颜色的最前面

3.透明度

1.网页元素透明度

属性：
opacity:x
x值为0~1，值越小越透明 （opacity：0.4；）
filter：alpha（opacity-x）
x的值为0~100，值越小越透明 （filter：alpha（opacity-40））

4.浮动

1.浮动的属性

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。
Float（浮动），往往是用于图像，但它在布局时一样非常有用。
元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。

2.浮动的特性：

1.浮动元素支持所有css样式
2.内容撑开宽度
3.多个元素设置浮动，宽度足够的话，会排在一行
4.脱离文档流
5.提升层级半级

向右浮动

3.overflow属性：

属性：
1.visible：默认值，内容不会被修剪，会呈现在盒子之外。
2.hidden：内容会被修剪，并且其余内容是不可见的
3.scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余内容。
4.auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余内容。

4.clear属性（清除浮动）

属性：
1.left:在左侧不允许浮动元素。
2.right：在右侧不允许浮动元素。
3.both：在左右两侧不允许浮动元素。
4.none：默认值，在允许浮动元素出现在两侧。

前端学习要想精就得静，静下心来，看上去知识点很多很杂，但是你把文章

点赞或者收藏起来，

每次写代码的时候对应着写，代码有时候就像一杯茶，得品，你自然而然意境就和别人拉开差距。

我叫安老师——你的人生解答老师**