CSS 知识点flex-shrink 属性指定了 flex 元素的收缩规则。仅在默认宽度之和大于容器的时候才会发生收缩

Flex-direction

row: 水平方向是主轴，垂直方向是交叉轴 colum：垂直方向是主轴，水平方向是交叉轴 justifly-content: 针对主轴 align-item/align-self : 针对交叉轴

Flex-shrink

flex-shrink 属性指定了 flex 元素的收缩规则。仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。

如下,每个item宽度时13px,总和大于 30px，那么实际显示每个item是 10px。这是因为container是flex布局，而flex-shrink默认是1，则会收缩。如果不想收缩，把flex-shrink为0即可。

<style>
.container{
 display:flex;
 width: 30px;
}
.item{
    width: 13px;
}
</style>
<div class="container">
    <div class="item"/>
    <div class="item"/>
    <div class="item"/>
</div>

注意：如果元素不是弹性盒对象(flex)的元素，则 flex-shrink 属性不起作用。

动态获取元素尺寸

width

$('.test_div').with()

marginRight

$('.test_div').css('marginRight')

选择器（优先级）

后代选择符 .father .child{} > 子选择符 .father > .child{} > 相邻选择符 .bro1 + .bro2{}

样式优先级（覆盖顺序）

内联样式（style）> ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器

div height 100% 不起作用

解决办法

html,body{
    width: 100%;
    height: 100%;
}

填充手机屏幕剩余空间

解决办法

.top-div{
    height:100px
}
.bottom-div{
    position:absolute;
    top:100px;
    height:100%
}

Span 省略号

一行

.title{
	width:200px;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	word-break:keep-all;

}

只显示二行，超出则省略号显示

.line-clamp2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

Span内容滚动

给span增加父容器Div,并设置如下

overflow: hidden;

span不设置宽度,动态判断宽度大于Div时，设置滚动动画

 $('div').each(function(i){
	if( $("span", this).width() > $(this).width()){
		$("span", this).attr('style','animation: wordsLoop 5s linear infinite;')
	}
})


@keyframes wordsLoop {
    0% {
        transform: translateX(0px);
        -webkit-transform: translateX(0px);
    }
    100% {
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
    }
}

Width=auto 和 width=100% 的区别

当width=auto时

父元素的width=子元素的width+子元素border+子元素margin+子元素padding

当width=100%时

子元素的宽度是继承的父元素宽度，不包括子元素设置的margin padding 和border部分

阻止界面滚动

$("body").css({
　　position: "fixed",
　　width: "100%"
});

js 中删除已在样式文件中设置的属性

.test{
margin-left:50px;
}

如js中
$('.test').attr('style','margin-left:reset;')

position:absolute 元素居中

#container {
 position: absolute;
 left: 50%;
 width: 980px;
 margin-left: -490px;
}

CSS 知识点