HTML之CSS——定位与浮动

一.定位

圆角和鼠标悬停的时候变颜色

示例

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

1.相对定位

• relative属性值
  相对自身原来位置进行偏移
  偏移设置：top,left,right,bottom
  left:来描述盒子向右移动；
  right：来描述盒子向左移动
  top:来描述盒子向下的移动
  bottom：描述盒子的向上移动
  如果是负数就是相反的方向
• 相对定位的盒子，不脱离标准流，原有的位置保留不变，其后的元素不能占用其原有的位置。

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

  
  示例
  示例

2.绝对定位

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

  
  示例
  示例
  示例
  

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

  
  示例

二.Z-index属性

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

  
  示例
  

  此时的颜色红色在最上面

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

三.透明度

1.网页元素透明度

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

  
  透明度示例

四.浮动

1.浮动的属性

属性

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

2.浮动的特性：

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

向右浮动
父子级之间的浮动

3.overflow属性

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

  
  示例
  示例1
  示例

4.clear属性（清除浮动）

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

  
  示例
  

  （此文章仅作为个人学习笔记使用，如有错误欢迎指正~）