
CSS
mike_95
这个作者很懒,什么都没留下…
展开
-
CSS3新增选择器汇总
属性选择器E[attr]E[attr=val]E[attr^=val] 开头E[attr$=val] 结尾E[attr*=val] 包含结构伪类选择器E:first-childE:last-childE:nth-child(n),n可为even、odd、n、2n、2n+1以上三种先判断 后面的孩子,再判断是否为类型E的元素,若不是,则失效E:first-of-typeE:last-of-typeE:nth-of-type(n)以上三种先判断 后面的类型,再判断第几个伪元原创 2020-10-25 10:45:58 · 255 阅读 · 0 评论 -
什么是边框塌陷,如何解决
项目场景:<style> .wrapper{ width: 200px; height: 200px; background-color: red; margin-left: 100px; margin-top: 100px; } .demo{ width: 100px; heig原创 2020-10-18 16:25:29 · 2969 阅读 · 1 评论 -
如何让rgba()属性兼容IE9以下版本
rgba(),只支持IE9+如何解决兼容性问题呢?示例background-color:rgba(0,0,0,0.3)background-color:#000\9IE9以下的浏览器支持filter:alpha(opacity=30)实现的效果就会和上面一致原创 2020-08-23 19:06:01 · 334 阅读 · 0 评论 -
行内元素产生换行导致产生margin
两个行内元素之间,由于写代码习惯,我们会习惯性换行,但是一旦换行,就会产生margin示例<span>中国大陆</span><span class="iconfont arrow"></span>蓝色部分就是产生的margin其实,这个margin 大小受其父元素的fontsize影响将其父元素的font-size设置为50px,产生的效果如下图因此解决方案就是讲父元素的font-size设置为0,这样会导致子元素内原创 2020-08-22 11:59:40 · 605 阅读 · 0 评论 -
Do not use empty rulesetscss(emptyRules) html入门篇
index.html文件内引入index.css文件,无报错index.css文件里面写样式,出现报错Do not use empty rulesetscss(emptyRules)上图解决方案标点符号问题导致在前面一行代码后加上标点!!!;原创 2020-08-22 10:38:44 · 25941 阅读 · 2 评论 -
line-height可能的值
行高主要参考的是字体大小number类型,如果body的line-height行高设置的是数字类型,则后面的字元素都会继承这个值,该行的行高就为 font-size * number%类型,如果body的line-height 行高设置为百分比类型,则后续元素的line-height为body的font-size * body的百分比,这种情况,如果该行的字体比较大,则会出现字体的高度比行高大,就会出现上行和下行折叠,因此建议设置number...原创 2020-08-21 10:32:45 · 121 阅读 · 0 评论 -
文字替代图片(CSS加载不出来文字代替)
当网速很慢,CSS/Javascript不加载,这个时候,有些带有超链接的图片,需要用代链接的文字代替,例如淘宝网的logo,本身就是一个超链接,当网络不行的情况,只会显示出来淘宝网三个字的超链接,总的思路就是,文字‘淘宝网’用CSS将其隐藏,当CSS加载失败,就会显示出来方法一text-indent:200px //首行缩进,缩进到图片之外white-space: nowrap //强制不换行overflow:hidden //文字隐藏方法二a{ height:0px;//将带有超链接的背原创 2020-08-16 18:57:55 · 1095 阅读 · 0 评论 -
文字溢出处理省略号显示
单行文本p{ white-space: nowrap;//禁止自动换行 overflow: hidden; text-overflow: ellipsis;}多行文本多行文本前端技术上只能截断,不能做到打点调节height值和line-height 实现截断原创 2020-08-16 17:56:32 · 108 阅读 · 0 评论 -
CSS基础选择器权重
CSS 基础选择器权重排名!important行间样式Idclass|属性|伪类标签|伪元素通配符原创 2020-08-16 15:07:48 · 214 阅读 · 0 评论 -
float元素产生浮动流清除浮动
浮动元素产生 了浮动流所有产生了浮动流的元素,块级元素看不到他们,产生了BFC的元素和文本类属性的(inline)的元素以及文本都能看得到浮动元素解决方案给受到影响的块级元素添加clear:both清楚左右两边的浮动流...原创 2020-08-16 11:55:35 · 148 阅读 · 0 评论 -
边框合并(兄弟元素之间)
兄弟元素之间,水平方向上的边框正常,垂直方向上的边框边距由最大值决定解决方案BFC如何触发一个盒子的BFC1.position: absolute2.display:inline-block3.float:left4.overflow:hidden原创 2020-08-16 11:23:30 · 396 阅读 · 0 评论