CSS高级技巧

标签：技巧 vertical color align 高级 height width border CSS

一、精灵图

1、为什么需要精灵图

1）为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了 CSS 精灵技术（也称 CSS Sprites、CSS 雪碧）。

2）核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了。

2、精灵图的使用

1）精灵图主要针对于小的背景图片使用。

2）移动背景图片位置 --- background-position 。

3）一般情况下精灵图都是负值。

x轴右边走是正值，左边走是负值
y轴下边走是正值，上边走是负值

3、精灵图案例

效果如下：

具体实现：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>精灵图练习</title>
    <style>
        div {
            float: left;
            background: url(images/abcd.jpg) no-repeat;
        }

        .box1 {
            width: 107px;
            height: 107px;
            background-position: -253px -563px;
        }

        .box2 {
            width: 64px;
            height: 108px;
            background-position: -324px -143px;
        }

        .box3 {
            width: 110px;
            height: 116px;
            background-position: -256px -275px;
        }

        .box4 {
            width: 115px;
            height: 110px;
            background-position: -365px -561px;
        }

        .box5 {
            width: 116px;
            height: 110px;
            background-position: -476px -425px;
        }

        .box6 {
            width: 100px;
            height: 111px;
            background-position: -476px 0px;
        }
    </style>
</head>

<body>
    <div class="box1">x</div>
    <div class="box2">i</div>
    <div class="box3">n</div>
    <div class="box4">y</div>
    <div class="box5">u</div>
    <div class="box6">e</div>
</body>

</html>

二、字体图标

1、产生与优点

1）使用场景：主要用于显示网页中通用、常用的一些小图标。

2）字体图标：展示的是图标，本质属于字体。

3）优点

灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等
兼容性：几乎支持所有的浏览器

4）注意：字体图标不能替代精灵技术。

2、字体图标的下载

icomoon 字库 SVG Icon Libraries and Custom Icon Font Organizer ❍ IcoMoon
阿里 iconfont 字库 iconfont-阿里巴巴矢量图标库

3、字体图标的引入

1）把下载包里面的 fonts 文件夹放入页面根目录下。

2）在 CSS 样式中全局声明字体：把这些字体文件通过css引入到我们页面中。

 @font-face {
   font-family: 'icomoon';
   src:  url('fonts/icomoon.eot?7kkyc2');
   src:  url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
     url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
     url('fonts/icomoon.woff?7kkyc2') format('woff'),
     url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
   font-weight: normal;
   font-style: normal;
 }

3）html 标签内添加小图标。
<span></span>

4）给标签定义字体。
 span {
   font-family: "icomoon";
 }

4、字体图标的追加

把压缩包里面的 selection.json 重新上传，然后选中自己想要新的图标，重新下载压缩包，并替换原来的文件。

三、CSS三角

我们用css 边框可以模拟三角效果
宽度高度为0
4个边框都要写，只保留需要的边框颜色，其余的不能省略，都改为 transparent 透明
为了照顾兼容性低版本的浏览器，加上 font-size: 0; line-height: 0;

举例：

具体实现：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三角制作</title>
    <style>
        .box1,
        .box2 {
            width: 0;
            height: 0;
            line-height: 0;
            font-size: 0;
            border: 100px solid;
            border-top-color: palegreen;
            border-bottom-color: salmon;
            border-left-color: blue;
            border-right-color: brown;
        }

        .box2 {
            margin-top: 60px;
            border-color: transparent;
            border-left-color: pink;
        }
    </style>
</head>

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

</html>

京东三角案例

效果如下：

具体实现：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三角练习</title>
    <style>
        .box {
            position: relative;
            width: 200px;
            height: 300px;
            background-color: plum;
        }

        span {
            position: absolute;
            top: -10px;
            right: 15px;
            width: 0;
            height: 0;
            line-height: 0;
            font-size: 0;
            border: 5px solid transparent;
            border-bottom-color: plum;
        }
    </style>
</head>

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

</html>

四、CSS用户界面样式

1、鼠标样式 cursor

1）语法
 li {
 	cursor: pointer; 
 }
2）设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

2、轮廓线 outline

给表单添加 outline: 0; 或者 outline: none; 样式之后，就可以去掉默认的蓝色边框。
input {
 	outline: none; 
}

3、防止拖拽文本域 resize

文本域右下角是不可以拖拽的。
textarea{ 
 	resize: none;
}

五、vertical-align 属性应用

1、vertical-align 属性应用

