css计算高度calc_css常用样式词典

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 页面某些版块如表格，需要水平滑动 / 豆瓣影片排版

分类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属性，覆盖继承自父元素的行高。缺点：文本的高度不能超过外部盒子的高度。