html和css知识点

选择器                                选择器权重
继承或者*                              0.0.0.0
元素选择器                            0.0.0.1
类选择器或者伪类选择器     0.0.1.0
ID选择器                           0.1.0.0
行内选择器 style=""              1.0.0.0
!important                             无穷大
        
嵌套块塌陷
1.父元素定义上边框
    border-top: 1px solid transparent
2.父元素定义内边距
    padding-top: 10px
3.父元素添加
    overflow: hidden

圆角 border-radius 阴影 border-shadow

清除浮动
1.在父元素添加最后一个子元素，并设置 clear:both
    .clearfloat {
        clear: both;
    }
2.在父元素上添加after伪元素
    .clearfix::after{
        content: ""
        display: block;
        height: 0;
        visibility: hidden;
        clear:both
    }
为了兼容性，因为ie6/7不能使用伪类，所以加上此行代码。
    .clearfix {
        *zoom: 1;
    }

这些属性的区别
    display: none;      隐藏且不占有原先位置
    visibility: hidden; 隐藏但原来位置保留
    opacity: 0;         隐藏但原来位置保留
    overflow: hidden;     对溢出的部分隐藏

溢出文字省略号显示
1.强制一行显示
    white-space: nowrap;
2.超出部分隐藏
    overflow: hidden;
3.省略号代替
    text-overflow: ellipsis;

:nth-child() 和 :nth-of-type() 区别

先看section中第一个元素 再看是不是div
    section div:nth-child(1) {
        background-color: violet;
    }
对指定元素盒子排序, section中div排序 看第一个
    section div:nth-of-type(1) {
        background-color: violet;
    }

标准盒子模型
    width = content(内容区宽度)
IE(怪异)盒子模型
    width = content + border + padding
可以为box-sizing赋三个值：
content-box：默认值，border和padding不算到width范围内，可以理解为是W3c的标准模型(default)
border-box：border和padding划归到width范围内，可以理解为是IE的怪异盒模型
padding-box：将padding算入width范围

img {
    /* blur是一个函数，括号里数值越大图像越模糊，单位px */
    filter：blur(5px);
}
.son {
    /* width: 100px; */
    /* 永远比父盒子小30px */
    width: calc(100% - 30px);
}
    
transition: 过渡的属性 时间 运动曲线 何时开始
    transition: width 1s ease .5s;
径向渐变：
    background-image: radial-gradient(red, yellow);
线性渐变：
    background-image: linear-gradient(to right, red, yellow);

2D转换
img {
    过渡    transition: all 1s
    中心    transform-origin: left bottom
}
img:hover {
    平移    transfrom: translate(-50%, -50%)
    旋转    transform: rotate(360deg)
    缩放    transform: scale(2, 2)
}

3D转换
body {
    /* 透视写在被观察元素的父或者祖先盒子上面 */
    /* 视距是一个人的眼;睛到屏幕的距离 */
    perspective: 200px;
}
img:hover {
    /* z轴 物体距离屏幕的距离，数值越大（正值）看到物体越大 */
    transform: translate3d(500px, 100px, 100px);
}
3D旋转
    /* 控制子元素开启3D空间 必须写在父盒子上*/
    transform-style: preserve-3d;
    /* 沿着自定义轴旋转deg为角度 xyz是表示旋转轴的矢量 */
    transform: rotate3d(1, 1, 1, 360deg);
    transform: rotateX(60deg);

动画
@keyframes move{
    form {
        transform: translateX(0);
    }
    to {
        transform: translateX(500px);
    }
    动画序列
    0% {}
    50% {}
    100% {}
}

/* 浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无须添加。 */
-moz-:代表firefox浏览器私有属性
-ms-: 代表IE浏览器私有属性
-webkit-:代表safari、chrome 私有属性
-o-:代表Opera私有属性