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

2021-12-20 本文已影响0人 YanZi_33

定位

定位：将盒子定在某个位置，所以定位也是在摆盒子，按照定位的方式移动盒子；
定位 = 定位模式 + 边偏移；
定位模式：用于指定一个元素在文档中定位方式，它通过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高级技巧

定位

静态定位

相对定位

绝对定位

定位技巧之子绝父相

固定定位

粘性定位

淘宝焦点图

元素的显示与隐藏

CSS高级技巧

精灵图技术

字体图标iconfont

CSS三角

CSS用户界面样式

vertical-align属性的应用

常见的布局技巧

CSS初始化

猜你喜欢

热点阅读