当前位置：首页 > Web开发 > 正文

css常用代码

2024-03-31 Web开发

去除浮动

.clearfix:after{ content:"", display:block; clear:both; }

内盒子模型（之前讲过浏览器默认的是context-box标准盒子模型，但是最好用的还是内盒子模型，内盒子模型的width和height是包括border和padding的，往一个宽高固定的内盒子添加padding和border，本身的width不会改变，是原本的内容区域被减少了）

*{ box-sizing: border-box; }

清洁自带的样式( 只是粗略的做清洁，想要完全清楚默认样式，可以百度 normalize.css )

*{ padding: 0; margin: 0; list-style: none; outline: none; ... }

去除默认样式

select{ -webkit-appearance: none; border: 0; outline: 0; background-color: transparent; width: 100%; height: 0; }

超出省略

.list{ overflow: hidden;white-space: nowrap;text-overflow: ellipsis; }

三行后省略(记不住很正常,可以去京东官网等地方直接打开F12复制使用)

.textOVerThree { display: -webkit-box; overflow: hidden; white-space: normal !important; text-overflow: ellipsis; word-wrap: break-word; -webkit-line-clamp: 3; -webkit-box-orient: vertical }

强制换行（一些英文单词和数字是不会自动换行的，导致会溢出屏幕外而导致手机端可以横向滑动）

.word{ /* 单词数字默认是不换行的 | 有足够的长度，单词就不会换行 | 到了该换行的地方就强制换行 */ word-break: normal | break-word | break-all; } /* word-wrap: break-word; 效果和 word-break: break-word; 是一样的而且兼容性更好，为什么还要把 word-break: break-word; 写出来呢好记 */

带有背景图片的按钮

.btn{ background: url("img/xxx.jpg") no-repeat; background-position: left center; background-size: 30px; padding-left: 30px; }

为 PDF 等链接添加图标指示

a.external[href$=".pdf"], a.external[href$=".PDF"], a.external[href*=".pdf?"], a.external[href*=".PDF?"], a.external[href*=".pdf#"], a.external[href$=".PDF#"] { background: url("img/xxx.jpg") no-repeat; background-position: left center; padding-right: 24px; padding-left: 24px; }

序号选择器实现间隔样式

div:nth-of-type(3n){ /* 序号是三的倍速的div字体红色，也就是三，六，九 */ color: red; } div:nth-of-type(2n+3){ /* 从三开始每增加两个序号的div字体红色，也就是三，五，七.... */ color: red; }

做一个自定义的弹窗

.mask{ position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0,0,0,0.2); } .mask>.box{ position: absolute; left: 50%; top：50%； background-color: white; max-width:600px; max-height:600px; overflow:auto; transform: translate(-50%, -50%); }

输入框选中时改变颜色

input:focus{ border: 2px solid red; }

禁止图片被复制

img{ -webkit-touch-callout: none; }

清除输入框的阴影

input{ -webkit-appearance: none; }

修改输入框提示字体大小颜色

input::-webkit-input-placeholder{ font-size: 16px; color: red; }

清除img的底部空白（img标签是对齐文字中线的，所以两个img上下排列会有一点距离）

img{ /* 方法一 */ display:block; /* 方法二 */ vertical-align: top; } /* 还有就是把父标签改成字体大小为0px;不建议 */ /* 还有就是把父标签添加overflow:hidden;不建议 */

文字和输入框，单选多选框，图片连在一起时，垂直居中

img,input{ vertical-align: center; }

文字两端对齐

div { margin:10px 0; width:100px; border:1px solid red; text-align-last: justify; }

横向无限滚动

#nav{ white-space: nowrap; overflow-x: auto; display: flex; } <div id="nav"> <span>按钮</span> <span>按钮</span> ... </div> </div>

禁止右键,禁止复制

//前面一句是禁止右键，后面一句是禁止复制 <body oncontextmenu="return false;" onselectstart="return false">

怎么让一个 div 水平垂直居中

<div class="parent"> <div class="child"></div> </div> 1. div.parent { display:flex; justify-content:center; align-items:center; } 2. div.parent { position:relative; } div.child{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); } 3. div.parent{ display:flex; // display:grid } div.child{ margin:auto; }

手机图片放大骚操作

// 禁止页面放大 <meta id="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" /> // 同意页面放大，通过js去控制#viewport就行 <meta id="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=5.0,user-scalable=yes" name="viewport" />

计算属性

// calc #aa{ width: calc(90% + 5px) } // attr(自定义属性) // 可以用伪类显示a标签的href属性 article::before{ content: attr(data-name); }

首字母大写，字母全大写

#aa{ text-transform: capitalize; // 首字母大写 text-transform: uppercase; // 字母全大写 }

温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/40517.html

css常用代码

推荐文章

热门文章

标签

友情链接

关于本站

联系我们

特别鸣谢