CSS
这里是蒋丞选手
这个作者很懒,什么都没留下…
展开
-
css 杂谈
css 杂谈原创 2022-07-25 20:34:40 · 146 阅读 · 0 评论 -
移动端左右滑动以及滚动条
对于移动端左右滑动以及滚动条.img-list { height: 166px; overflow: hidden; display: flex; flex-direction: row; display: -webkit-box; /* 手指左右滑动 */ overflow-x: auto; -webkit-overflow-scrolling: touc...原创 2020-04-24 15:21:47 · 2147 阅读 · 0 评论 -
关于定位 position
定位的几种方式:static,relative,absolute,fixed,sticky,inheritabsolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 fixed 生成绝对定位的元素,相对于浏览器窗...原创 2020-04-23 11:59:41 · 110 阅读 · 0 评论 -
css优先级
优先级:!import > 行内样式(1000)> Id(100)> 类、属性、伪类选择器(10)> 元素、伪元素(1)>通配符(0)>继承(0)伪元素和伪类的区别伪类本质上是为了弥补常规CSS选择器的不足,以便获取到更多信息;或是根据当前元素处于的状态,改变其样式。 它的功能和class有些类似,但它是基于...原创 2020-04-23 11:15:39 · 157 阅读 · 0 评论 -
css布局——两栏自适应布局
三栏布局:CSS布局:圣杯布局,双飞翼布局,Flex布局,绝对定位两栏布局:一栏定宽,一栏自适应 一栏不定宽,一栏自适应常见的方法:浮动 float+BFC 解决(不)定宽 浮动 float+margin 解决定宽 决定定位 absolute 解决定宽 flex布局 解决(不)定宽一、浮动:...原创 2020-04-22 14:23:26 · 323 阅读 · 0 评论 -
字体小于12px、移动端不兼容0.5px的解决方案
字体小于12px:使用transform:scale(0.5) 0.5px边框:使用transform:scale(0.5)、使用伪类一、字体小于12px的解决方案浏览器默认字体最小为12px,如果想使用小于12px的字体该怎么办?常见的例子是购物车图标 常...原创 2020-04-22 13:40:15 · 1409 阅读 · 1 评论 -
CSS 预处理器(框架):Stylus、LESS 和 Sass
什么是CSS预处理器一种语言用来为 CSS 增加一些编程的的特性,无需考虑浏览器的兼容性问题,例如你可以在 CSS 中使用变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧,可以让你的 CSS 更见简洁,适应性更强,代码更直观等诸多好处。总结就是,CSS预处理器为CSS提供了更多更加灵活的可编程性选型基于Vue.js的开发,一般选择使用Stylus。因为Stylus是来...原创 2020-02-22 16:45:44 · 265 阅读 · 0 评论 -
display:none 与 visibility:hidden 的区别
除了是否占据空间外,还有其他区别要注意1、空间占据display:none 隐藏后不占据额外空间,相当于删除元素visibility:hidden占据着空间opacity:0占据着空间2、子元素继承display:none 元素被删除,子元素也会被删除,自然也就不会显示visibility:hidden 子元素具有继承性,可以通过设置子元素v...原创 2020-02-14 22:56:42 · 1121 阅读 · 0 评论 -
用css画图形
一、实现三角形步骤:给一个盒子宽高设为0 给边框宽度border-width 和 样式border-style 给边框一边颜色,其他三边设为透明transparent原理:设边框,但是颜色设为透明,呈现给用户的就是有颜色的一个边:注意:这样是错的,不是不给其他三个边加边框,而是所有的边都有边框,只是呢三个边的颜色为透明。类似的问题:宽是给border的,不是只给一...原创 2020-02-05 22:18:31 · 133 阅读 · 0 评论 -
CSS布局:圣杯布局,双飞翼布局,Flex布局,绝对定位
三栏布局解决的问题布局要求:三列布局,中间宽度自适应,左右栏定宽 中间栏要在浏览器中优先渲染(放在文档流前面优先渲染) 允许任意列的高度最高方法1:圣杯布局步骤:给三栏设置浮动,高度 给左右栏设置定宽 为三栏在一行并且集中在左边 给中间栏宽设为100%, 为中间栏在上行,左右栏在下行 给左右栏设置负的margin, 为与中间栏在同一行但遮挡中间栏内容 给父元素p...原创 2020-02-05 21:07:38 · 534 阅读 · 0 评论 -
元素水平垂直居中
总结:absolute+margin 负值 absolute+translate absolute+margin:auto Flex + align-items +justify-content display:table-cell + veritical-align + text-align1. absolute + margin 负值最常见的居中方式使用条件...原创 2020-02-05 16:44:21 · 166 阅读 · 0 评论 -
Flex布局
网页布局(layout)是css重点应用 布局的传统解决方案,基于盒状模型,依赖display属性 +position属性 +float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整...原创 2020-02-05 10:40:17 · 111 阅读 · 0 评论 -
CSS3选择器
CSS1选择器链接的伪类选择器(锚伪类)a:link {color: blue;} /*静态伪类:未访问链接时蓝色*/a:visited {color: purple;} /*静态伪类:访问过的链接变为紫色*/a:hover {color: red;} /*动态伪类:鼠标悬浮在链接上变为红色*/a:active {c...原创 2020-02-04 22:55:45 · 82 阅读 · 0 评论 -
CSS3伪类与伪元素的区别及注意事项
CSS中伪类与伪元素的概念是很容易混淆的今天就来谈谈伪类与伪元素之间的区别定义首先先来看看伪类与伪元素的定义w3c中对于它们是这么解释的伪类:用于向某些选择器添加特殊的效果 伪元素:用于将特殊的效果添加到某些选择器讲道理,可能我语文不好,我觉得这两句话是等价的 :-)根本不能看出有什么区别都是对某些选择器“加特技”标准有这么一句话翻译过来是这样的CSS 引入伪类和...转载 2020-02-04 22:37:28 · 150 阅读 · 0 评论 -
解决外边距重叠
一、外边距重叠边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。换句话说,外边距重叠是指两个垂直相邻的块级元素,当上下两个边距相遇时,起外边距会产生重叠现象,且重叠后的外边距,等于其中较大者。margin值重叠计算的方法:margin值都为正,取两者的最大的值。 出现负边界,用最大的正边界减去绝对值最大...原创 2020-02-04 20:58:42 · 1189 阅读 · 0 评论 -
浮动与清除浮动
传统网页布局网页布局的本质:用CSS来摆放盒子,把盒子摆到相应位置CSS提供了三种传统布局方式,简单说,就是盒子如何进行排列顺序:标准流 浮动 定位一、什么是浮动float属性,用于创建浮动框,将其移动到一边,直到左边缘或右边缘触及到包含块或另一个浮动框的边缘。典型的应用是,让多个块级元素在一行内排列显示。二、浮动隐含的特性1、浮动的盒子脱离标准流...原创 2020-02-04 15:47:55 · 239 阅读 · 0 评论 -
BFC 块级格式化上下文
一、常见定位方案定位方案是控制元素的布局,常见的有三种:普通流 (normal flow)在普通流中,元素按照其在 HTML 中的先后位置至上而下布局,在这个过程中,行内元素水平排列,直到当行被占满然后换行,块级元素则会被渲染为完整的一个新行,除非另外指定,否则所有元素默认都是普通流定位,也可以说,普通流中元素的位置由该元素在 HTML 文档中的位置决定。浮动 (float)浮动元...原创 2020-02-04 11:53:11 · 281 阅读 · 0 评论 -
CSS动画、JS动画区别
区别: JS动画 CSS动画 优点 1、控制能力强,可以实现开始,暂停,终止等行为 2、可实现的动画效果丰富 3、无兼容性问题 1、性对JS动画更流畅 2、性能较好,浏览器会对CSS动...原创 2020-02-02 23:04:24 · 179 阅读 · 0 评论