admin管理员组文章数量:1794759
那些常用的css
前言：结构+样式是前端必须了解和使用的部分，这篇是一篇总结的常见和常用的css的布局和样式
一. 常用的css样式 1. 清除浮动（清除浮动的方式有很多，但是最多的还是添加伪元素） .clearfix:after { content: "", display: block, height: 0, clear: both } .clearfix { *zoom: 1 } 2.rgba透明色的两种写法 background-color: rgba($color: #000000, $alpha: 0.2); background-color: rgba(255,255,255,0.2) 3.背景渐变色具体的参数 - CSS3 渐变 | 菜鸟教程
background-image: linear-gradient(direction, color-stop1, color-stop2, ...) （渐变的方向，颜色
4.单行文本溢出显示省略号注意要固定宽度
overflow: hidden; white-space: nowrap; text-overflow: ellipsis; 5.多行文本溢出省略号 overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;有时候并不会有作用，会在一行，可以在加一个属性
white-space: initial; 6.阴影 box-shadow: h-shadow(x偏移) v-shadow(偏移) blur(模糊距离) spread(阴影大小) color(颜色) inset(内外阴影选择);常见得内阴影
box-shadow: 0 0 10px blue inset常见外阴影
box-shaow: 0 0 10px blue 7.三角形 width: 0; height: 0; border: 100px solid transparent; border-top: 100px solid pink; 8.梯形
width: 100px; height: 0; border-bottom: 100px solid pink; border-left: 50px solid transparent; border-right: 50px solid transparent; 9.定义动画 .technology-box { animation: toTop 1s ease; } @keyframes toTop { 0% {transform: translateY(50px);opacity: 0.5;} 100% {transform: translateY(0);opacity: 1;} } 10.边框渐变色1渐变色
.border-box { width: 100px; height: 100px; border: 20px solid black; border-radius: 50%; border-image: -webkit-linear-gradient(pink, yellow) 30 30; border-image: -moz-linear-gradient(pink, yellow) 30 30; border-image: linear-gradient(pink, yellow) 30 30; }2.圆角渐变
.content { width: 100px; height: 100px; box-sizing: border-box; padding: 10px; border-radius: 50%; background-image: -webkit-linear-gradient(top, pink 0%, skyBlue 30%, yellow 60%, orange 90%); background-image: -moz-linear-gradient(top, pink 0%, skyBlue 30%, yellow 60%, orange 90%); background-image: linear-gradient(top, pink 0%, skyBlue 30%, yellow 60%, orange 90%); } .box { width: 100%; height: 100%; border-radius: 50%; background: #fff; } <div class="content"> <div class="box"></div> </div>
二.常见的css布局 1.左边固定，右边自适应
(1)利用float和calc
<style> #box1 { width: 100%; height: 600px; background: pink; margin-bottom: 100px; } #box1 .left { float: left; width: 200px; height: 600px; background: red; } #box1 .right { float: left; width: calc(100% - 200px); height: 600px; background: blue; } </style> <!-- 左边固定，右边自适应 --> <div id="box1"> <div class="left"></div> <div class="right"></div> </div>(2)flex
<style> #box1 { width: 100%; height: 600px; background: pink; display: flex; flex-direction: row; } #box1 .left { width: 100px; height: 100%; background: red; } #box1 .right { flex: 1; height: 100%; background: blue; } </style> <body> <!-- 左边固定，右边自适应 --> <div id="box1"> <div class="left"></div> <div class="right"></div> </div> </body> 三. 样式小技巧1.定位元素无法被内容撑开
white-space: nowrap;2.v-html的内容没有换行
white-space: pre-wrap版权声明：本文标题：那些常用的css 内容由林淑君副主任自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1686969221a123656.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论