本文已参与「新人创作礼」活动，一起开启掘金创作之路。

8、定位

8.1 使用场景

1.可以解决盒子与盒子之间的层叠问题

·定位之后的元素层级最高，可以层叠在其他盒子上面

2.可以让盒子始终固定在屏幕中的某个位置

8.2使用方式

1.设置定位方式

属性名：position

常见属性值：

2.设置偏移值

偏移值设置分为两个方向，水平和垂直方向各选一个使用即可

选取的原则一般是就近原则（离哪边近用哪个）

8.2.1相对定位（relative）

相对定位position的属性值是什么？

·relative

1.相对定位是否需要配合方位属性实现移动？

·需要配合方位属性实现移动

2.相对定位的元素相对于谁进行移动？

·相对于自己原来位置进行移动

3.相对定位的元素在网页中是否占位置？

·在页面中占位置→没有脱标

ps：

如果left和right都有，以left为准；top和bottom都有以top 为准

8.2.2绝对定位（absolute）

1.先找已经定位的父级，如果有这样的父级就以这个父级为参照物进行定位；（此父级是广义的父级，就近查找父级，如果逐层找不到这样的父级就以浏览器为参考进行定位）

有父级，但父级没有定位，以浏览器窗口为参照为进行定位

特点：

1、脱标，不占位

2、改变标签的显示模式特点：具备行内块特点（在一行共存，宽高生效）

ps：实际应用中一般父级使用相对定位，子级使用绝对定位（子绝父相）

8.2.3 固定定位

代码：position:fixed；特点：

1.需要配合方位属性实现移动

2.相对于浏览器可视区域进行移动

3.在页面中不占位置→已经脱标

应用场景：

1.让盒子固定在屏幕中的某个位置

·box{
position:fixed；
  left:0；
  width：200px；
  height：200px；
  background-color:pink；
}

8.3定位居中

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

解决方法：按百分比移动50%后调整外边距

高级改法：使用CSS3中的transform

.box{
  /*1.绝对定位的盒子不能使用左右margin auto居中*/
  position:absolute；/*margin:e auto；*/
    /*1eft：5e%，整个盒子移动到浏览器中间偏右的位置*/
    left：50%；
    top：50%；
    transform:translate（-50%，-50%）；
    width：400px；
    height：300px；
    background-color：□pink；
}

8.4元素层级问题

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

·标准流<浮动<定位

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

·相对、绝对、固定默认层级相同

·此时HTML中写在下面的元素层级更高，会覆盖上面的元素

.z-index:整数；取值越大，显示顺序越靠上，z-index默认值是0

9、装饰

基线：浏览器文字类型元素排版中存在用于对齐的基线（baseline）

9.1垂直对齐方式

属性名：vertical-align

属性值

浏览器遇到行内和行内块标签当作文字处理，默认文字是按基线对齐

解决方法：

input{
  height:50px;
  box-sizing:border-box;
  vertical-align:middle;
}

9.2光标类型

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

属性名：cursor

常见属性值：

9.3边框圆角

场景：让盒子四个角变得圆润，增加页面细节，提升用户体验

属性名：border-radius

常见取值：数字+px、百分比

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

原理：

没给的位置代表跟对角取值相同

常见应用：

/*画一个正圆*/
1.盒子必须是正方形
2.设置边框圆角为盒子宽高的一半→border-radius：50%

/*胶囊按钮*/
1.盒子要求是长方形
2.设置→border-radius：盒子高度的一半

9.4溢出部分显示效果

溢出部分：指的是盒子内容部分所超出盒子范围的区域

场景：控制内容溢出部分的显示效果，如：显示、隐藏、滚动条.…

属性名：overflow

常见属性值

9.5元素本身隐藏

场景：让某元素本身在屏幕中不可见。如：鼠标：hover之后元素隐藏

常见属性：

1.visibility:hidden（占位）

2.display:none（不占位）

例：

实现鼠标悬停时显示一个色块，鼠标不悬停时隐藏的效果：

 <style>
        .father {
            width: 200px;
            /* height: 200px; */
        }
        .son1{
           display: none;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .son2{
            width: 200px;
            height: 200px;
            background-color: green;
        }
        .father:hover .son1{
            display:block;
        }
    </style>

<body>
    <div class="father">
        <div class="son1"></div>
        <div class="son2"></div>
    </div>
   
</body>

9.6元素整体透明度

场景：让某元素整体（包括内容）一起变透明

属性名：opacity

属性值：0~1之间的数字

·1：表示完全不透明

·0：表示完全透明

注意点：

opacity会让元素整体透明，包括里面的内容，如：文字、子元素等.……

ps内容

css书写顺序：

1.浮动/display

2.盒子模型：margin border padding宽度高度背景色

3.文字样式

好处是浏览器执行效率更高

4.控制placeholder的文字样式：

.选择器 input::placeholder{
    font-size: 14px;
    color:#bfbfbf;
}

CSS进阶（二）