前端入门05 -- 定位，元素的显示与隐藏，CSS高级技巧

作者: YanZi_33 | 来源:发表于2021-12-20 16:55 被阅读0次

前端入门05 -- 定位，元素的显示与隐藏，CSS高级技巧
前端学习什么？
CSS笔记-下篇
09-补充进阶
css元素显示与隐藏
CSS元素的显示与隐藏
CSS3立体翻转效果
小白前端09-定位/元素隐藏/CSS技巧
CSS进阶(一)
CSS资料二（内容来自黑马培训机构）

定位

定位：将盒子定在某个位置，所以定位也是在摆盒子，按照定位的方式移动盒子；
定位 = 定位模式 + 边偏移；
定位模式：用于指定一个元素在文档中定位方式，它通过CSS的position属性来设置，其值可分为四个；

image.png

边偏移：决定目标元素的最终位置，有如下四个属性：

image.png

静态定位

静态定位：元素默认的定位方式，无定位的意思；
- 语法格式：选择器 {position: static}
- 静态定位按照标准流的特性摆放位置，它没有偏移；
- 静态定位在布局时很少使用；

相对定位

相对定位：元素在移动位置的时候，是相对于它在标准流中的原来位置来说的；
- 语法格式：选择器 {position: relative}
- 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它，不脱标，继续保持原来的位置；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位布局Position</title>

    <style>
        div {
            width: 200px;
            height: 100px;
        }

        .one {
            background-color: blueviolet;
        }

        .two {
            position: relative;
            top: 50px;
            left: 50px;
            background-color: pink;
        }

        .three {
            background-color: red;
        }
    </style>

</head>

<body>
    <div class="one">one</div>
    <div class="two">two</div>
    <div class="three">three</div>
</body>

</html>

效果图如下所示：

image.png

可以看到two设置相对定位时，以它在标准流中原来的位置为基准，进行位置偏移；
two设置相对定位，并没有脱离标准流，依然占据原来的位置，three排列在two原来标准流位置的下方；

绝对定位

绝对定位：元素在定位时，以其祖先元素为基准；
- 语法格式：选择器 {position: absolute}
- 如果没有祖先元素或者祖先元素没有定位，则以浏览器为基准进行定位；
- 如果祖先元素有定位(相对，绝对，固定)，则以最近一级的有定位的的祖先元素为参考点移动位置；
- 绝对定位不再占有原先的位置(脱标)；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位布局Position</title>

    <style>
        div {
            width: 200px;
            height: 100px;
        }

        .one {
            background-color: blueviolet;
        }

        .two {
            position: absolute;
            top: 50px;
            left: 50px;
            background-color: pink;
        }

        .three {
            background-color: red;
        }
    </style>

</head>

<body>
    <div class="one">one</div>
    <div class="two">two</div>
    <div class="three">three</div>
</body>

</html>

效果图如下所示：

image.png

two的祖先元素没有定位，最终以浏览器为基准进行偏移；
two设置绝对定位后，脱标，不会再占据标准流中的原来位置；
three在排列时，会忽略two在标准流中的原来位置，直接排在one的下方；

定位技巧之子绝父相

子绝父相：子级是绝对定位时，父级要用相对定位；
- 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个位置，不会影响到其他兄弟盒子；
- 子盒子的运动范围必须在父盒子内部，因此父盒子需要加定位，因为子盒子的定位基准是有定位的祖先元素；
- 父盒子布局时，需要占有位置，因此父盒子只能是相对定位；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        li {
            list-style: none;
        }
        
        .pic {
            height: 150px;
            background-color: red;
        }
        
        .icon {
            position: absolute;
            right: -10px;
            top: 10px;
            width: 20px;
            height: 20px;
            background-color: slateblue;
        }
        
        ul li {
            position: relative;
            width: 228px;
            height: 270px;
            background-color: pink;
        }
    </style>

</head>

