CSS
关注
分享
扫一扫
rgpbrave
这个作者很懒，什么都没留下…
展开
-
前端img图片优化
1.如果是小标志图的话，可以放在iconfont里，下载代码引用，或者直接在里面找。2.如果小型图，可以在webpack打包的时候转base64（可配置限制大小）3.如果大型图，放在服务器上，引入url原创 2021-03-18 23:31:13 · 372 阅读 · 0 评论 -
grid 栅格布局
点这里原创 2021-03-18 00:11:13 · 222 阅读 · 0 评论 -
flex 布局属性
容器属性justify-content: center; 子元素横轴排列方式align-items: center; 子元素纵轴排列方式align-content: center; 多行子元素纵轴排列方式flex-direction: row-reverse; 主轴排列方向flex-wrap: wrap; 是否超出换行flex-flow ：row wrap； 4，5条的集合子元素属性order : 1 子元素排列顺序align-self原创 2021-03-16 23:37:28 · 186 阅读 · 1 评论 -
解决移动端 iframe 嵌套页面 ios会出现不滑动问题
把 iframe页面包一层div，然后加上以下样式-webkit-overflow-scrolling: touch;overflow: scroll;例如 //html <div class="aa"> <iframe src="" width="100%" height="100%"></iframe> </div> //css <style> .aa{ -webkit-overflow-scrolling: t原创 2021-02-22 17:03:52 · 1089 阅读 · 0 评论 -
css 去除相邻元素行内块元素display inlineblock中的间隙
倆个行内快元素在一行时会出现间隙，例如<style> .aa{ display: inline-block; background-color: red; color: green; font-size: 14px; }</style><body> <div class="aa">行内快</div> <div class="aa">间隙</div> <div&g原创 2021-02-20 08:57:32 · 328 阅读 · 0 评论 -
css 让文本 单行居中，多行居左
//父元素设置 text-align:center;//子元素 p标签 text-align :left ; display:inline-block;// 文本不够一行的时候，父元素属性使p标签居中显示。p元素内部文本撑开宽度。多行时，p标签宽度顶满父元素宽度，内部文本居左...原创 2021-01-05 08:49:38 · 318 阅读 · 0 评论 -
css画三角型 画圆型
正方形边框其实是三角形 width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red;原创 2020-12-03 17:42:18 · 130 阅读 · 0 评论 -
css 清除浮动父元素高度坍塌最佳方法
.aaa::after{ content: ""; display: block; clear: both; }原创 2020-12-02 18:09:03 · 123 阅读 · 0 评论 -
css 元素、图片居中
不知道宽高1.父元素相对定位子元素绝对定位 position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);2.绝对定位方式display: flex;align-items: center;justify-content: center;position: absolute; top: 0; bottom: 0; left: 0; ri原创 2020-12-02 17:56:00 · 99 阅读 · 0 评论 -
css弹性盒子--弹性布局flex-grow、flex-shrink、flex-basis详解
flex-grow、flex-shrink、flex-basis三个属性的作用：在flex布局中，父元素在不同宽度下，子元素是如何分配父元素空间的。(注意：这三个属性都是在子元素上设置的，下面小编要讲的是父元素，指以flex布局的元素(display:flex))小编这里先教一下大家如何快速记住这三个属性：首先是 flex-basis ，basis英文意思是<主要成分>，所以他和width放在一起时,肯定把width干掉，basis遇到width时就会说我才是最主要的成分，你是转载 2020-12-02 09:30:31 · 635 阅读 · 0 评论 -
css 超出多行省略号（移动端完美适配）
word-break: break-all; /* autoprefixer: ignore next */ display: -webkit-box; /* autoprefixer: ignore next */ -webkit-line-clamp: 2; //超出几行 /* autoprefixer: ignore next */ -webkit-box-orient: vertical;...原创 2020-12-01 22:55:56 · 1069 阅读 · 0 评论 -
css 俩个垂直的块级元素外边距塌陷问题
在“标准文档流中” 通过 margin 定义块元素的垂直外边距时，可能会出现外边距的合并现象；合并的情况有两种：一种是相邻块元素垂直外边距的合并，另一种是嵌套块元素垂直外边距的合并相邻块元素的垂直外边距的合并现象当上下相邻的两个块元素都设置外边距（margin），如果上面的元素有下外边距 margin-bottom，下面的元素有上外边距 margin-top，则他们之间的垂直间距不是 margin-bottom + margin-top实际会取两个值中的较大者作为外边距，这种现象被称为相邻块元素垂直外原创 2020-09-21 14:19:27 · 437 阅读 · 0 评论 -
css calc属性
height: calc(100vh - 200px);//calc css计算属性 //可以利用这点动态的设置属性原创 2020-08-21 14:01:22 · 180 阅读 · 0 评论