css小常识
- static:对象遵循常规流。此时4个定位偏移属性不会被应用(即 没有声明position:relative, top、right、bottom、left不管用)。
- 当
position
的值为非static
时,其层叠级别通过z-index属性定义。 - margin值不超出父级,需要在父级声明 position:relative overflow:hidden(父级包含子级的margin值);
- 不同层叠上下文中,元素的显示顺序依据祖先的层叠级别来决定,与自身的层叠级别无关。
-
实现多行文本溢出显示省略号:
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
- 手机阻止旋转屏幕时自动调整字体大小
{-webkit-text-size-adjust:none;}
- 两个内联元素可通过vertical-align来调节对齐高度
- IE6,7支持inline元素转换成inline-block,但不支持block元素转换成inline-block
- 清浮动:
@mixin clearfix { &:after { clear: both; content: '.'; display: block; height: 0; line-height: 0; overflow: hidden; } }
10.margin折叠常规认知:
-
- margin折叠只发生在块级元素上;
- 浮动元素的margin不与任何margin发生折叠;
- 设置了属性overflow且值不为visible的块级元素,将不与它的子元素发生margin折叠;
- 绝对定位元素的margin不与任何margin发生折叠;
- 根元素的margin不与其它任何margin发生折叠;
- 11. IE8的hack
IE8字体显示为 黄色,IE8以上显示为 紫色
.test {
color: yellow;
}
html:root .test {
color: purple;
}