<body>

    <ul class="clearfix">
        <li>
            <div class="icon"></div>
            <div class="pic"></div>

            <h4> ThinkPad 地方喝酒房贷首付款打发时computer game</h4>
            <div class="info"> <span>高级</span> 人才 1000左右</div>
        </li>
    </ul>
</body>
</html>

效果图如下：

image.png

固定定位

固定定位：元素固定在浏览器可视区域的位置，可以在浏览器页面滚动时元素的位置不会发生改变；
- 语法格式：选择器 {position: fixed}
- 以浏览器的可视窗口为参照点移动元素；
- 与根父元素没有任何关系；
- 不会随着浏览器页面滚动而滚动；
- 固定定位不会占用原先的位置，也是脱标的，其可看成是一种特殊的绝对定位；
如何让固定定位的盒子固定在版心右侧的位置：
- 让固定定位的盒子的left: 50% 占浏览器的一半的位置；
- 让固定定位的盒子的margin-left: 版心宽度的一半；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .w {
            width: 800px;
            height: 1400px;
            background-color: pink;
            margin: 0 auto;
        }
        
        .fixed {
            position: fixed;
            /* 走浏览器宽度的一半 */
            left: 50%;
            margin-left: 405px;
            width: 50px;
            height: 150px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="fixed"></div>
    <div class="w"></div>
</body>
</html>

效果图如下所示：

image.png

粘性定位

粘性定位：可视为是相对定位于固定定位的混合；
- 语法格式：选择器 {position: sticky; top: 10px}
- 以浏览器的可视窗口为参照点移动元素(固定定位的特点)；
- 占有原先的位置(相对定位的特点)；
- 必须添加top，left，right，bottom其中一个才会有效；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            height: 3000px;
        }
        
        .nav {
            position: sticky;
            top: 0;
            width: 800px;
            height: 50px;
            background-color: pink;
            margin: 100px auto;
        }
    </style>
</head>

<body>
    <div class="nav">我的导航栏</div>
</body>
</html>

定位的总结：

image.png

定位叠放次序z-index：使用定位布局时，可能会出现盒子重叠的情况，此时，可使用z-index来控制盒子的前后次序(Z轴)；
- 语法格式：选择器 {z-index: 1}；
- 数值可以是正整数，负整数或0，默认是auto，数值越大，盒子越靠上；
- 如果属性值相同，则按照书写顺序，后来居上；
- 数字后面加单位；
- 只有定位的盒子才有z-index属性；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .box {
            position: absolute;
            top: 0;
            width: 200px;
            height: 200px;
        }
        
        .one {
            background-color: pink;
            z-index: 1;
        }
        
        .two {
            background-color: green;
            z-index: 2;
        }
        
        .three {
            background-color: hotpink;
            z-index: 3;
        }
    </style>

</head>

<body>
    <div class="box one">熊大</div>
    <div class="box two">熊二</div>
    <div class="box three">光头强</div>
</body>
</html>

绝对定位的盒子居中：加了绝对定位的盒子不能通过margin：0 auto进行水平居中，可通过下列计算实现水平和垂直居中：
- left: 50%：让盒子左侧移动到父级元素的水平中心位置；
- margin-left: -100px：让盒子向左移动自身宽度的一半；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .box {
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -100px;
            margin-top: -100px;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>

</head>

<body>
    <div class="box"></div>
</body>
</html>

定位的特殊性：
- 行内元素加绝对定位或者固定定位，可以直接设置高度和宽度；
- 块级元素添加绝对定位或者固定定位，如果不给宽度或者高度，默认大小是内容的大小；
- 脱标的盒子不会触发外边距塌陷；
- 浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字(图片)，但绝对定位(固定定位)会完全压住盒子，主要是因为浮动最初是为了文字环绕的效果，所以文字会围绕着浮动元素；

淘宝焦点图

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style: none;
        }
        
        .box {
            position: relative;
            width: 400px;
            height: 300px;
            background-color: pink;
            margin: 100px auto;
        }
        
        .prev {
            position: absolute;
            left: 0;
            top: 50%;
            margin-top: -15px;
            width: 30px;
            height: 30px;
            background-color: rgba(0, 0, 0, 0.3);
        }
        
        .next {
            position: absolute;
            right: 0;
            top: 50%;
            margin-top: -15px;
            width: 30px;
            height: 30px;
            background-color: rgba(0, 0, 0, 0.3);
        }
        
        .bottom-nav {
            position: absolute;
            left: 50%;
            margin-left: -45px;
            bottom: 15px;
            background-color: red;
            width: 90px;
            height: 20px;
        }
        
        .bottom-nav li {
            float: left;
            width: 8px;
            height: 8px;
            background-color: #fff;
            border-radius: 50%;
            margin: 7px;
        }
        
        .bottom-nav .selected {
            background-color: chocolate;
        }
    </style>
