![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
文章平均质量分 61
kelly0721
这个作者很懒,什么都没留下…
展开
-
CSS 实现两个圆圈重叠部分颜色不同
CSS 实现两个圆圈重叠部分颜色不同原创 2024-01-05 16:23:43 · 869 阅读 · 0 评论 -
CSS - 多余文字省略号显示
一、 单行文本样式white-space:nowrap; //溢出不换行overflow:hidden; //超出部分隐藏text-overflow:ellipsis; //超出部分设置省略号显示// 需要是一个有固定宽度的块元素width: 200px;display: inline-block;二、多行文本样式overflow:hidden; // 超出部分隐藏text-overflow:ellipsis; // 溢出显示用省略号// 这几条属性是重点display原创 2021-09-16 12:08:39 · 764 阅读 · 0 评论 -
CSS - BFC 、 IFC 和经典布局
BFC、IFC、圣杯布局、双飞翼布局原创 2021-06-22 16:25:51 · 184 阅读 · 1 评论 -
CSS - position:sticky
CSS3 新出的 position:sticky 还是挺好用的,所以记录一下用法一、简介sticky属性依赖于用户的滚动,对象在常态时遵循常规流。它就像是relative和fixed的合体,当在屏幕中时按常规流排版,当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。常用场景当元素距离页面视口(Viewport,也就是fixed定位的参照)顶部距离大于 0px 时,元素以 relative 定位表现,而当元素距离页面视口小于 0px 时,元素表现为 fixed 定位,也就会固定原创 2021-03-12 14:48:58 · 318 阅读 · 0 评论 -
CSS -自定义滚动条样式
以下没有经过探究,只针对webkit内核的浏览器滚动条的组成::-webkit-scrollbar 滚动条整体部分::-webkit-scrollbar-thumb 滚动条里面的小方块,能上下左右移动(取决于是垂直滚动条还是水平滚动条)::-webkit-scrollbar-track 滚动条的轨道(里面装有thumb)::-webkit-scrollbar-button 滚动条轨道两端的按钮,允许通过点击微调小方块的位置::-webkit-scrollbar-track-piece 内层轨道,原创 2021-02-25 16:06:41 · 481 阅读 · 0 评论 -
CSS3实现缺角矩形
CSS3实现缺角矩形转载 2021-01-18 00:35:09 · 1856 阅读 · 0 评论 -
CSS- box-shadow
box-shadow原创 2020-11-30 00:24:10 · 163 阅读 · 0 评论 -
CSS-offsetLeft,offsetTop,offsetWidth,offsetHeight
ffsetLeft,offsetTop,offsetWidth,offsetHeight原创 2020-11-22 23:27:42 · 1170 阅读 · 0 评论 -
CSS - 实现自适应分隔线的N种方法
1.伪元素+transform:translateX(-100%);// html<div class="title">我是分割线</div>// css.title{ position: relative; text-align: center; overflow: hidden; font-size: 14px; col...原创 2020-02-22 17:24:25 · 1025 阅读 · 0 评论 -
CSS样式(一)
盒模型模型分为盒子模型和内容模型,内容模型就是 宽高 = content盒子模型就是宽高= content + padding + border// csshtml { box-sizing: border-box; } *,*::before,*::after { box-sizing: inherit; } .box { display: inl...原创 2020-01-21 17:10:34 · 163 阅读 · 0 评论 -
CSS - 样式顺序
在写CSS的过程中,某些限制总是不起作用,这就涉及了CSS样式覆盖的问题不同的样式文件“元素上的style” > “文件头上的style元素” >“外部样式文件同一文件id选择器指定的样式 > 类选择器指定的样式 > 元素类型选择器指定的样式对于相同类型选择器制定的样式,在样式表文件中,越靠后的优先级越高可以使用!important来提高优先级CSS 代码...原创 2019-09-07 16:02:06 · 347 阅读 · 0 评论 -
CSS- flex
一、定义和用法flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。如果元素不是弹性盒模型对象的子元素,则 flex 属性不起作用。二、属性值flex-grow 属性:定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大flex-shrink 属性:定义了项目的...原创 2019-07-23 14:48:31 · 90 阅读 · 0 评论 -
CSS-元素居中
一、水平居中行内元素1.1 父元素设置 text-align: center.parent{ text-align:center;}块内元素2.1 父元素设置 text-align: center,子元素设置 display: inline-block;2.2 子元素定宽,设置 margin:auto;2.3 子元素不定宽,设置为块级表格来显示,再将其设置水平居中,...原创 2019-03-14 11:07:44 · 106 阅读 · 0 评论 -
CSS-Z-index
一、没有使用z-index时,元素的堆叠顺序:根元素的背景和边框非定位的后代块元素,按照在HTML中的出现顺序进行堆叠定位的后代块元素,按照在HTML中的出现顺序进行堆叠二、浮动块的堆叠顺序:根元素的背景和边框非定位的后代块元素,按照在HTML中的出现顺序进行堆叠浮动块非定位元素的后代行内元素定位的后代块元素,按照在HTML中的出现顺序进行堆叠三、使用z-index自定...原创 2019-03-04 15:05:38 · 359 阅读 · 0 评论 -
一些特殊的样式记录
chrome显示小于12px的字号现在chorme只能显示12px及以上的字号,如果想要显示12px一下的字号,就需要用到css的transform属性。// js文件&lt;p class="test"&gt;test&lt;/p&gt;// css文件.test {font-size:16px;-webkit-transform: scale(0.625); }这样...原创 2018-12-20 15:26:49 · 180 阅读 · 0 评论