CSS笔记

cale函数

calc函数是css3新增的功能，可以使用calc()计算border、margin、pading、font-size和width等属性设置动态值

#div1 {
    position: absolute;
    left: 50px;
    width: calc( 100% / (100px * 2) );
    /* 兼容写法 */
    width: -moz-calc( 100% / (100px * 2) );
    width: -webkit-calc( 100% / (100px * 2) );
    border: 1px solid black;
}

注意点：

• 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px);
• calc()函数支持 "+", "-", "*", "/" 运算;
• 对于不支持 calc()的浏览器，整个属性值表达式将被忽略。不过我们可以对那些不支持calc()的浏览器，使用一个固定值作为回退

CSS3新增伪类

• p:first-of-type 选择属于其父元素的首个<p>元素的每个<p> 元素。
• p:last-of-type 选择属于其父元素的最后 <p> 元素的每个<p> 元素。
• p:only-of-type 选择属于其父元素唯一的 <p>元素的每个 <p> 元素。
• p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。
• p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。
• :after 在元素之前添加内容,也可以用来做清除浮动。
• :before 在元素之后添加内容
• :enabled
• :disabled 控制表单控件的禁用状态。
• :checked 单选框或复选框被选中

文字溢出

单行

div {
    width: 200px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

多行

div {
    width: 200px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}