</head>

<body>

    <div class="box">
        <div class="pic"></div>
        <div class="prev"></div>
        <div class="next"></div>
        <ul class="bottom-nav">
            <li class="selected"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

</body>

</html>

效果图如下：

image.png

网页布局总结：
- 一个完整的网页，是标准流，浮动和定位一起完成的布局；
- 标准流可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流；
- 浮动可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局；
- 定位其最大的特点是有层叠的概念，就是可以让多个盒子前后压叠来显示，如果元素自由在某个盒子内移动就用定位布局；

元素的显示与隐藏

通过display属性来控制元素的显示与隐藏；
- display: none：隐藏目标元素；
- display: block：将目标元素转换为块级元素，同时还有显示目标元素的含义；
- 元素隐藏后，不会再占用原来的位置；
visibility属性用于指定一个元素应可见还是隐藏；
- visibility: visible：元素可见；
- visibility: hidden：元素隐藏；
- 元素隐藏后，依然会占用原来的位置；
overflow：指定了如果元素的内容溢出了元素的边框时，会发生什么；
- overflow: visible：不剪切溢出的部分也不添加滚动条；
- overflow: hidden：剪切溢出的部分；
- overflow: scroll：无论是否溢出，都会添加滚动条；
- overflow: auto：溢出的时候会添加滚动条不溢出时不显示滚动条；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            position: relative;
            width: 444px;
            height: 320px;
            background-color: pink;
            margin: 50px auto;
        }
        
        .pic {
            width: 100%;
            height: 100%;
            background-color: green;
        }
        
        .mask {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
        }
        
        .box:hover .mask {
            display: block;
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="" alt="" class="pic">
        <div class="mask"></div>
    </div>
</body>

</html>

正常情况下，mask遮罩隐藏，当鼠标经过目标元素时，才会显示mask遮罩；

CSS高级技巧

精灵图技术

为什么要使用精灵图：为了有效的减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术；
精灵图的核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了；
精灵技术主要针对于背景图片的使用，就是把多个小背景图片整合到一张大图片中，这个大图片也称为sprites精灵图；
使用精灵图的具体步骤：
- 首先目标元素设置背景图片为精灵图，默认显示的是精灵图的左上角的图片数据；
- 然后移动精灵图的位置，此时使用的是background-position属性，显示指定区域的图片数据；
- background-position坐标值一般是负数值；
- 注意使用工具精确的测量目标图片在精灵图中的位置和尺寸；

字体图标iconfont

使用场景：主要用于显示网页中通用，常用的一些小图标；
一味的使用精灵图，精灵图也存在缺点：
- 图片文件比较大；
- 图片本身放大和缩小会出现失真；
- 一旦精灵图制作完成，需要更换会比较麻烦；
字体图标技术的出现，可以很好的弥补上述精灵图的缺陷；
字体图标展示的是图标，其本质属于字体；
字体图标iconfont的优点：
- 轻量级：一个字体图标要比一系列的图像要小，一旦字体加载了，图标就会马上显示出来，减少了服务器请求；
- 灵活性：本事是文字，可以随意修改颜色，设置其他特效；
- 兼容性：几乎支持所有浏览器；
字体图标的下载：
- iconmoon字体库网站
- 阿里iconfont字体库网站
字体图标的引入：
- 从iconmoon网站上下载字体图标，将解压缩之后的font文件夹，放入页面根目录下，如下所示：

image.png

然后在CSS样式中全局声明字体，一定注意字体文件的路径，如下所示：

image.png

字体图标的使用：

image.png

字体图标的追加：添加新的字体图标到原来的字体文件中；
- 首先再次打开iconmoon字体库网站；

Snip20211221_15.png

在原先选择的字体库的基础上再添加新的字体，然后下载导出新的压缩包，最后解压缩，再将相关文件替换掉工程中的文件即可；

CSS三角

案例代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .box1 {
            width: 0;
            height: 0;
            border-top: 10px solid pink;
            border-left: 10px solid red;
            border-right: 10px solid blue;
            border-bottom: 10px solid green;
        }
        
        .box2 {
            width: 0;
            height: 0;
            border: 10px solid transparent;
            border-left-color: pink;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

效果图如下：

image.png

案例：京东三角形

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .box1 {
            width: 0;
            height: 0;
            border-top: 10px solid pink;
            border-left: 10px solid red;
            border-right: 10px solid blue;
            border-bottom: 10px solid green;
        }
        
        .box2 {
            width: 0;
            height: 0;
            border: 10px solid transparent;
            border-left-color: pink;
        }
        
        .jd {
            position: relative;
            width: 120px;
            height: 240px;
            margin-top: 100px;
            background-color: pink;
        }
        
        .jd span {
            position: absolute;
            right: 15px;
            top: -10px;
            width: 0;
            height: 0;
            line-height: 0;
            font-size: 0;
            border: 5px solid transparent;
            border-bottom-color: pink;
        }
    </style>
</head>

<body>

    <div class="box1"></div>
    <div class="box2"></div>
    <div class="jd">
        <span></span>
    </div>

</body>

</html>

效果图如下：

image.png

CSS用户界面样式

界面样式：即更改一些用户操作样式，以便提高更好的用户体验；
更改用户鼠标样式：
- 语法格式：li {cursor: pointer}，设置或检索在对象上移动鼠标指针采用何种系统预定义的光标形状；

image.png

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <ul>
        <li style="cursor: default;">的说三道四颠三倒四</li>
        <li style="cursor: pointer;">的说三道四颠三倒四</li>
        <li style="cursor: move;">的说三道四颠三倒四</li>
        <li style="cursor: text;">的说三道四颠三倒四</li>
        <li style="cursor: not-allowed;">的说三道四颠三倒四</li>
    </ul>
</body>
</html>

轮廓线outline：给表单添加outline: 0 或者outline: none 样式之后，就可去掉默认的蓝色边框；
防止拖拽文本域resize：给文本域添加resize: none样式，可取消用户拖拽；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        input,
        textarea {
            outline: none;
        }
        
        textarea {
            resize: none;
        }
    </style>

</head>

<body>
    <input type="text">
    <textarea name="text" id="" cols="30" rows="10"></textarea>
</body>
</html>

vertical-align属性的应用

其用于设置图片或者表单(行内块元素)和文字垂直对齐，只针对于行内元素或者行内块元素才有效；
语法格式如下：

image.png

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        img {
            vertical-align: bottom;
        }
    </style>

</head>

<body>
    <img src="120.png" alt="">都是艰苦奋斗死了
</body>
</html>

效果图入下：

image.png

解决图片底部默认空白缝隙问题：原因在于行内块元素会和文字的基线对齐；
解决方案如下：
- 给图片添加vertical-align: middle|top|bottom；(推荐使用)
- 将图片转换为块级元素 display: block；
溢出的文本省略号显示
单行文本溢出显示省略号，必须满足三个条件：
- 首先强制一行；
- 溢出的部分进行隐藏；
- 文字溢出时用省略号显示；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        div {
            width: 150px;
            height: 80px;
            background-color: pink;
            margin: 100px auto;
            /* 首先强制一行 */
            white-space: nowrap;
            /* 溢出的部分进行隐藏 */
            overflow: hidden;
            /* 文字溢出时用省略号显示 */
            text-overflow: ellipsis;
        }
    </style>

</head>
<body>
    <div>似懂非懂是否颠三倒四舒服的沙发</div>
</body>
</html>

多行文本溢出显示省略号，有较大的兼容性能问题，适合于webkit或移动端；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        div {
            width: 150px;
            height: 80px;
            background-color: pink;
            margin: 100px auto;
            /* 实现多行 有省略号 */
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
    </style>

</head>

<body>
    <div>似懂非懂是否颠三倒四舒服的懂非懂是否颠三倒四舒服的沙发</div>
</body>
</html>

常见的布局技巧

第一种：margin的负值运用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        li {
            list-style: none;
        }
        
        ul li {
            position: relative;
            float: left;
            width: 150px;
            height: 100px;
            border: 1px solid red;
            /* 设置负值 */
            margin-left: -1px;
        }
        
        ul li:hover {
            /* 相对定位 会压住标准流和浮动 */
            /* position: relative; */
            border: 1px solid blue;
            z-index: 1;
        }
    </style>

</head>

<body>

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

</body>

</html>

当鼠标经过盒子时，边框颜色发生变化；
- 当盒子没有定位时，设置盒子为相对定位，那么会压住标准流和浮动；
- 当盒子有相对定位时，提升盒子的显示层级z-index即可；
第二种：文字围绕浮动元素：主要是利用浮动元素不会压住文字的特性来实现这种效果；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 300px;
            height: 120px;
            background-color: pink;
            margin: 50px auto;
            padding: 5px;
        }
        
        .pic_box {
            float: left;
            width: 120px;
            height: 120px;
            margin-right: 5px;
        }
        
        img {
            width: 120px;
            height: 120px;
        }
    </style>

</head>

<body>
    <div class="box">
        <div class="pic_box">
            <img src="120.png" alt="">
        </div>
        <p>的舒服的是割发代首股份大股东发送给对方发多少发多少</p>
    </div>
</body>
</html>

效果如下：

image.png

第三种：行内块巧妙运用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            margin-top: 100px;
            text-align: center;
        }
        
        .box a {
            display: inline-block;
            width: 36px;
            height: 36px;
            background-color: #f7f7f7;
            border: 1px solid #ccc;
            text-align: center;
            line-height: 36px;
            text-decoration: none;
            color: #333;
        }
        
        .box .prev {
            width: 85px;
        }
        
        .box .next {
            width: 85px;
        }
        
        .box .current,
        .box .elp {
            background-color: #fff;
            border: none;
        }
        
        .box input {
            width: 45px;
            height: 36px;
            border: 1px solid #ccc;
            outline: none;
        }
        
        .box button {
            width: 60px;
            height: 36px;
        }
    </style>

</head>

<body>

    <div class="box">
        <a href="#" class="prev">&lt;&lt;上一页</a>
        <a href="#" class="current">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
        <a href="#">6</a>
        <a href="#" class="elp">...</a>
        <a href="#" class="next">&gt;&gt;下一页</a> 到第
        <input type="text">页
        <button>确定</button>
    </div>

</body>

</html>

效果图如下：

image.png

第四种：CSS三角的运用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box1 {
            width: 0;
            height: 0;
            border-top: 100px solid transparent;
            border-right: 50px solid red;
            border-bottom: 0 solid blue;
            border-left: 0 solid green;
        }
        
        .price {
            width: 160px;
            height: 24px;
            margin: 0 auto;
            border: 1px solid red;
        }
        
        .one {
            position: relative;
            float: left;
            width: 90px;
            height: 100%;
            background-color: red;
            text-align: center;
            color: white;
            margin-right: 3px;
        }
        
        .one i {
            position: absolute;
            top: 0;
            right: 0;
            width: 0;
            height: 0;
            border-top: 24px solid transparent;
            border-right: 10px solid white;
            border-bottom: 0 solid red;
            border-left: 0 solid green;
        }
    </style>

</head>

<body>

    <div class="box1"></div>
    <div class="price">
        <span class="one">$1650
            <i></i>
        </span>
        <span class="two">$4563</span>
    </div>

</body>

</html>

效果图如下：

image.png

CSS初始化

不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，我们需要对CSS进行初始化；
创建CSS初始化文件 base.css ，代码如下：

/* 所有标签的内外边距清零 */
* {
    margin: 0;
    padding: 0;
    /* CSS3盒子模型 */
    box-sizing: border-box;
}

/* em 和 i标签的文字不倾斜 */
em,i {
    font-style: normal;
}

/* 去掉li的小圆点 */
li {
    list-style: none;
}

img {
    /* border: 0 照顾低版本浏览器 若图片外面包含了链接 会有边框的问题 */
    border: 0;
    /* 取消图片底部有空白缝隙的问题 */
    vertical-align: middle;
}

/* 当鼠标经过按钮时，鼠标样式变成小手 */
button {
    cursor: pointer;
}

/* 设置链接颜色 去除下划线*/
a {
    color: #666;
    text-decoration: none;
}

a:hover {
    color: #c81623;
}

/* 设置 背景颜色 字体 字体颜色 */
body {
    background-color: #fff;
    font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    color: #666;
}

/* 隐藏 */
.hide,
.none {
    display: none;
}

/* 清除浮动 */
.clearfix:after {
    visibility: hidden;
    clear: both;
    content: ".";
    display: block;
    height: 0;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

前端入门05 -- 定位，元素的显示与隐藏，CSS高级技巧
定位定位：将盒子定在某个位置，所以定位也是在摆盒子，按照定位的方式移动盒子；定位 = 定位模式 + 边偏移； ...
前端学习什么？
HTML5、CSS3、浮动、定位、盒子模型、高级技巧等等。不用说，这是我们前端入门的最基本要求，目的是能完成页面...
CSS笔记-下篇
22. CSS高级技巧目标理解能说出元素显示隐藏最常见的写法能说出精灵图产生的目的能说出去除图片底侧空白缝隙的...
09-补充进阶
CSS高级技巧目标理解能说出元素显示隐藏最常见的写法能说出精灵图产生的目的能说出去除图片底侧空白缝隙的方法应...
css元素显示与隐藏
概念让一个元素在页面中隐藏或者显示出来。 1.display 属性作用：设置一个元素如何显示 display...
CSS元素的显示与隐藏
让一个元素在页面中隐藏或者显示出来。 1、display 显示隐藏（模式转化也是此属性） none 隐藏对象隐...
CSS3立体翻转效果
HTML结构： CSS思路：父元素flip相对定位，子元素front,back绝对定位背面隐藏backface...
小白前端09-定位/元素隐藏/CSS技巧
1.定位 1.1 定位基础需要定位的原因：1.当需要某个元素自由的在盒子内移动位置，并且压住其他盒子时。2.当滚...
CSS进阶(一)
元素的显示与隐藏在CSS中有三个显示和隐藏的单词比较常见，我们要区分开，他们分别是 display visibi...
CSS资料二（内容来自黑马培训机构）
元素的显示与隐藏在CSS中有三个显示和隐藏的单词比较常见，我们要区分开，他们分别是 display visibi...

前端入门05 -- 定位，元素的显示与隐藏，CSS高级技巧

定位

静态定位

相对定位

绝对定位

定位技巧之子绝父相

固定定位

粘性定位

淘宝焦点图

元素的显示与隐藏

CSS高级技巧

精灵图技术

字体图标iconfont

CSS三角

CSS用户界面样式

vertical-align属性的应用

常见的布局技巧

CSS初始化

相关文章

前端入门05 -- 定位，元素的显示与隐藏，CSS高级技巧

前端学习什么？

CSS笔记-下篇

09-补充进阶

css元素显示与隐藏

CSS元素的显示与隐藏

CSS3立体翻转效果

小白前端09-定位/元素隐藏/CSS技巧

CSS进阶(一)

CSS资料二（内容来自黑马培训机构）

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读