css
前端小懒虫
这个作者很懒,什么都没留下…
展开
-
清除上外边距溢出和浮动对父元素宽度的影响
上外边距溢出: 父元素没有边框border,子元素设置了上外边距,此时就会出现上外边距溢出,本该子元素设置了上外边距,结果却是没有体现出来,反而父元素上多了子元素设置的上外边距 简易时尚的解决方案 在父元素添加类clearmargin-top .clearmargin-top::before{ content:""; display: table; } 浮...原创 2019-01-22 14:24:57 · 578 阅读 · 0 评论 -
带尖角的对话框
对话框图片 box1的代码: .box{ position: relative; width: 200px; height: 200px; border: 2px solid #000; background-color: #fff; } .box:before{ position: absolute; content: ""; w...转载 2019-03-08 23:16:18 · 452 阅读 · 0 评论 -
父元素高度自适应绝对定位的子元素的高度
父元素加overflow:hidden,并且添加如下类: .clearf:after{ content:’ '; display:block; clear:both; }原创 2019-07-21 20:32:16 · 4004 阅读 · 0 评论 -
文字超出部分用...表示
只需在父元素设置css样式如下即可: p{ overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }原创 2019-03-07 00:34:42 · 5679 阅读 · 0 评论 -
块级元素水平垂直居中
方法一:绝对定位+margin 具体:父元素加 position: relative; 子元素加 position: absolute; left:0; right:0; top:0; bottom: 0; margin:auto; 方法二:绝对定位+transform 具体:父元素加 position: relative; 子元素加 position: absolute; left:50%; t...原创 2019-03-18 12:43:33 · 128 阅读 · 1 评论 -
让发生绝对定位的元素水平居中的两种方法
页面上有两div,子div发生了绝对定位,浮动起来了,脱离文档流,如图 上图代码如下,这里只展示主要代码: <style> .d1{ width:400px; height:400px; border:1px solid red; position: relative; margin:0 auto...原创 2019-03-13 01:46:41 · 885 阅读 · 0 评论 -
常见网页css样式重置
觉得有用的小伙子收藏起来哦 腾讯 body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0} body{font:12px "宋体","Arial Narrow",HELVETICA;background:#fff;-webkit-text-siz...转载 2019-01-17 14:28:08 · 1153 阅读 · 0 评论 -
弹性布局中flex-grow的两种常见应用
需要1:如下图,3个子元素等分占满父元素宽度 当我们遇到项目个数恰好可以等分时,比如2个或4个项目这种,直接设置项目等分的宽度,但是遇到项目个数不好等分的情况比如3个或者其他未知的个数,我们可以通过给所有的项目都设置flex-grow:1进行等分剩余空间的方法来进行等分 需求2:如下图,两个元素占满整个父元素,并且确定了左边的子元素高宽,右边的不确定宽度 给右边的项目设置flex-grow:1...原创 2019-11-01 13:47:07 · 4241 阅读 · 0 评论