css/css3补充

web前端 css

3种垂直居中的办法

绝对定位的父级，要相对定位哦，也可能是固定定位

第一种：

.div {
width: 100px; 
height: 100px;
border: 1px solid red;
position: absolute;
left: 50%; 
top: 50%;
transform: translate(-50%,-50%);
/*50%为自身尺寸的一半*/
}

第二种

.div {
width: 200px;
height: 200px;
border: 1px solid red;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
}

第三种：

.div {
width:100px;
height:100px;
border:1px solid red;
position:absolute;
left:50%;
top:50%;
margin-left:-50px;/*为宽度尺寸的一半*/
margin-top:-50px;/*为高度尺寸的一半*/
}

第四种

父级
.p{

}

hover的使用

.contact_area:hover span{
    display:block;
}

box-sizing

语法

box-sizing: content-box|border-box|inherit;

content-box (默认值)

width: content.width;

这是由 CSS2.1 规定的宽度高度行为。
宽度和高度分别应用到元素的内容框。
在宽度和高度之外绘制元素的内边距和边框。

border-box

width: border.width + padding.width + content.width;

为元素设定的宽度和高度决定了元素的边框盒。
就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

inherit

inherit 规定应从父元素继承 box-sizing 属性的值。

filter

字体内容超出省略

单行文字超出省略

{
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}

还需要加宽度width属来兼容部分浏览。

多行文字超出省略

使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；

{
    display: -webkit-box;/*必须结合的属性，将对象作为弹性伸缩盒子模型显示*/
    -webkit-line-clamp: 3;/*显示的文本的行数*/
    -webkit-box-orient: vertical;/*必须结合的属性,设置或检索伸缩盒对象的子元素的排列方式*/
    overflow: hidden;
}