css3中-moz-、-ms、-webkit , -o分别代表的意思,以及微信浏览器内核分析
- //-ms 「ie」内核识别码
- //-moz 「firefox」内核识别码
- //-webkit 「Chrome/safari」内核识别码
- //-o「opera 欧朋」内核识别码
为什么要加识别码:
在标准还未确定时,部分浏览器已经根据最初起草案实现了部分功能,为了与之后确定下来的标准进行兼容,所以每种浏览器使用了自己的私有前缀与标准进行区分,当标准确立后,各大浏览器将逐步支持不带前缀的css3新属性。
微信的浏览器内核:
IOS版的微信都是采用webkit内核,包括Android版本的X5内核,是以webkit内核但是有些兼容问题,比如不制止flex这些
css3中的calc()使用
动态计算长度值。
需要特别注意一点:在calc函数里面运算符两侧必须各保留一个空格,否则函数会报错。
.box { width: 1920px;/*写给不支持calc()的浏览器*/ width:-moz-calc(100% -20px); width:-webkit-calc(100% - 20px); width: calc(100% - 20px); margin: 0 calc(50% - 960px); //大图只显示中间区域}
transparent
这个属性用来指定全透明色彩,类似rgba(0,0,0,0)。
css实现单行、多行文本溢出显示省略号(…)
-->css单行文本溢出显示display:block; overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
-->css多行文本溢出显示display: block;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;//这里写多行数字-webkit-box-orient: vertical;
-->jquery 超出部分...显示(function () {// 教师介绍-超出部分省略号var teachersContent="这个世界总有美好与不美好,既然生而为人,请积极向上,请善良!";var text;teachersContent.each(function (index, item) { text = $(item).html(); if (text.length > 10) { $(item).html(text.substr(0, 10) + '…'); }}); })();
伪元素
我特别喜欢伪元素的使用。就我用到的部分愚见记录~
伪元素可以不改变html结构而帮助达到某些css的效果,这对项目来说是锦上添花的存在。
- li自身所带有的原点的颜色是修改不了的,但是需求又要求原点和文字保持相同色彩。
html code
CoffeeTeaMilk
css code
.c-defind-liststyle li { list-style: none; position: relative;}.c-defind-liststyle li::before { content: ""; display: inline-block; width: 5px; height: 5px; background: #ccc; border-radius: 50%; position: absolute; top: -4px; left: -14px;}
::selection 选择器的使用
需求:选中文本后的颜色和背景,需要变成背景红色,字体蓝色。
p::selection,textarea::selection{ color: blue; background: red;}::-moz-selection{ color: blue; background: red;}::selection选择器匹配被用户选取的选取是部分。只能向::selection 选择器应用少量css属性:color、background、cursor以及outline
移动端填充满屏
蒙版上的内容
找个时间,好好研究伪元素,磨刀不误砍柴工。
实例 -->常用伪元素的使用code:如选中的状态:.header-link a.active::after,.header-link a:hover::after { content: ''; width: 24px; height: 4px; background-color: #005BAC; position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); border-radius: 2px;}
手机H5页面在浏览器上滑,地址搜索栏会消失。
解决方案如下:
html,body { height:100%; overflow-y:auto;}
css 中有空白的间隙
有时候某些元素直接会有我们不知道的某名奇妙的空白元素,这非常不好控制。我们在他们的父元素设置 font-size:0;就可以解决了。
在移动设备上的时候,水平滑动效果。
场景:分类需要水平可滑动 / h5 页面某些版块如表格,需要水平滑动 / 豆瓣影片排版
![bc701802b02c843a2850f1a8bf20c460.png](https://i-blog.csdnimg.cn/blog_migrate/8363419dff441088907a947c493380e8.jpeg)
分类1 ...... ul { white-space: nowrap; /* 重点:父元素定义可以水平滚动 */ overflow-x: auto; list-style: none; padding: 0; }ul li { /* 子元素宽高 随意 */ margin-left: 20px; width: 100px; height: 100px; display: inline-block; vertical-align: top; text-align: center;}
雪碧图的多倍图使用定位
background-image: url(../../icons.jpg); background-repeat: no-repeat; background-size: 50px; //如icons.jpg宽度100px,图标大小为2倍图,就设为50px background-position: 0 -100px 或者 center 或者 top center
不定宽高的div水平、垂直局中
实现最佳:transform进行元素偏移。
div被其中的内容撑起宽高
代码最简单:
div被其中的内容撑起宽高
兼容最佳:
div被其中的内容撑起宽高
多行文本垂直居中:
方法一:父元素使用display:table和子元素使用display:table-cell属性来模拟表格,子元素设置vertical-align:middle即可垂直居中
方法二:对子元素设置display:inline-block属性,使其转化成行内块元素,模拟成单行文本。父元素设置对应的height和line-height。对子元素设置vertical-align:middle属性,使其基线对齐。添加line-height属性,覆盖继承自父元素的行高。缺点:文本的高度不能超过外部盒子的高度。