CSS代码片段

CSS布局技巧精要

最新推荐文章于 2024-10-10 19:09:30 发布

weixin_33862188

最新推荐文章于 2024-10-10 19:09:30 发布

阅读量63

点赞数

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5af1b8def265da0b8262c160

宽高

1. `div` 的高度是由它的行高 `line-height` 决定它内部文档流中元素总和决定的

inline-block,inline 的元素，元素与元素之间有空格

word-break:break-all;折行

2. 单行省略

/* 不换行 */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
复制代码

3. 多行省略

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-orient: vertical;
overflow: hidden;
复制代码

4. 文字垂直居中

不写高度，使用padding-top、padding-bottom撑开

margin上下方向合并，父级设置 border、padding

5. 一比一的正方形

width: 50px;
border: 1px solid green;
padding-top: 100%;
/* 或者 */
padding-bottom: 100%;
复制代码

6. CSS 实现横竖屏

/*竖屏时使用的样式*/
@media all and (orientation: portrait) {
  .css {
    width: 100%;
    line-height: 40px;
    text-align: center;
    background: #333;
  }
}

/*横屏时使用的样式*/
@media all and (orientation: landscape) {
  .css {
    width: 100%;
    line-height: 40px;
    text-align: center;
    background: #ddd;
  }
}
复制代码

7. `select`文字居右

标签属性dir="rtl"

8. 点击按钮（状态）

<style type="text/css">
a {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.btn-blue {
    display: block;
    height: 42px;
    line-height: 42px;
    text-align: center;
    border-radius: 4px;
    font-size: 18px;
    color: #FFFFFF;
    background-color: #4185F3;
}

.btn-blue:active {
    background-color: #000;
}
</style>
<div class="btn-blue">按钮</div>
复制代码

9. 移动端设置字体

各个手机系统有自己的默认字体，且都不支持微软雅黑
如无特殊需求，手机端无需定义中文字体，使用系统默认
英文字体和数字字体可使用 Helvetica ，三种系统都支持

/* 移动端定义字体的代码 */
body {
  font-family: Helvetica;
}
复制代码

测试：

“Would you like me to give you a formula for success?
It’s quite simple, really. Double your rate of failure.
You’re thinking of failure as the enemy of success.
But it isn’t at all… You can be discouraged by failure – or you can learn from it.
So go ahead and make mistakes.
Make all you can. Because, remember that’s where you’ll find success.
On the far side.”
复制代码

10. 隐藏滚动条：

element::-webkit-scrollbar {
    display: none
}
复制代码