css高级技巧

fixed相对父节点定位

transform: rotate(0)

使用 fixed 进行布局的元素，在一般情况下会相对于屏幕视窗来进行定位。但是如果父元素的 transform, perspective 或 filter 属性不为 none 时，position为fixed 的元素就会相对于父元素来进行定位。

margin塌陷

子元素设置margin会影响父元素的margin
因为嵌套也属于毗邻，所以在样式表中优先级更高子元素的margin会覆盖外层父元素定义的margin。

父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己 “领导”(父元素，祖先元素)的麻烦。只要给领导设置个有效的 border或者padding就可以有效的管制这个目无领导的margin防止它越级，假传圣旨，把自己的margin当领导的margin执行。

解决办法：

1、父元素或者子元素使用浮动或者绝对定位。
2、父级设置overflow:hidden
3、父级设置padding（破坏非空白的折叠条件）
4、父级设置border

文本溢出

1. 单行文本溢出

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

2. 多行文本

display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;

自动宽高比

width: 200px;
aspect-ratio: 16/9;

自动宽高比：w/h = 16/9

背景图铺满可变型

    background-image: url(http://172.1.202.229/group1/M00/74/53/rAHK5WVRjFWAJ7FrAD2sjcdR2Zc871.jpg);
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;