vertical-align 属性使用场景：经常用于设置图片或者表单(行内块元素）和文字垂直对齐。

语法

vertical-align : baseline | top | middle | bottom

属性

2、图片表单对齐方式

1）图片、表单都属于行内块元素，默认的 vertical-align 是基线对齐。

具体实现：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片文字垂直居中对齐</title>
    <style>
        img {
            /* vertical-align: top; */
            /* vertical-align: bottom; */
            /* 图片和文字垂直居中 */
            /* vertical-align: middle; */
            /* 图片和文字基线对齐 */
            vertical-align: baseline;
        }

        textarea {
            vertical-align: baseline;
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="images/shu.png" alt="">我的馨悦老师
    </div>
    <textarea name="" id="" cols="30" rows="10"></textarea>请您留言
</body>

</html>

2）给图片、表单这些行内块元素的 vertical-align 属性设置为 middle 就可以让文字和图片垂直居中对齐。

具体实现：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片文字垂直居中对齐</title>
    <style>
        img {
            /* vertical-align: top; */
            /* vertical-align: bottom; */
            /* 图片和文字垂直居中 */
            vertical-align: middle;
            /* 图片和文字基线对齐 */
            /* vertical-align: baseline; */
        }

        textarea {
            vertical-align: middle;
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="images/shu.png" alt="">我的馨悦老师
    </div>
    <textarea name="" id="" cols="30" rows="10"></textarea>请您留言
</body>

</html>

3、解决图片底部默认空白缝隙问题

给图片添加 vertical-align:middle | top| bottom 等。
把图片转换为块级元素 display: block;

举例：

具体实现：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片底侧有空白缝隙解决方案</title>
    <style>
        div {
            width: 300px;
            border: 2px solid rgb(255, 34, 0);
        }

        img {
            vertical-align: bottom;
            /* display: block; */
        }
    </style>
</head>

<body>
    <div>
        <img src="images/shu.png" alt="">
    </div>
</body>

</html>

六、溢出的文字省略号显示

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

  /*1. 先强制一行内显示文本*/
   white-space: nowrap;  （ 默认 normal 自动换行）
   
  /*2. 超出的部分隐藏*/
   overflow: hidden;
   
  /*3. 文字用省略号替代超出的部分*/
   text-overflow: ellipsis;

七、常见布局技巧

1、margin 负值运用

让每个盒子margin 往左侧移动 -1px 正好压住相邻盒子边框
鼠标经过某个盒子的时候，提高当前盒子的层级（如果没有定位，则加相对定位（保留位置）；如果有定位，则加z-index）

举例：

具体实现：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>margin负值的巧妙应用</title>
    <style>
        ul li {
            position: relative;
            float: left;
            list-style: none;
            width: 160px;
            height: 200px;
            border: 1px solid red;
            margin-left: -1px;
        }

        ul li:hover {
            /* 1. 如果盒子没有定位，则鼠标经过添加相对定位即可 */
            position: relative;
            border: 1px solid slateblue;
        }

        ul li:hover {
            /* 2.如果li都有定位，则利用 z-index提高层级 */
            z-index: 1;
            border: 1px solid rgb(114, 230, 250);
        }
    </style>
</head>

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

</html>

2、文字围绕浮动元素

效果如下：

具体实现：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字围绕浮动元素的妙用</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        div {
            width: 300px;
            height: 100px;
            margin: 0px auto;
            padding: 5px;
            background-color: pink;
        }

        .img {
            float: left;
            width: 150px;
            height: 90px;
            margin-right: 5px;
        }

        .img img {
            width: 100%;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="img">
            <img src="images/img.png" alt="">
        </div>
        <p>
            【集锦】热身赛-巴西0-1秘鲁 内马尔替补两人血染赛场
        </p>
    </div>
</body>

</html>

3、行内块巧妙运用

把这些链接盒子转换为行内块，之后给父级指定 text-align:center;
利用行内块元素中间有缝隙，并且给父级添加 text-align:center; 行内块元素会水平会居中

举例：

具体实现：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行内块的巧妙运用</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            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;
            color: #333;
            font-size: 14px;
            text-decoration: none;
        }

        .box .prev,
        .box .next {
            width: 85px;
        }

        .box .one,
        .box .elp {
            background-color: #fff;
            border: 0;
        }

        .box input {
            width: 45px;
            height: 36px;
            border: 1px solid #ccc;
            outline: none;
        }

        .box button {
            width: 60px;
            height: 36px;
            background-color: #f7f7f7;
            border: 1px solid #ccc;
        }
    </style>
</head>

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

</html>

4、CSS 三角强化

原理：

具体实现：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS三角强化的巧妙运用</title>
    <style>
        .box {
            width: 0;
            height: 0;
            /* 1. 上边框宽度要大， 右边框宽度稍小， 其余的边框该为 0 */
            border-width: 100px 50px 0 0;
            /* 2.只保留右边的边框有颜色 */
            border-color: transparent red transparent transparent;
            /* 3. 样式都是solid */
            border-style: solid;
        }
    </style>
</head>

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

</html>

三角强化案例

效果如下：

具体实现：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS三角强化小练习</title>
    <style>
        .box {
            width: 160px;
            height: 24px;
            line-height: 24px;
            border: 1px solid red;
        }

        .miaosha {
            position: relative;
            float: left;
            width: 90px;
            height: 100%;
            background-color: red;
            text-align: center;
            color: #fff;
            font-weight: 700;
            margin-right: 8px;

        }

        .miaosha i {
            position: absolute;
            right: 0;
            top: 0;
            width: 0;
            height: 0;
            border-color: transparent #fff transparent transparent;
            border-style: solid;
            border-width: 24px 10px 0 0;
        }

        .yuanjia {
            font-size: 12px;
            color: gray;
            text-decoration: line-through;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="miaosha">1650 <i></i> </div>
        <span class="yuanjia">2900</span>
    </div>
</body>

</html>

有一天你将破茧而出，成长得比别人期待的还要美丽，但这个过程会很痛很辛苦，有时候还会觉得灰心，面对汹涌而来的现实，觉得自己渺小无力，但这也是生活里的一部分，做好你现在能做的，然后相信一切都会好的。

标签：技巧,vertical,color,align,高级,height,width,border,CSS
From： https://blog.csdn.net/qq_69347371/article/details/143630393

一、精灵图

1、为什么需要精灵图

2、精灵图的使用

3、精灵图案例

二、字体图标

1、产生与优点

2、字体图标的下载

3、字体图标的引入

4、字体图标的追加

三、CSS三角

京东三角案例

四、CSS用户界面样式

1、鼠标样式 cursor

2、轮廓线 outline

3、防止拖拽文本域 resize

五、vertical-align 属性应用

1、vertical-align 属性应用

2、图片表单对齐方式

3、解决图片底部默认空白缝隙问题

六、溢出的文字省略号显示

七、常见布局技巧

1、margin 负值运用

2、文字围绕浮动元素

3、行内块巧妙运用

4、CSS 三角强化

三角强化案例

相关文章

赞助商

阅读排行