CSS定位装饰-黑马程序员=前端零基础

方向	属性名	属性值	含义
水平	left	数字+px	距离左边的距离
水平	right	数字+px	距离右边的距离
垂直	top	数字+px	距离上边的距离
垂直	bottom	数字+px	距离下边的距离

2.3相对定位relative

特点

占有原来的位置
仍然具有标签原有的显示模式特点（例如块级独占一行）
改变位置参照自己原来的位置
如果左右都有，以左为准，上下都有，以上为准

2.4绝对定位absolute

先找已经定位的父级，如果有这样的父级就以这个父级为参照物进行定位
有父级，但是没有定位，以浏览器窗口为参照物进行定位

特点

脱标，不占位置
改变标签的显示模式特点：具有行内块特点（在一行共存，宽高生效）
绝对定位的元素是行内块显示模式，可以设置宽高，如果不设置宽高，宽度和高度就由内容决定，如果没有宽高，也没有内容，就是0

2.5子绝父相水平居中

搭配使用，可以达到我们想要的效果

使用子绝父相，让子盒子在父盒子中水平居中

使用绝对定位的盒子不能使用左右margin auto居中

第一种

            position: absolute;
            left: 50%;     
            margin-left: -150px;  
            /* margin-left的值是盒子的一半 */
            top: 50%;
            margin-top: -150px;

第二种

            position: absolute;
            left: 50%; 
            top: 50%;
            /* 位移：自己宽度高度的一半 */
            transform: translate(-50%,-50%);

2.6固定定位fixed

特点

脱标-不占位置
改变位置参考浏览器窗口
具备行内块特点

3.元素层级关系

默认情况下，定位的盒子，后来者居上

z-index：整数；取值顺序越靠上，z-index的默认值是0.

注意：z-index必须配合定位才生效

不同布局方式元素的层级关系：

标准流<浮动<定位

不同定位之间的层级关系：

相对、绝对、固定默认层级相同
此时HTML中写在下面的元素层级更高，会覆盖上面的元素

4.装饰

4.1垂直对齐方式

属性名：vertical-align

属性值：

属性值	效果
baseline	默认，基线对齐
top	顶部对齐
middle	中部对齐
bottom	底部对齐

给谁设置verti-align，其他元素就像他看齐

当设置图片，给这个图片弄一个背景颜色时，会出现底边多那么一点

解决办法：

            第一种办法
            vertical-align: middle;
            第二种办法
            浏览器把行内和行内块标签当作文字处理，默认基线对齐
            display: block;
            图片是行内块标签，把图片转化成块级元素，就没有基线的事情啦

当设置图片，给这个图片一个背景颜色，想让这个图片在这个背景中居中

方法如下

加line-height / text-align / vertical-align

<style>
        .father
        {
            width: 900px;
            height: 800px;
            background-color: pink;
            line-height: 800px;
            text-align: center;
        }
        img
        {
            width: 400px;
            height: 300px;
            background-color: pink;
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div class="father">
        <img src="images/IMG_20221105_122510757.jpg" alt="">
    </div>
</body>

4.2光标类型

设置鼠标光标在元素上时显示的样式

属性名：cursor

常见属性值：

属性值	效果
default	默认值，通常是箭头
pointer	小手效果，提示用户可以点击
text	工字型，提示用户可以选择文字
move	十字光标，提示用书可以移动

4.3圆角边框

属性名：border-radius

常见取值：数字+px、百分比（圆的半径）

赋值规则：从左上角开始赋值，然后顺时针赋值，没有赋值的看对角！

4.4溢出显示效果-overflow

属性名：overflow

常见属性值：

属性值	效果
visible	默认值，溢出部分可见
hidden	溢出部分隐藏
scroll	无论是否溢出，都显示滚动条
auto	根据是否溢出，自动显示或隐藏滚动条

4.5元素本身的隐藏

让某元素本身在屏幕中不可见

常见属性：

visibility：hidden（占位）

display：none（常用）（不占位）

    <style>
        .box
        {
            display: none;
        }
        .box a:hover img
        {
            display: block;
        }
    </style>