CSS—定位与浮动

我就是我 2022-06-17 09:22 267阅读 0赞

### 1.CSS定位 ###

通过css定位可以实现页面元素的指定效果显示。它允许你定义元素框相对于其正常
    位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。
    
    position 定位属性：
    随意摆放元素 而使其不影响其他元素位置，以拖拽元素作为实例
    
    static：  元素按照普通方式生成，按照HTML规定过的规则进行定位。 
    relative：元素框偏移某个距离。元素仍保持其未定位前的形状，原本所占的空间仍保留。
    absolute：元素框从页面元素中被独立出来，使用边偏移来定位。
    fixed：元素框将从页面元素中独立出来，但位置不是相对于文档本身，而是相对于屏幕。

#### 边偏移 ####

定义元素相对其父元素边线的距离
    position：absolute;
    top/right/bottom/left:10px;
    top/right/bottom/left:auto;
    top/right/bottom/left:20%;

#### 链接样式 ####

a: link { text-decoration:none; }   控制链接未访问状态
    a: hover { text-decoration:none; }  控制鼠标悬停状态
    a: active { text-decoration:none; } 控制链接激活状态
    a: visited { text-decoration:none; }控制链接已被访问状态

#### 透明 ####

/*兼容火狐谷歌等浏览器*/
    opacity() 
    /*ie*/
    filter:alpha(opacity=90) ;   0-100
    filter:opacity(50%) 支持百分比
    
    2.  background: rgba(0,0,0,.75);      0-1

#### 阴影 ####

box-shadow:添加一个或多个阴影
    text-shadow:为文字添加阴影

#### 补充 ####

p:first-child{}   选择所处在子元素的第一个p---------兼容所有
    p:last-child{}    选择所处在子元素的最后个p------不兼容ie678
    border-radius 切圆
    a[ href ]  属性选择器
    div a      派生选择器（后代选择器）
    placeholder  输入框提示
    :after   在……之后插入文本内容
    :before 在……之前插入文本内容
    map>area 图片热区（可点击区域图像映射）------------目前淘宝使用居多-dreamweaver可选择区域
    coords    坐标值
    shape     定义区域形状：rect矩形(x1,y1,x2,y2)   
              circle圆形(x,,y,R)
              poly( x1,y1,x2,y2,x3,y3…… )多边形
    
    target：
    _blank 新的标签页打开

居中：text-align:center;

### 2.CSS浮动 ###

浮动：
    float:auto/left/right;
    让元素浮动起来脱离正常流来进行向左或向右移动，直到父级的边缘或浮动元素的边缘
    浮动之后会导致一个问题，飘离出去的元素父级的高会被弹回去而且文字会围绕着这个浮动元素
    
    清除浮动:  clear：{ both }

position定位：
    
    相对定位：relative
            生成一个相对的定位元素，（自己不移动没任何效果，会影响子元素的定位效果）
            1. 以自身进行移动（移动前的位置就是原始位置） 
            2. 占据原来的空间（虽然参考自己原来的位置移动了，但是占据的位置始终没有变化）

![这里写图片描述][SouthEast]

绝对定位：absolute
        以相对于某个元素进行绝对定位（fixed是相对于视窗，与之很像）
        1. 参考定位父级元素进行移动（当最近父级用了除static之外的定位） 
        2. 不占据空间
    
        因为脱离文档流，移动难免与别的元素发生重叠，可以用Z-Index来控制
        它的层级次序值越高所显示在最上面
    
        定位父级：
        除static之外的定位元素， 子元素都会相对于父元素进行定位当没有父级
        使用定位的时候，会以 [浏览器] 的边缘来做相对定位

![这里写图片描述][SouthEast 1]

### fixed固定 ###

position：fixed； 
    会以浏览器视窗来定位，即使页面滚动，也会保持原来的位置，设置上下左右 
    四个属性会使其偏离其正常位置，其他的元素的位置则不会受该元素的影响发
    生位置改变来弥补它偏离后剩下的空隙。

### z-index层级顺序 ###

当有很多元素都被定位重叠或遮住而需要给它展现出来的时候
    z-index就可以做出调整（调整层级关系）
    可以接受负数,值最大的会展示在表面(当相同的时候会被后面的元素覆盖)
    
    ps：z-index 只允许调整使用了定位的元素

[SouthEast]: /images/20220617/f24ec31f49a64699a85144b7fd2b89a2.png
[SouthEast 1]: /images/20220617/0245efd0d25b4e9fb6fff32ede8897ba.png