![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
~ climber ~
Anything is possible
展开
-
滚动条样式、input样式等常见控件默认样式调整
1、滚动条样式浏览器自带的滚动条样式有些丑,尤其是火狐浏览器,巨丑,覆盖方法如下:::-webkit-scrollbar-button, ::-webkit-scrollbar-corner {display: none}::-webkit-scrollbar {width: 4px;height: 4px;background-color: rgba(0,0,0,0.6);}::-webkit-scrollbar-thumb {border: 4px soli原创 2022-01-13 15:24:01 · 1326 阅读 · 0 评论 -
display:none; visibility:hidden; opacity:0 区别
display:none1、DOM结构:浏览器不会渲染display为none的元素,不占据空间;2、事件监听:无法进行DOM事件监听;3、性能:动态改变DOM结构,会引起重排,性能较差;4、继承:不会被子元素继承,因为子元素不会被渲染;5、transition:不支持display。visibility:hidden1、DOM结构:元素被隐藏,还存在文档流中,占据一定的空间;2、事件监听:无法进行DOM事件监听3、性能:动态改变此属性会引起重绘,性能友好;4、继承:原创 2022-01-11 22:27:18 · 1077 阅读 · 0 评论 -
css伪类伪元素小结
区分伪元素在CSS3之前就已经存在,只是没有伪元素的说法,都是归纳为伪类,所有很多人分不清楚伪类和伪元素。比如常用的:before和:after,它们是伪类还是伪元素?其实在CSS3之前被称为伪类,直到CSS3才正式区分出来叫伪元素那如何区分伪元素和伪类,记住两点:1. 伪类表示被选择元素的某种状态,例如:hover2. 伪元素表示的是被选择元素的某个部分,这个部分看起来像一个独立的元素,但是是"假元素",只存在于css中,所以叫"伪"的元素,例如:before和:after核心区别在于原创 2021-11-06 23:10:51 · 212 阅读 · 0 评论 -
css小技巧
css实用技巧分享这段时间工作上遇到书中总结到的一些css技巧。1.注意外边距折叠当上下的垂直外边距margin在同时存在时会发生外边距折叠。简言之,当一个元素的下边缘接触到另外一个元素的上边缘时,只会保留两个margin值中较大的那个。<style> .wrap{ background-color: gray; } .block{ ...原创 2019-11-27 11:01:55 · 399 阅读 · 0 评论 -
css 高度设置100%时无效
审核元素时发现,发现div 的高度设置为100%但是实际高度为0,解决方案:(1)给父元素设置高度(2)或者直接写个固定高度。同理,width 为100%无效时,也是这个方案。...原创 2019-10-23 14:37:59 · 1611 阅读 · 0 评论 -
calc()的使用
vh/vwvh: 相对于视窗的高度, 视窗被均分为100单位的vh;vw: 相对于视窗的宽度, 视窗被均分为100单位的vw;vmax: 相对于视窗的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax;vmin: 相对于视窗的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin;视区所指为浏览器内部的可视区域大小,即window.innerWidth/windo...原创 2019-10-10 16:47:50 · 675 阅读 · 0 评论 -
多种类型文本超出隐藏问题
如何实现文件禁止折行,超过部分用省略号隐藏?white-space:nowrap; overflow:hidden; text-overflow:ellipsis;强制不换行,超出部分隐藏且以省略号形式出现white-space 属性设置如何处理元素内的空白 normal默认。空白会被浏览器忽略。 pre 空白会被浏览器保留。其行为方式类似 HTML 中的 pre 标签。 ...原创 2019-09-27 21:41:13 · 261 阅读 · 0 评论 -
css行高height研究
最近看了《css 世界》,颇有体会,总结一下它的作用细节。首先回顾一下盒模型:中心的content,padding ,border,margin,这些又被分成4个盒子,content box(content-box),padding box(padding-box), border box(border-box), margin-box(透明)。width的默认值是auto,至少包含以...原创 2019-08-29 21:59:41 · 636 阅读 · 0 评论 -
css flex布局
flex布局简介传统布局,基于盒模型,依赖display属性、position属性、float属性,它对于某些特殊布局,非常不方便,如垂直居中。Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局 .box { display: flex; } 行内元素也可以使用flex布局 .box{ display:inl...原创 2019-08-18 23:28:24 · 124 阅读 · 0 评论 -
css行高line-height研究
定义line-height属性设置行间的距离,基线之间的距离,不同字体,基线位置不同。line-height的属性normal:默认值,设置合理的行间距,跟浏览器相关。实际开发中,对行高reset,保证各个浏览器的兼容性一致。 number:设置一个数字,则会跟当前的字体尺寸相乘设置行间距。举例:line-height:1.5, 那么实际行高=1.5*font-size 。 有单位...原创 2019-08-13 22:13:41 · 269 阅读 · 0 评论