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
<!-- li自身圆点的颜色是修改不了的 -->
<ul class="c-defind-liststyle">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>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移动端填充满屏
<style>
.mask-pop::before{
content:" ";
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
background-color:rgba（0,0,0,0.6）;/* 颜色自定义 */
z-index:-10;
}
</style>
<body>
<div class="mask-pop">蒙版上的内容</div>
</body>
找个时间，好好研究伪元素，磨刀不误砍柴工。
实例 -->常用伪元素的使用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 页面某些版块如表格，需要水平滑动 / 豆瓣影片排版
<ul>
<li> <a>分类1</a> </li>
......
</ul>
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进行元素偏移。
<body>
<style>
body,html { margin:0; width:100%; height:100%; }
#box { width:100%; height:100%; background:rgba(0,0,0,0.7);
position:relative; }
#content{ position:absolute; background:pink; left:50%; top:50%;
transform:translateX(-50%) translateY(-50%);
-webkit-transform:translateX(-50%) translateY(-50%); }
</style>
<div id="box">
<div id="content">div被其中的内容撑起宽高</div>
</div>
</body>
代码最简单：
<body>
<style>
body,html { margin:0; width:100%; height:100%; }
#box { width:100%; height:100%; background:rgba(0,0,0,0.7);
display:flex; justify-content:center; align-items:center; }
#content {width:50%; height:50%; background:pink; }
</style>
<div id="box">
<div id="content">div被其中的内容撑起宽高</div>
</div>
</body>
兼容最佳：
<style>
body,html { margin:0; width:100%; height:100%; }
#box { width:100%; height:100%;background:rgba(0,0,0,0.7);
position:relative;}
#content { width:50%; height:50%; background:pink;
position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; }
</style>
<div id="box">
<div id="content">div被其中的内容撑起宽高</div>
</div>
多行文本垂直居中：
<style>
.bg_box {
width: 300px;
height: 300px;
margin-top: 20px;
background-color: #BBBBBB}
/*方法一*/
.span_box {
display: table;
}
.words_span {
display: table-cell;
vertical-align: middle;}
/*方法二*/
.p_box {
line-height: 300px;
}
.words_p {
display: inline-block;
line-height: 20px; /*单独给子元素设置行高，覆盖父级元素的行高*/
vertical-align: middle; /*基线居中对齐*/}
</style>
<div class="span_box bg_box">
<span class="words_span">
方法一：父元素使用display:table和子元素使用display:table-cell属性来模拟表格，子元素设置vertical-align:middle即可垂直居中
</span>
</div>
<div class="p_box bg_box">
<p class="words_p">
方法二：对子元素设置display:inline-block属性，使其转化成行内块元素，模拟成单行文本。父元素设置对应的height和line-height。对子元素设置vertical-align:middle属性，使其基线对齐。添加line-height属性，覆盖继承自父元素的行高。缺点：文本的高度不能超过外部盒子的高度。
</p>
</div>
</body>
文章为用户上传，仅供非商业浏览。发布者：Lomu，转转请注明出处： https://www.daogebangong.com/articles/detail/css-chang-yong-yang-shi-ci-dian.html
支付宝扫一扫 
评论列表（196条）
测试