Article Directory
flex
flex abbreviation：
If flex-grow and flex-shrink are not specified in the flex property, they are 1, and flex-basis is 0%.
flex:n;
/* 等同于: */
flex-grow :n;
flex-shrink :1;
flex-basis :0%;
flex:n1 n2;
/* 等同于: */
flex-grow :n1;
flex-shrink :n2;
flex-basis :0%;
flex:L;
/* 等同于: */
flex-grow :1;
flex-shrink :1;
flex-basis :L;
flex:n L;
/* 等同于: */
flex-grow:n;
flex-shrink:1;
flex-basis:L;
"Flex: 1" of "Front-end Vernacular" - Nuggets (juejin.cn)
flex-basis
flex-basis:0
- When the flex item only sets flex-basis: 0, in performance, the item will collapse to the minimum width
flex:1 1 0%When the item is reduced, the size of the item is determined according to the size of its own content (that is, the size of the content to expand the box)
flex-basis:0The difference fromflex-basis:auto
0 and auto in flex-basis - Nuggets (juejin.cn)
Hide elements (7 methods)
Does not take up space
display:none
- does not take up space on the page
- The render tree will not contain the render object
- Will not bind response event
- will cause the browser to reflow and redraw
- Same effect as
<div hidden></div>hidden in
设置height width为0
Set the property that affects the element box model to 0. If there are child elements or content in the element, it should be set to overflow:hiddenhide its child elements.
- element is not visible
- does not take up space
- Does not respond to click events
position:absolute
- Remove element from viewable area
- element is not visible
- Does not affect page layout
Occupy position
visibility:hidden
- Occupy the position without changing the layout
- will not respond to binding events
- does not reflow but repaints
opacity:0
- Element transparency is set to 0
- occupy position
- Can respond to binding events
- Cannot control the display of child elements
- Does not cause rearrangement, generally causes redrawing
color: rgba(0,0,0,0);
background-color: rgba(0,0,0,0);
R means red, G means green, B means blue, and the values of the three colors can be positive integers or percentages. A means Alpha transparency. The value is between 0 and 1, similar to opacity.
rgba()and opacitycan achieve transparency, but the largestdifferentyes:
- opacity acts on the element, and the transparency of all content within the element
- rgba() only works on the color of the element
coloror its background colorbackground-color - opacity will inherit the opacity attribute of the parent element
- The descendant elements of the element set by RGBA will not inherit the transparency property
transform: scale(0,0)
- occupy position
- does not respond to binding events
- Does not trigger browser reflow
9 ways to hide elements in CSS - Nuggets (juejin.cn)
unit
- absolute unit
- relative unit
The three units of px % em can be applied to the development of most projects and have good compatibility
absolute unit
relative unit
Some commonly used summaries:
- px: A fixed pixel unit, one pixel represents the smallest area that can be displayed on the terminal screen
- % : The width and height of the element can change with the change of the browser to achieve responsiveness, and the percentage of the general child element is relative to the direct parent element
- em :
font-sizeWhen used as a unit, it represents父元素的字体大小a proportional calculation value;其他属性when used as a unit, it represents a relative自身字体大小按比例calculation value
em example:
.parent {
font-size: 32px;}
/** child字体为16px **/
.child {
font-size: 0.5em; width: 2em;
/* 32 * 0.5 * 2 */}
- rem : New in CSS3. Applied to non-root elements, relative to the font size of the root element
html {
font-size: 20px;}
/* 作用于非根元素，相对于根元素字体大小，所以为40px */
p {
font-size: 2rem;}
- vw: Relative to the view window width, the view window width is 100vw
- vh: Relative to the view window height, the view window height is 100vh
- rpx: Unique to WeChat applets, it solves the size unit of screen adaptation. Regardless of the screen size, the specified screen width is 750rpx
mind Mapping
