宽高

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. 点击按钮（状态）

    
     按钮
    
复制代码

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}复制代码