前言

这次介绍一些css定位以及显示隐藏的内容，还有小的拓展知识。

一、CSS定位

1、为什么需要定位？

由于标准流和浮动无法快速实现，浮动可以让多个块级盒子一行没有缝隙排列显示；某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子；将盒子定在某一个位置，也是在摆盒子。

2.定位组成

定位=定位模式+边偏移；定位模式用于指定一个元素在文档的定位方式，边偏移决定了元素最终位置。
5种定位模式：static静态定位、relative相对定位、absolute绝对定位、fixed 固定定位、sticky粘性定位
static静态定位：position ：static；按照标准流特性摆放位置，没有位偏移，很少用到；
relative相对定位：相对定位是元素在移动位置的时候，是相对于它原来的位置来说的，参照点是自己原来的位置；它不脱标，继续保留原来位置，原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式待它。
absolute绝对定位：绝对定位是元素在移动位置时候，相对于它祖先元素来说的；如果祖先元素有定位，以最近一级有定位元素为参考点移动位置；绝对定位不占有位置-脱标。
fixed 固定定位：固定定位是元素固定在浏览器可视区位置，以浏览器可视窗口为参照点移动，在页面滚动时元素位置不会改变；和父元素无关；不占有位置；
固定在版心右侧位置小技巧：让固定定位的盒子left：50%，走到浏览器可视区一半位置；让它margin-left版心宽度一半位置，就可以右对齐了
sticky粘性定位：粘性定位是以浏览器窗口为参照点，占有位置，必须添加其中一个top、bottom、right、left才可以
子绝父相：子级是绝对定位，父级要用相对定位，绝对和相对定位经常搭配使用。
边偏移：top、bottom、left、right四个值
注意：定位叠放次序z-index，它控制盒子前后次序，值可以是正负整数或0，数值越大盒子越往上，数值后面没有单位。只有在定位中才可以使用

3.定位的拓展

绝对定位的盒子居中：水平居中：left：50%让盒子左侧移动父级元素水平中心位置，再margin-left让盒子左移自身宽度的一半；垂直居中：再top：50%，margin-top自身高度一半

定位的特殊性：行内元素添加绝对定位或固定定位，可以直接设置高度和宽度；块级元素添加绝对或固定定位，如果不给高度或宽度，默认是内容的大小；脱标的盒子不会触发外边距塌陷（合并的问题）

绝对定位或固定定位会完全压住盒子：浮动元素不同，只会压住下面标准流的盒子，但是不会压住在盒子里面的文字图片，但是绝对定位会压住下面标准流的所有内容。

以下展示一个淘宝轮播图的案例：

 <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            position: relative;
            width: 519px;
            height: 280px;
            background-color: #ccc;
            margin: 120px auto;

        }
        .box img {
            width: 100%;
            height: 100%;
        }
        .one {
            position: absolute;
            left: 0;
            top: 50%;
            margin-top: -15px;
            width: 20px;
            height: 33px;
            text-align: center;
            line-height: 33px;
            color: white;
            border-top-right-radius: 14px;
            border-bottom-right-radius: 14px;
            text-decoration: none;
            background-color:rgba(0, 0,0, .3);
        }
        .right {
            position: absolute;
            right: 0;
            top: 50%;
            margin-top: -15px;
            width: 20px;
            height: 33px;
            text-align: center;
            line-height: 33px;
            color: white;
            border-top-left-radius: 14px;
            border-bottom-left-radius: 14px;
            text-decoration: none;
            background-color:rgba(0, 0,0, .3);
        }
        ul {
            position: absolute;
            bottom: 15px;
		    left: 50%;
		    margin-left: -90px;
		    width: 180px;
		    height: 13px;
        }
        ul li{
            background: #000;
    		width: 25px;
		    height: 5px;
		    display: inline-block;
		    overflow: hidden;
		    margin-left: 5px;
		    cursor: pointer;
        }
        li {
            list-style: none;
        }
        ul .no1 {
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="img/1.jpg" alt="">
        <a href="#" class="one">&lt;</a>
        <a href="#" class="right">&gt;</a>
        <ul>
            <li class="no1"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>

    </div>
</body>
</html>

效果图：

二、元素的显示与隐藏

简单来说就是让一个元素在页面中显示或隐藏，有以下几个属性：

display属性：display：none隐藏对象； display;block显示元素； display隐藏元素后，不在占有原来的位置
visibility可见属性：visible元素可见，hidden元素隐藏，visibility隐藏元素后，继续占有原来的位置
overflow溢出：隐藏超出内容的部分，包含四个属性值：

visible属性值：不剪切内容也不添加滚动条；

hidden属性值：不显示超出尺寸的内容，超出的部分隐藏；

scroll属性值：不够超出内容否，总显示滚动条；

auto属性值：超出自动显示滚动条，不超出不显示滚动条

三、CSS进阶

1.css用户界面

鼠标样式：属性是cursor，属性值 default默认的小白、pointer小手、move移动、text文本、not-allowed禁止形状

取消轮廓线：给表单添加outline：0或outline：none；input{outline：none；}

防止文本域拖曳：属性resize：none；即可

2.vertical-align属性应用

经常用于设置图片或表单（行内块元素）和文字垂直对齐，只针对行内和行内块元素
属性值有baseline基线、top顶端对齐、middle中间、bottom与元素底部对齐
图片表单文字行内块元素设置middle就可以让文字和图片居中对齐
解决图片底部默认空白缝隙问题：给图片添加vertical-align：bottom或top或middle；给图片转换为块级元素display：block，这种不提倡

3.溢出的文字省略号显示

a、单行文本溢出显示省略号：必须满足三个条件：

先强制换行显示white-space：nowrap；
超出部分隐藏overflow：hidden；
文字省略号替代超出部分text-overflow：ellipsis

b、多行文本显示省略号：多行文本有很大的兼容性问题，适合webkit浏览器或移动端

overflow：hidden；
text-overflow：ellipsis；
弹性伸缩盒子模型显示
display：-webkit-box；
限制在一个块元素显示的文本的行数
-webkit-line-clamp：2；
设置或检索伸缩盒子对象的子元素排列方式
-webkit-box-orient：vertical；
直接复制即可

总结

以上就是今天分享的内容，比较详细介绍了定位的内容和一些使用，也提供了一些平时常用的拓展以及css进阶的一些知识点，这些在工作和学习中都能有用，使我们快速便捷地掌握和理解。这些希望对大家可以有很大帮助，谢谢！

原文链接：https://blog.csdn.net/txq231254/article/details/122043972