CSS knowledge

Flex-direction

Row was the axis horizontally and the axis vertically was a crossover axis Colum was the axis vertically and the crossover axis content-Content was all about the spindle align-item/align-self was all about the crossover axis

Flex-shrink

The Flex-shrink attribute specifies the shrink rule for flex elements. Shrink occurs only when the sum of the default widths is greater than the container, depending on the flex-shrink value.

If the width of each item is 13px and the total is greater than 30px, then the actual display of each item is 10px. This is because container is a Flex layout, and Flex-shrink defaults to 1, which shrinks. If you do not want to shrink, set flex-shrink to 0.

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

Note: The Flex-Shrink attribute does not take effect if the element is not an element of an elastic box object (Flex).

Get element size dynamically

width

$(‘.test_div’).with()

marginRight

$(‘.test_div’).css(‘marginRight’)

Selector (Priority)

Father >. Child {} > Adjacent selector.bro1 +.bro2{}

Style priority (override order)

Inline Style > ID selector > Class selector = Property selector = pseudo-class selector > tag selector = pseudo-element selector

Div height 100% has no effect

The solution

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

Copy the code

Fill the remaining space on the phone’s screen

The solution

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

Span ellipsis

A line of

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

}
Copy the code

Only two lines are displayed, if the ellipsis is displayed

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

Copy the code

Span Content scrolling

Add a parent container Div to span and set it as follows

overflow: hidden;
Copy the code

Span does not set width, dynamic judgment width greater than Div, set scrolling animation

 $('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%);
    }
}
Copy the code

Width=auto and Width= 100%

When the width = auto

Parent width= child width+ child border+ child margin+ child padding

When the width = 100%

The width of the child element is the inherited width of the parent element, excluding the margin padding and border portion of the child element

Preventing scrolling

$(" body "). The CSS ({position: "fixed", width: "100%"});Copy the code

Js to remove properties that have been set in the style file

.test{ margin-left:50px; } as js $(' test '). The attr (' style ', 'margin - left: reset; ')Copy the code

Position: Absolute Element is centered

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