In addition to Weibo, there is also WeChat
Please pay attention
WeChat public account
Shulou
2025-01-26 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >
Share
Shulou(Shulou.com)06/02 Report--
This article mainly introduces "what are the main points of CSS interview". In the daily operation, I believe that many people have doubts about the main points of CSS interview. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the doubts about "what are the main points of CSS interview?" Next, please follow the editor to study!
1. Px,em,rem, vw, vh
1.px (pixel, pixels):
It is a virtual length unit, which is the digital image length unit of the computer system. If you want to convert px to physical length, you need to specify the precision DPI (Dots Per Inch, pixels per inch). DPI is generally optional when scanning and printing. The Windows system defaults to 96dpi.Apple defaults to 72dpi.
2.em (relative unit of length, relative to the font size of the text within the current object):
Is a unit of relative length, originally referring to the width of the letter M, hence the name em. Now it refers to the multiple of the width of the character, using a similar percentage, such as: 0.8em, 1.2empendi2em and so on. Usually 1em=16px.
3.rem (root em, root em):
Rem is a relative unit, and 1rem equals the size of the font set on the html element. As long as we set the size of the font-size on html, we can change the size represented by the rem. In this way, we have a controllable unified reference system. We now have two goals:
The size represented by the rem unit is proportional to the screen width.
That is, setting the font-size of the html element to be proportional to the screen width of the rem unit and the px unit is easy to convert, so it is convenient for us to follow the difference between cssrem and em:
Rem is the font size relative to the root element (html), while em is relative to the font size of its parent element
Em gets the last three decimal places at most
4.vw 、 vh:
A new unit vw/vh is introduced in css3, which is related to the view window. Vw represents the width of the view window, and vh represents the height of the view window. In addition to vw and vh, there are two related units, vmin and vmax. The specific meanings of each unit are as follows:
Here we find that the width and height of the window are all 100vw/100vh, so vw or vh, hereinafter referred to as vw, is very similar to the percentage unit.
The difference between vw and% is:
II. Holy Grail layout-double flying wing layout
The Grail layout and the double wing layout are all aimed at the adaptive web layout with three columns, left and right columns, fixed middle column frame.
Three-column layout with adaptive width in the middle and fixed width on both sides
The middle bar should give priority to rendering in the browser.
Allow the highest height of any column
Reminder: in the relative layout of the Grail layout, the main element must be the first element of container
Html code
Main left right
1. Relative layout:
.container {width: 100%; min-height: 300px; padding: 060px; box-sizing: border-box;}. Container > div {position: relative; float: left;} .left, .right {width: 60px; height: 100%;} .left {left:-60px; margin-left:-100%;} .right {right: 0; margin-right:-100%;} .main {width: 100%; height: 100% }
2.flex layout:
.container {width: 100%; min-height: 300px; display: flex;}. Main {flex-grow: 1;} .left {order:-1; flex-basis: 60px;} .right {flex-basis: 60px;}
3. Absolute layout:
.container {width: 100%; min-height: 300px; position: relative;}. Container > div {position: absolute;} .left, .right {width: 60px; height: 100%;} .main {width: calc (100%-120px); height: 100%; left: 60px;} .left {left: 0;} .right {right: 0;}
III. Streaming layout and responsive layout
Streaming layout
Use non-fixed pixels to define web page content, that is, percentage layout, according to the width of the screen by setting the width of the box to a percentage.
The row is scalable, free from the restriction of fixed pixels, and the content is filled to both sides.
Responsive development
Using Media Query (Media query) in CSS3, the web page layout of a width interval is specified by querying the width of screen.
Ultra-small screen (mobile device) below 768px
Small screen device 768px-992px
Medium screen 992px-1200px
Widescreen device 1200px or above
Because responsive development is more tedious, third-party responsive frameworks are generally used, such as bootstrap to complete part of the work, of course, you can also write your own responsive framework.
4. CSS priority algorithm
Element selector: 1
Class selector: 10
Id selector: 100
Element tag: 1000
! the style declared by important has the highest priority and will be calculated if there is a conflict.
If the priority is the same, select the last style that appears.
Inherited styles have the lowest priority.
5. What are the new pseudo-classes in CSS3?
P:first-of-type selects the first element that belongs to its parent element
P:last-of-type selects the last element that belongs to its parent element
P:only-of-type selects the element that is unique to its parent element
P:only-child selects the only child element that belongs to its parent element
P:nth-child (2) selects the second child element that belongs to its parent element
: enabled: the disabled state of the disabled form control
The checked radio box or check box is selected.
VI. New features of CSS3
1.RGBA and transparency
2.background-image background-origin (content-box/padding-box/border-box) background-size background-repeatword-wrap (wrapping long indivisible words)
3.word-wrap:break-word
4. Text shadow: text-shadow: 5px 5px 5px # FF0000; (horizontal shadow, vertical shadow, blur distance, shadow color)
5.font-face property: define your own font
6. Fillet (border radius): the border-radius property is used to create the fillet
7. Border picture: border-image: url (border.png) 30 30 round
8. Box Shadow: box-shadow: 10px 10px 5px # 888888
9. Media query: define two sets of css that will use different attributes when the size of the browser changes
What are the ways to optimize and improve the performance of CSS?
1. Avoid excessive constraints
two。 Avoid descendant selectors
3. Avoid chained selector
4. Use compact syntax
5. Avoid unnecessary namespaces
6. Avoid unnecessary repetition
7. It is best to use a name that represents semantics. A good class name should describe what it is rather than something like
8. Avoid! Important, you can choose another selector
9. To simplify the rules as much as possible, you can merge repetitive rules from different species.
8. CSS animation
Transform,transition and animation in CSS are three separate parts, in which transfrom is mainly to control the deformation of elements, and there is no concept of time control, while transition and animation are the part of animation, they can control the effect of switching elements in two or more states in one time period.
1.transition
Transition attribute: how long does the transition-delay delay before the animation starts
A duration of transition-duration transition animation
Transition-property executes the properties corresponding to the animation, such as color,background, etc. You can use all to specify all the attributes
Transition-timing-function over time, animation changes the trajectory of the calculation method, the common are: linear,ease,ease-in,ease-out,cubic-bezier (...) Wait.
Transition related events
The transitionend event is triggered at the end of the transition animation.
Usually we perform some methods after the end of the animation, such as moving on to the next animation effect or something else.
The animation methods in Zepto.js are handled using the CSS animation attribute, and the callback after the animation is run should be handled with this event.
2.animation
Although transition has provided great animation effects, but we can only control from one state to another state, there is no way to control the continuous change of multiple states, and animation has helped us achieve this. The premise of using animation is that we need to use @ keyframes to define an animation effect. The rules defined by @ keyframes can be used to control each state in the animation process. The syntax looks like this:
@ keyframes W {from {left: 0; top: 0;} to {left: 100%; top: 100%;}}
The @ keyframes keyword is followed by the name of the animation, followed by a block with each selector for the progress of the animation, and the block after the selector is still our common CSS style attribute.
Animation attribute:
Animation-name the name of @ keyframes of the animation you need.
Animation-delay is the same as transition-delay, the time the animation is delayed.
Animtaion-duration, like transition-duration, the duration of the animation. One direction control of animation-direction animation.
The default is normal, and if the above left ranges from 0% to 100%, the default is from left to right. If the value is reverse, then it is from right to left
Because animation provides loop control, two other values are alternate and alternate-reverse, which reverse the direction of the animation at the beginning of each loop, but in a different direction.
Because animation provides loop control, two other values are alternate and alternate-reverse, which reverse the direction of the animation at the beginning of each loop, but in a different direction.
Animation related events
You can listen to several states of animation by binding events, which are:
The animationstart animation start event, if there is a delay attribute, will not be triggered until the animation actually starts. If there is no delay, then this event will be triggered when the animation effect is applied to the element.
The event at the end of the animationend animation, similar to transitionend. If there are multiple animations, then this event will be triggered multiple times, as in the above example, this event will be triggered three times. If animation-iteration-count is set to infinite, then this event will not be triggered.
Animationiteration Animation cycle an event at the end of a life cycle, unlike the previous event, which is triggered at the end of an animation at the end of each loop, not at the end of the entire animation. In an infinite loop, this event will trigger infinitely unless duration is 0.
IX. BFC
The full name of BFC is Block Formatting Context, or block formatting context. It is a concept of CSS rendering positioning defined by the CSS2.1 specification. To understand what BFC really is, first take a look at what a visual formatting model is.
Visual formatting model
Visual formatting Model (visual formatting model) is a mechanism used to process documents and display them on visual media, and it is also a concept in CSS.
The visual formatting model defines the generation of boxes (Box), which mainly include block boxes, inline boxes, anonymous boxes (boxes with no names that cannot be selected by selectors) and some experimental boxes (which may be added to the specification in the future). The type of the box is determined by the display property.
How to form BFC
Root element or other element that contains it; * floating (element's float is not none); * absolute positioning element (element's position is absolute or fixed); * inline block inline-blocks (element's display: inline-block); * table cell (element's display: table-cell,HTML table cell default attribute); * element whose overflow value is not visible; * resilient box flex boxes (element's display: flex or inline-flex)
But among them, the most common ones are overflow:hidden, float:left/right and position:absolute. That is, every time you see these attributes, you represent the element and a BFC is created.
Browser constraint rules for BFC areas:
The child elements of the generated BFC element are placed one after another.
Vertically, their starting point is the top of a containing block, and the vertical distance between two adjacent child elements depends on the margin property of the element. The outer margins of adjacent block-level elements in BFC collapse (Mastering margin collapsing).
In the child elements that generate the BFC element, the left margin of each child element touches the left boundary of the containing block (for right-to-left formatting, the right margin touches the right boundary), even if the floating element (although the content area of the child element is compressed due to floating), unless the child element also creates a new BFC (such as it is also a floating element).
BFC is an isolated container on the page, and the child elements inside the container do not affect the outer elements, and vice versa. We can use this feature of BFC to do a lot of things.
10. Flex layout
Basic concept
Elements that use Flex layouts are called Flex containers (flex container), or "containers" for short. All its child elements automatically become container members, called Flex projects (flex item), or "projects" for short.
By default, the container has two axes: a horizontal principal axis (main axis) and a vertical cross axis (cross axis). The start position of the spindle (the intersection with the border) is called main start, and the end position is called main end;. The start position of the cross axis is called cross start, and the end position is called cross end.
Projects are arranged along the principal axis by default. The spindle space occupied by a single project is called main size, and the cross-axis space occupied by a single project is called cross size.
Properties of the container:
1.flex-direction: the attribute determines the direction of the principal axis (that is, the direction of the arrangement of items)
Row (default): the principal axis is horizontal and the starting point is at the left end.
Row-reverse: the principal axis is horizontal, and the starting point is at the right end.
Column: the principal axis is vertical, and the starting point is along the upper edge.
Column-reverse: the principal axis is vertical, and the starting point is at the lower edge.
2.flex-wrap: by default, projects are arranged on a single line (also known as "axis")
Nowrap (default): no line wrapping.
Wrap: line break, the first line is at the top.
Wrap-reverse: wrap, the first line is at the bottom.
3.flex-flow: shorthand for flex-direction attribute and flex-wrap attribute
4.justify-content: defines the alignment of the project on the spindle
Flex-start (default): align left
Flex-end: align to right
Center: Center
Space-between: both ends are aligned and the spacing between items is equal.
Space-around: the intervals on both sides of each item are equal.
Therefore, the interval between items is twice as large as the interval between the project and the border.
5.align-items: defines how the project is aligned on the cross axis
Flex-start: the start point of the cross axis is aligned.
Flex-end: the end point of the cross axis is aligned.
Center: the midpoint alignment of the cross axis.
Baseline: the baseline alignment of the first line of text of the project.
Stretch (default): if the project is not set to height or is set to auto, it will occupy the height of the entire container.
6.align-content: defines the alignment of multiple axes.
If the project has only one axis, this property does not work flex-start: align with the start point of the cross axis.
Flex-end: aligns with the end of the cross axis.
Center: aligns with the midpoint of the cross axis.
Space-between: aligned with both ends of the cross axis, the spacing between the axes is evenly distributed.
Space-around: the intervals on both sides of each axis are equal. Therefore, the interval between the axis is twice as large as the interval between the axis and the frame.
Stretch (default): the grid line occupies the entire cross axis.
The order property of the project defines the order in which the items are arranged.
The lower the number, the higher the arrangement, and the default is 0.
The flex-shrink property defines the reduction of the project, which defaults to 1, that is, if there is not enough space, the project will shrink.
The flex-basis attribute defines the principal axis space (main size) occupied by the project before allocating excess space.
The flex attribute is an abbreviation for flex-grow, flex-shrink, and flex-basis, and the default value is 0 1 auto.
The align-self property allows a single project to be aligned differently from other items, overriding the align-items property.
This attribute may take six values, all of which are exactly the same as the align-items property except auto.
Summary of Grid layout
Grid layout is a new layout in css, which has a strong ability to control the location and size of boxes and box contents. Unlike flex, flex focuses on single axis, while grid adapts to multi-axis, so here's a brief introduction.
Flex layout schematic
Grid layout schematic
Basic concept
The element that sets the display: grid; is called a container, and its immediate child element is called a project, but note that the descendant element is not a project.
Grid line: gridlines that make up the structure of a grid layout, divided into horizontal and vertical types. Grid track: the space between two adjacent grid lines, which can be thought of as a row or a column.
Grid cell: the space formed by dividing lines between two adjacent rows and columns, which is a unit in the grid layout.
Grid area: all the space wrapped by four grid lines, and any number of grid cell make up a grid area.
Container Properti
The grid container still has a lot of properties, a total of 18, but many can be done by shorthand, so don't be too nervous.
Grid-template series
Grid-template-columns
Grid-template-rows
Grid-template-areas
Grid-gap series
Grid-column-gap
Grid-row-gap
Place-items series
Justify-items
Align-items
Place-content series
Justify-content
Align-content
Grid series
Grid-auto-columns
Grid-auto-rows
Grid-auto-flow
12. Box-sizing
Set the CSS box model to the standard model or the IE model. The width of the standard model includes only content, while the two IE model includes border and padding.
The box-sizing property can be one of three values:
Content-box, the default value, only calculates the width of the content. Border and padding are not counted in width.
Padding-box,padding is calculated into the width
Border-box,border and padding are calculated into the width
XIII. Hardware acceleration
Sometimes animation can lead to stutters on the user's computer, and you can use hardware acceleration in specific elements to avoid this problem:
Block {transform: translateZ (0);} at this point, the study of "what are the main points of the CSS interview" is over. I hope I can solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!
Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.
Views: 225
*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.
Continue with the installation of the previous hadoop.First, install zookooper1. Decompress zookoope
"Every 5-10 years, there's a rare product, a really special, very unusual product that's the most un
© 2024 shulou.com SLNews company. All rights reserved.