CSS/CSS3
CSS/CSS3
S号口袋怪
饭饭之辈
展开
-
[CSS3] CSS3 Note(4)
上一篇????:CSS3 Note(3)Created: 2020/11/09Created by: ShianGee HwangTags: flex布局, 响应式布局, 布局十三、多列布局兼容写法:-moz-column-x:; /* Firefox */-webkit-column-x:; /* Safari and Chrome *//*IE不支持*/column-count规定元素应该被划分的列数column-count: number|auto;colum原创 2020-11-09 21:00:07 · 139 阅读 · 0 评论 -
[CSS3] CSS3 Note(3)
Created: 2020/11/07Created by: ShianGee HwangTags: 动画过渡, 盒子变形十、盒子的变形1/CSS 2D变形2/CSS3 3D变形perspective让子元素获得透视效果persperctive: none / number;主流浏览器都不支持,谷歌要加-webkit-,或者直接在长度后加单位transform-style规定如何在 3D 空间中呈现被嵌套的元素注意 ♦️:该属性必须与 transform 属性一同使用,使原创 2020-11-08 16:15:06 · 121 阅读 · 2 评论 -
[CSS3] CSS3 Note(2)
六、CSS3平铺背景多重背景backgroud:背景色 背景图片 平铺方式 位置,背景色 背景图片 平铺方式 位置,…backgroud-size:设定背景图像的尺寸 background-size: length|percentage|cover|contain;length:设置背景图像的高度和宽度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 “auto”。percentage:以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度原创 2020-11-02 14:36:36 · 135 阅读 · 0 评论 -
[转] 你知道空白网页的颜色是什么吗?
如果下面这段代码,在浏览器中打开。最终的页面颜色是什么?<html> <body> <h1>Hello World</h1> </body></html>你可能意识到这个是陷阱问题,大部分同学会说是白色,但页面其实并不是白色的: 它是透明的。这是因为浏览器的底色是白色的,我们透过了页面的透明色,看到了浏览器的底色而已。证明页面是无色的如果我们希望有一个黄色背景的页面,我们可以在 body 上添加一个背景色:body {转载 2020-10-28 17:27:41 · 382 阅读 · 0 评论 -
[CSS3] CSS3 Note(1)
一、CSS3的主要新特性1)选择器2)阴影3)形状转换(2d,3d)4)变形5)动画(过度动画,帧动画)6)边框7)多重背景8)反射9)文字10)颜色(rgba/hsl/hsla)11)滤镜12)弹性布局13)多列布局14)盒模型15)web字体16)媒体查询二、CSS3属性前缀兼容不同浏览器,添加厂商前缀Trident内核:主要代表为IE浏览器Gecko内核:主要代表为FirefoxBlink内核:主要代表为Chrome和Opera ——>是webki原创 2020-10-27 23:08:47 · 185 阅读 · 0 评论 -
[CSS][CSS3] word-wrap和word-break
word-wrap属性用处:允许长单词换行到下一行p.test {word-wrap:break-word;}word-break属性用处:在恰当的断字点进行换行p.test {word-break:hyphenate;}区别看到一篇讲得很清新的文章,移至原文阅读。????你真的了解word-wrap和word-break的区别吗总结引用参考原文:事实上,word-wrap:break-word与word-break:break-all共同点是都能把长单词强行断句;不同点是w原创 2020-10-22 22:11:58 · 151 阅读 · 0 评论 -
[CSS] BFC/display:flow-root
快速了解CSS display:flow-root声明什么是BFC?原创 2020-10-22 15:03:04 · 144 阅读 · 0 评论 -
CSS提升技巧20个
http://www.pinlue.com/article/2020/07/2814/2211088479753.html原创 2020-10-22 13:38:42 · 92 阅读 · 0 评论 -
CSS属性继承
CSS优先级!important > 行内样式 > ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性常用的css不可继承的属性display:规定元素应该生成的框的类型text-decoration:规定添加到文本的装饰text-shadow:文本阴影效果white-space:空白符的处理盒子模型的属性:width、height、margin 、border、padding背景属性:background定位属性:f原创 2020-10-22 13:06:28 · 173 阅读 · 0 评论 -
[转]CSS属性:vertical-align:middle,无效
图一: 图二: 图三: 这是外面一个div里面在分几个div,我在其中一个中输入文字,但是写了text-align即文字居中和vertical-align垂直居中,以为就会让文字居于正中间,但是却显示如图二的效果!这是为什么呢!所以查找了许多资料,原来vertical-align属性只对行内元素有效,对块内元素无效!而此时就会用到display属性,大家也看到我里面有设置display属性为inline-block属性,确没有效...转载 2020-10-22 12:47:37 · 346 阅读 · 0 评论 -
[转]css中的px,em,rem
·概念介绍:1.px(pixel,像素):是一个虚拟长度单位,是计算机系统的数字化长度单位,如果px要换算成物理长度,需要制定精度DPI(Dots Per Inch,每英寸像素数),在扫描打印时一般都有DPI可选。Windows系统默认是96dpiApple系统默认是72dpi。2.em(相对长度单位,相对于当前对象内文本的字体尺寸):是一个相对长度单位,最初是指字母M的宽度,故名em。现指的是字符宽度的倍数,用类似百分比,如:0.8em,1.2em,2em等。通常1em=16px。3.rem(roo转载 2020-10-22 11:22:58 · 225 阅读 · 0 评论