前端 - CSS扩展

CSS文档

精灵图

核心原理是将网页中的一些小背景图整合成一张大图，这样可以有效减少服务器接收和发送请求的次数，提高页面加载速度。

精灵图原理

精灵图主要针对背景图片使用，就是把多个小背景图片整合到一张大图，这个大图被称为精灵图(sprites)
使用background-position移动背景图片位置
移动的距离为目标图片的x和y坐标
一般情况下都是往上、往左移动，所以为负值

精灵图使用

例如王者荣耀精灵图(url: https://game.gtimg.cn/images/yxzj/web201706/images/comm/index.png)

该图片大小为403*600像素，如果需要取出其中的“下载游戏”，html文件为一个<div>标签，css代码如下：

div {
    width: 240px;
    height: 130px;
    background: url(https://game.gtimg.cn/images/yxzj/web201706/images/comm/index.png) no-repeat 0 -218px;
}

效果如下：

字体图标

字体图标主要用于显示网页中的一些小图标，不使用精灵图是因为：

图片文件较大
放大缩小会失真
一旦图片制作完毕后，想要更换会比较麻烦

字体图标本质上属于文字，其优点有：

轻量级：一个图标字体比图像要小
灵活性：本质上属于文字，可以随意更改颜色、产生阴影、透明效果等
兼容性：几乎支持所有浏览器

下载字体图标

三角

将盒子大小设为0*0，通过改变边框的粗细和颜色就能实现三角的效果。

div {
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-bottom-color: skyblue;
}

效果如下：

对话框

类似的，通过定位制作一个对话框。

<div class="triangle">
    <span></span>
</div>

.triangle {
    position: relative;
    width: 150px;
    height: 200px;
    margin: 100px auto;
    background-color: skyblue;
}

.triangle span {
    position: absolute;
    /* 注意边框宽度为20px，则盒子宽度为40px  */
    /* 向上移动三角的高度 */
    top: -40px;
    /* 水平居中*/
    left: 50%;
    margin-left: -20px;
    width: 0;
    height: 0;
    border: 20px solid transparent;
    border-bottom-color: skyblue;
}

效果如下：

用户界面样式

鼠标样式

使用cursor属性设置:

属性值	描述
`default`	默认
`pointer`	手
`move`	移动
`text`	文本
`not-allowed`	禁止

<ul>
    <li style="cursor: default;">default</li>
    <li style="cursor: pointer;">pointer</li>
    <li style="cursor: move;">move</li>
    <li style="cursor: text;">text</li>
    <li style="cursor: not-allowed;">not-allowed</li>
</ul>

效果如下：

default
pointer
move
text
not-allowed

表单

轮廓线outline

去掉表单中<input>标签默认的蓝色边框，outline: none;

防拖拽

使得表单中<textarea>标签不可拖拽，resize: none;

vertical-align属性

CSS的vertical-align属性经常用于经常用设置图片或者表单(行内块元素)和文字垂直对齐。

官方解释：用于设置一个元素的垂直对齐方式，但是只对行内元素或行内块元素有效。

值	描述
`baseline`	默认，元素放在父元素基线上
`top`	把元素的顶端与行中最高元素顶端对齐
`middle`	把此元素放在父元素的中部
`bottom`	把元素的顶端与行中最低的元素的顶端对齐

图片默认是和baseline对齐的，4种值的显示效果如下所示：

basline abcdefghij

top abcdefghij

middle abcdefghij

bottom abcdefghij

图片底部默认空白缝隙问题

由于图片默认和baseline对齐，图片底侧会有一个空白缝隙，例如：

<div>
    <img src="https://i2.hdslb.com/bfs/face/38415d3e45f4b85f5ae8675687ae6751f2456b11.jpg@120w_120h_1c_1s.jpg" alt="bilibili头像"> 
</div>

div {
    border: 1px solid red;
}

效果如下：

解决方法有2种：

图片的vertical-align属性改为middle|top|bottom
把图片转为块级元素display: block;

溢出文字省略号显示

单行文本溢出

对于下面的例子：

<div>通过使用 CSS 我们可以大大提升网页开发的工作效率！</div>

div {
    width: 150px;
    height: 100px;
    background-color: skyblue;
}

显示效果如下，文字会自动换行：

通过使用 CSS 我们可以大大提升网页开发的工作效率！

想要让单行文字溢出用省略号显示，需要修改css文件：

div {
    width: 150px;
    height: 100px;
    background-color: skyblue;
    /* 1. 文本不进行自动换行，该值默认为noraml，即自动换行 */
    white-space: nowrap;
    /* 2. 将溢出的部分隐藏 */
    overflow: hidden;
    /* 3. 文本溢出的部分用省略号表示 */
    text-overflow: ellipsis;
}

效果如下：

通过使用 CSS 我们可以大大提升网页开发的工作效率！

多行文本溢出

多行文本溢出显示省略号可能有兼容性问题，只适用于webKit浏览器或移动端。

<div>通过使用 CSS 我们可以大大提升网页开发的工作效率！通过使用 CSS 我们可以大大提升网页开发的工作效率！</div>

div {
    width: 150px;
    /* 1. 修改盒子高度为指定行数的高度，例如下面为4行，则大约为90px */
    height: 90px;
    background-color: skyblue;
    /* 2. 隐藏溢出，并将文本溢出用省略号显示 */
    overflow: hidden;
    text-overflow: ellipsis;
    /* 3. 弹性伸缩盒子模型显示 */
    display: -webkit-box;
    /* 4. 限制在一个块元素显示文本的行数为4行 */
    -webkit-line-clamp: 4;
    /* 5. 设置或检索伸缩盒对象子元素的排列方式 */
    -webkit-box-orient: vertical;
}

常见布局技巧

margin负值去除边框叠加效果

在一些情况下，我们希望去除盒子边框叠加的效果，例如下面的例子：

<ul>
    <li class="item">1</li>
    <li class="item">2</li>
    <li class="item">3</li>
    <li class="item">4</li>
</ul>

.item {
    float: left;
    width: 100px;
    height: 80px;
    background-color: skyblue;
    border: 3px solid black;
    list-style: none;
}

显示效果如下：

这时，可以把每个盒子向左移动边框粗细的距离，即为<li>标签添加margin-left: -3px;，显示效果如下：

当然，由于每个<li>标签都左移了3px，导致整个<ul>向左移动了3px。此时可以让整个<ul>右移3px，为其添加属性margin-left: 3px;

如果想实现鼠标经过边框变色的效果，会发现除了最后一个盒子，其他盒子最右边的边都被压住了，此时分为2种情况。

如果<li>标签没有定位，则直接添加相对定位即可

.item:hover {
    position: relative;
    border-color: orangered;
}

如果<li>标签有定位，则需要提高z-index，注意该属性只有盒子使用定位时才有效
```
.item:hover {
    z-index: 1;
    border-color: orangered;
}
```

文字围绕浮动元素

通过浮动可以做出文字围绕浮动的效果，例子如下：

<div class="bilibili">
    <img src="https://i0.hdslb.com/bfs/sycp/creative_img/202112/5aea31d2e67c110cab41ae1b870788dd.jpg" alt="B站招聘">
    <div> 哔哩哔哩招聘杭州同学，早10晚7，双休！ </div>
</div>

.bilibili {
    width: 300px;
    height: 100px;
    background-color: skyblue;
    padding: 5px;
}

.bilibili img {
    float: left;
    height: 100%;
    margin-right: 5px;
}

效果如下：

哔哩哔哩招聘杭州同学，早10晚7，双休！

行内块页码

页码可以通过浮动，并添加margin实现，但是使用行内块更方便，因为能设置大小、有默认距离、能通过text-align方便地水平居中。

<div class="box">
    <a href="#" class="prev">&lt;&lt;上一页</a>
    <a href="#">1</a>
    <a href="#" class="selected">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>

.box {
    text-align: center;
    font-size: 15px;
}

.box a,
.box button,
.box input {
    display: inline-block;
    height: 45px;
    padding: 0 20px;
    background-color: #f7f7f7;
    border: 1px solid #ccc;
    line-height: 45px;
    text-decoration: none;
    font-size: 15px;
    color: #333;
}

.box input {
    width: 45px;
    padding: 0;
    outline: none;
    text-align: center;
}

.box .selected,
.box .elp {
    background-color: #fff;
    border: none;
}

效果如下：

<<上一页 1 2 3 4 5 ... >>下一页到第页

直角三角形

div {
    height: 0;
    width: 0;
    float: left;
    margin-right: 20px;
}

.triangle1 {
    border-top: 100px solid skyblue;
    border-left: 50px solid transparent;
}
.triangle2 {
    border-top: 100px solid skyblue;
    border-right: 50px solid transparent;
}
.triangle3 {
    border-bottom: 100px solid skyblue;
    border-left: 50px solid transparent;
}
.triangle4 {
    border-bottom: 100px solid skyblue;
    border-right: 50px solid transparent;
}

效果如下

制作一个价格模块：

<div class="price">
    <div class="new-price">¥ 1065.00
        <div class="triangle"></div>
    </div>
    <del class="old-price">¥ 5088.00</del>
</div>

.price {  
    margin: 0 auto;
    width: 170px;
    height: 24px;
    border: 1px solid red;
    line-height: 24px;
}
.price .new-price {
    position: relative;
    float: left;
    width: 78px;
    height: 100%;
    text-align: center;
    background-color: red;
    color: #fff;
    font-weight: 700;
}
.price .triangle {
    position: absolute;
    top: 0;
    right: -12px;
    width: 0;
    height: 0;
    border-top: 24px solid red;
    border-right: 12px solid transparent;
}
.price .old-price {
    float: right;
    height: 40px;
    color: #ccc;
}

效果如下：

¥ 1065.00

~~¥ 5088.00~~

CSS初始化

由于不同浏览器对标签的默认值是不同的，需要消除不同浏览器对HTML文本呈现的差异。

/* 消除所有标签的内外边距 */
* {
    margin: 0;
    padding:0
}

/* 斜体文字不倾斜 */
em, i {
    font-style:normal
}

/* 去除li的圆点 */
li {
    list-style:none
}

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

/* 当鼠标经过button时，由指针变成手 */
button {
    cursor:pointer
}

a {
    color: #666;
    text-decoration:none
}

a:hover {
    color:#c81623
}

button, input {
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
}

body {
    -webkit-font-smoothing: antialiased;  /* 抗锯齿性 */
    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;
    display: block;
    content: ".";
    height:0
}

.clearfix {
    * zoom:1
}

posted @ 2021-12-08 15:18 lv6laserlotus 阅读(45) 评论(0) 收藏举报

刷新页面返回顶部