项目中遇到一个奇怪的问题:那就是部分浏览器不支持CSS缩写的属性: 最常见的就是background属性 譬如background-size 另外说下opera内核的浏览器也是不支持:标注的为不支持 background...:url(url) no-repeat center center scroll /50% 50% rgba(0,0,0,0); IE6.7.8不支持的 让IE兼容background-size的方法 .
今天,居然发现了一个IE支持,而Firefox确不支持的CSS属性。....peopleBox a { text-indent:-999px; } 测试的时候,发现IE下表现良好,但是Firefox确无动于衷。...一直以来,从小到大,思想里从来不会出现这样的情形,所以当时确实是大吃一惊。
css中常见的布局问题中定位是比较难懂的一个点 比如relative和absolute定位 fixed定位与relative的关系 下面这个小demo演示一下fixed与父级子级同级的效果展示 这三个...div都是【fixed】属性,但你会发现父级的zindex这时压根没盖过子级的z-index 同级的情况下是会被遮罩住的。
sticky粘性定位 是css新增属性 其实就是以往我们做的fixed;当滚动条下拉到一定程度设置容器为fixed; 用图来演示: 常见场景:通讯录及头部工具条 Document css
content="width=device-width, initial-scale=1.0"> Document css..."box2"> 核心:rgba代表红绿蓝透明,混合在一起的颜色...: url(./1.jpg); } 核心:默认背景图片是重复平铺的。...DOCTYPE html> css"> div{ width:...; } 核心:往xy轴平铺到规定的盒子的范围内
CSS中的定位属性 定位属性是CSS中用于控制元素在文档中位置的关键属性。它主要用于确定元素相对于其父元素或其他元素的位置。...不同类型的定位属性 CSS中提供了以下主要定位属性: static:元素占据正常文档流中的位置,不受定位属性的影响。这是默认定位属性。...relative:元素相对于当前位置进行偏移,但仍保留在文档流中。 absolute:元素脱离文档流,相对于其最近具有定位属性的父元素进行定位。...定位示例 以下代码示例演示了不同定位属性的使用: /* static定位 */ p { color: blue; } /* relative定位 */ div { position: relative...(relative定位),一个相对于其父元素顶部和右侧定位的span(absolute定位),以及一个固定在页面顶部和左侧的导航栏(fixed定位)。
W3C于2011年9月29日开始了设计CSS4 选择目标:.clicked $ul li.clicked { background: white; } ul前面加了一个$号,代表它就是要改变的目标...,即“把里面有li(class是clicked)的ul的底色转为白色。...div, p, nav) span{ font-size: 18px; } div span, p span, nav span{ font-size: 18px; }相当于这样写 总体上说没有太多的增加
CSS的display 属性规定元素应该生成的框的类型。 1.1、none:此元素不会被显示。 1.2、block:此元素将显示为块级元素,此元素前后会带有换行符。 1.3、inline:默认。...(CSS2.1 新增的值) 1.5、list-item:此元素会作为列表显示。 1.6、run-in:此元素会根据上下文作为块级元素或内联元素显示。...1.7、compact:CSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。...1.8、marker:CSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。 1.9、table:此元素会作为块级表格来显示(类似 ),表格前后带有换行符。...此元素会作为一个表格单元格显示(类似 和 ) 2.8、table-caption:此元素会作为一个表格标题显示(类似 ) 2.9、inherit:规定应该从父元素继承 display 属性的值
相信大家对于box-shadow这个属性都应该很清楚,那就是给元素添加阴影的,今天我们就来详细的说一下这个属性。...允许负值 v-shadow 必需的。垂直阴影的位置。允许负值 blur 可选。模糊距离 spread 可选。阴影的大小 color 可选。阴影的颜色。...在CSS颜色值寻找颜色值的完整列表 inset 可选。...属性实例讲解 img{box-shadow:10px 10px} ?.../www.sammh.com/dome/upload1/4921320615863570240730.jpeg"/> css
早上看了司徒先生的js版属性选择器(http://www.cnblogs.com/rubylouvre/archive/2009/10/27/1590102.html),也激发了我深入了解css选择器的学习欲望...说明:(可恶的IE不支持-不管是IE的哪个版本都一样) 该选择器还有一个非标准的写法 E ~ F 效果跟E + F一样(但是~的这种写法,IE7,IE8能识别) 属性选择器 css"> input[class='cls1']{border:solid 1px #f00} /*--ie7才开始支持(该属性区分大小写...="en"]:匹配任何lang属性值以"-"作为分隔符,而且第一个精确等于"en"的E元素(也匹配lang属性只有属性值en的元素)。 属性值包含"abc"的E元素。
css中order属性的介绍 1、order可以改变一个flex子项的排序位置。 2、order属性用于提供有关弹性容器中其他弹性项目的每个弹性项目的顺序。...如果商品不灵活,那么order属性将毫无用处。...实例 css"> .box{width: 100px;height: 100px;} .div{display: flex;} .bg0{background: #111...中order属性的介绍,希望对大家有所帮助。...更多css学习指路:css教程 本文教程操作环境:windows7系统、css3版,DELL G3电脑。
盒子标签和属性对照 CSS语法(不区分大小写) JavaScript语法(区分大小写) border border border-bottom borderBottom border-bottom-color...CSS 语法(不区分大小写) JavaScript 语法(区分大小写) background background background-attachment backgroundAttachment...background-position backgroundPosition background-repeat backgroundRepeat color color 样式标签和属性对照...CSS语法(不区分大小写) JavaScript 语法(区分大小写) display display list-style-type listStyleType list-style-image...fontStyle font-variant fontVariant font-weight fontWeight 文本标签和属性对照 CSS 语法(不区分大小写) JavaScript
1.CSS mask属性面面观 在过去,CSS mask属性在使用的时候就是mask: xxx,但是现在随着这个属性的规范化,mask属性实际上已经成为了诸多mask-*的缩写,这和background...mask-type mask-composite 2.CSS属性mask的使用 /*html*/ 属性还是支持其他的格式的)时,发现在设计mask图片时,图片的尺寸很不好控制, 比如说在企业官网的logo上设计一道光循环的从logo上闪过,发现这个mask很难做,...好像很难控制的实现能够达到完美的效果,后期再使用过程中不断的总结吧 现在总结一下就是,在png中没有不透明的是logo中被显示出来的部分,透明部分就是logo总不显示的地方(且看下边的效果:logo层面一直会有一道光闪过...后期在使用中再总结
介绍 backface-visibility 是一个CSS属性,用于控制元素的背面是否可见。它主要用于在进行3D转换时控制元素的背面可见性。...但有时候,我们可能需要让元素的背面可见,这时就可以使用 backface-visibility 属性来控制。...backface-visibility 属性有两个可能的值: visible:表示元素的背面可见。背面将正常渲染并显示在屏幕上。 hidden:表示元素的背面不可见。...演示使用 这个是案例是中午刷抖音看到渡一老师的视频 看到的, 双面卡片案例, 同时也第一次认识到了backface-visibility 属性. 然后自己就练了一下手, 顺便分享给大家....兼容性 最后附上这个属性的兼容性: 兼容性还是很不错的
css属性与js中style对象的属性对应表 CSS语法(不区分大小写) JavaScript语法(区分大小写) border border border-bottom borderBottom border-bottom-color...padding-bottom paddingBottom padding-left paddingLeft padding-right paddingRight padding-top paddingTop CSS...backgroundImage background-position backgroundPosition background-repeat backgroundRepeat color color CSS...listStyleImage list-style-position listStylePosition list-style listStyle white-space whiteSpace CSS...fontFamily font-size fontSize font-style fontStyle font-variant fontVariant font-weight fontWeight CSS
表格布局中可以将元素放进设置好的单元格里,将网页进行分列分行的布局,但是表格布局有很大的局限性,现在基本上不再使用表格布局,只是在有表格的时候使用表格来进行局部布局。...与此同时在css3中出现了多列布局的方式,来替代表格的多列布局方式。...css3中用于多列布局的是columns属性,下面来看一下用法 div { columns:100px 3; -moz-columns:100px 3; /* Firefox */ -webkit-columns...如果columns的第一个值为auto则三列的宽度为自动,并且保证始终未3列。如果想设置每列之间的宽度,可以用column-gap的方法(其他浏览器需要加相应前缀)。...同样,他也可以设置中间的分割线,方法是column-rule,这个方法和设置边框的方法是一样的 例如colunm-rule:1px dashed red; 下面在来说一下他的兼容性。 ?
text-indent:60px;首行缩进 text-align:center;水平对齐方式 line-height:100px;行高 text-decoration:underline/none; 如果想要段落的一行高一点
前端林子 本文将从以下三个方面介绍CSS的float属性: 什么是float 浮动引发的问题 几种清除浮动的方法 1.什么是float 应用了float属性的元素,就像在印刷布局中,形成文字环绕图片的效果...除此之外,浮动还可以用于创建网页布局 1.1文本环绕图片 通过给图片设置float属性,形成文字环绕图片的效果,是float属性的常见应用场景之一: 效果: ? 附上实现代码: 中她的表演既具深度又生活化。 1.2创建网页布局 float属性还常用于网页布局: 效果: ?...实现原理: 侧边栏、中间内容区域的元素设置向左浮动(float:left;),最下面的footer元素设置为清除左右两边的浮动(clear:both;) 2.float的属性值 float有四个可用的属性值...例如上面1.2中创建网页布局中,就是将最下面的footer元素,设置为清除左右两边的浮动(clear:both;) #footer { ...
颜色(Color) 属性 属性 描述 CSS color-profile 允许使用源的颜色配置文件的默认以外的规范 3 opacity 设置一个元素的透明度级别 3 rendering-intent...内边距(Padding) 属性 属性 描述 CSS padding 在一个声明中设置所有填充属性 1 padding-bottom 设置元素的底填充 1 padding-left 设置元素的左填充...字体(Font) 属性 属性 描述 CSS font 在一个声明中设置所有字体属性 1 font-family 规定文本的字体系列 1 font-size 规定文本的字体尺寸 1...网格(Grid) 属性 属性 描述 CSS grid-columns 指定在网格中每列的宽度 3 grid-rows 指定在网格中每列的高度 3 14....外边距(Margin) 属性 属性 描述 CSS margin 在一个声明中设置所有外边距属性 1 margin-bottom 设置元素的下外边距 1 margin-left 设置元素的左外边距
异名新接一个需求,实现一个文字的切换,结果发现太久没写css动画,对animation属性已经很陌生,尤其是对steps()函数的理解已经丢掉了。...animation 属性概览 animation相关的属性比较多,异名看到自己前几年学习这个属性的时候做的导图,发现这确实是一种很棒的归纳方式,不应该丢掉,就趁着周末的时间review了一下,在以前的基础上做了一些修正...要应用steps函数需要理解两点,一个是steps中的start和end的区别,另外一个是step步长和keyframes中的关键帧的关系。...3dAnim 一些好的反馈 在刚入门的时候异名非常喜欢花时间来琢磨动画,工作时间长了之后就发现在业务的绝大部分场景中仅仅只是需要一些简单的位移、渐变效果,一些组件库甚至都会把这些简单的动画封装起来了,慢慢的一些属性和实践的问题就会被遗忘...但是异名这次的体验就很不一样,异名想起了当初写的博客,翻一下网盘甚至还发现了当初梳理的脑图,我能快速捡起当初对这个知识点的认知,快速定位到我要去使用哪些属性,以前写过的那些特效还重新唤起我css动画的兴奋