★ if the width and height of parent and child elements are not fixed, how to achieve horizontal and vertical centering
- Elastic box model -Parent element settings: display:flex; justify-content:center; align-items:center -Additional action: set elastic box for parent element display:flex; Child elements can be set margin: auto; Achieve vertical and horizontal centering - Positioning properties( position)Fit displacement attribute( transform) - Parent element settings: position:relative， - Child element settings: position:absolute; top:50%; left:50%; transform:translate(-50%，-50%)
2. ★★ realize the layout of 'one point' and 'three points' in dice respectively.
Link:
/*One point layout: the principle is to center a single sub element vertically and horizontally, and use the elastic box model (display:flex)*/
Parent element settings: display:flex; justify-content:center; align-items: center
/*Three point layout: the elastic box model (display:flex) is also used, but other attributes need to be used this time*/
Parent element settings: display: flex; justify-content: space-between;
Child element settings: .child:nth-child(2){
align-self: center;
}
.child:nth-child(3){
align-self: flex-end;
}
The three-point layout requires three sub elements. The first sub element here does not need to set the arrangement method. The default is align-self: flex-start
justify-content: space-between; The function of is to make the sub elements produce spacing on both sides in the horizontal direction and evenly distribute the space
align-self: flex-start(default)/center/flex-end; This attribute acts on the parent element setting display:flex On the child element of, you can adjust the position of the child element itself
3. ★★ briefly describe the difference between selector ~ and +.
~ Function of selector:
1.Select the sibling element immediately following the currently eligible element
2.Can match multiple
+ Function of selector:
1.Select the sibling element immediately following the currently eligible element
2.Only one can be matched
Example: <div class="box"></div>
<p class="one"></p>
<span class="two"></span>
<p class="three"></p>
<span class="four"></span>
.box ~ p : Can be selected box All under p Element, both one and three
.box + span : Match selected box The first element that meets the condition under adjacent conditions is two
4. ★★ briefly describe the effective value of box sizing and the corresponding box model rules.
/*box-sizing value*/
box-sizing: content-box/border-box/inherit
box-sizing Property is used to change the default for calculating the width and height of an element CSS Box model, you can use this property to simulate incorrect support CSS The box model specifies the viewer behavior.
**content-box:
1.box-sizing Default properties for
2.yes CSS2.1 The display behavior of the width and height specified in
3.stay CSS The width and height defined in correspond to the content box of the element (that is, the element container itself)
4.stay CSS Draw the inner margin and border of the element outside the width and height defined in (that is, add the inner margin and border on the element container itself, and the width and height of the container need to be calculated automatically
Calculation method of space occupied by container: content(Container width (height)+ margin(Outer margin) + border((border)
**border-box:
1.stay CSS The width and height set by the micro element determine the border value of the element
2.The inner margin and border of the element are drawn within the set width and height
3.CSS The actual width and height of the element content can be obtained by subtracting the border and inner spacing from the width and height set in
Calculation method of space occupied by container: content(Container width (height)+padding(Inner margin)+border((border)
**inherit:
1.Specifies that the element is inherited from the parent container box-sizing Attribute value for
5. ★★★ will the margin of elements in html be superimposed (merged)? How to solve it?
/* Will stack */
Question 1: flex Influence of layout on child elements
1.Of child elements float,clear and vertical-align Properties will be invalidated
2.Solved margin Transfer, overlap (superposition) problem
Question 2: flex Laid out margin There are mainly two kinds of transfer superposition problems
1.Between father and son margin，Passed from child to parent
- resolvent: margin The reason for the transfer is that the height of the parent is not automatically extended, so the attribute is added to the parent: overflow: auto Can be solved
2.Brotherly margin Values are superimposed repeatedly
- Solution: in order to ensure the order of the list, the browser should go up and down margin It produces superposition and cannot be solved directly. Only by reducing one margin The way. If only defined margin-top:100px; margin-bottom:0px. To solve the problem.
6. ★★ briefly describe the difference between align items and align content.
align-items: Can be applied to all flex Container, which is used to set flex Children in each flex The default alignment (relative) on the cross axis of the row Y axis align-content: Only applicable to multiline flex Containers, before use flex Container settings flex-wrap: wrap;Indicates that the child element exceeds the line feed; align-content Its function is when flex Align children as a whole when the container has extra space on the cross axis.
7. ★★ briefly describe the usage of data - * attribute (how to set and obtain), what are the advantages?
data-*definition:
1.Is private custom data used to store pages or applications
2.Give us in all html Embed custom on element data Attribute capability
data-*Usage:
1.Property names should not contain any uppercase letters and should be prefixed "data-" Must be followed by at least one character
2.The property value can be any string
3.An element can have any number of data attribute
4.data Property cannot store the object. If it needs to be stored, it can be serialized through the object
data-*How to set and obtain:
1.How to set
adopt JavaScript Built in setAttribute('data Attribute name','New content')Can be set
Through the of this data type(dataset) API set up data Value, IE10 The above is supported;
var button = document.queryselector('button')
button.dataset.data Attribute name = 'New content' ; there data Property name refers to data-Last name
2.How to get
adopt JavaScript Built in getAttribute('data Attribute name') Available
Through the of this data type(dataset) API set up data Value, IE10 The above is supported;
var button = document.queryselector('button')
data = button.dataset.data Attribute name ; there data Property name refers to data-Last name
data-*Advantages:
1.The user-defined data stored in it can be used by the user of the page JavaScript With, you can create a better user experience
2.Can pass JavaScript To construct data and fill data
3.The code is small and flexible
4.Resolve conflicts between the appearance and usefulness of the site
8. ★ briefly describe the difference between title and h1, b and strong, and i and em.
<title And h1 Differences between:
1. From a website perspective, title More important than website information. title You can directly tell search engines and users what the website is about.
2. From the perspective of the article, h1 Is used to summarize the topic of the article.
3. A website can have more than one title,It's best to use one for a single page title，In order to highlight the main information of the website page, from seo Look, title Weight ratio h1 High applicability ratio h1 Wide.
4. Marked h1 The weight given by the text page will be much higher than other weights in the page. A good website is h1 and title Coexist, both prominent h1 Article theme, but also highlight the website theme and keywords. Achieve the effect of double optimization of the website.
<b And strong Differences between:
1. b It's just a simple bold text, strong It is a semantic label that emphasizes the relevant text
2. b Labels only focus on bold font, strong In contrast, search engines prefer to focus on strong label
3. strong Tags pay more attention to the application of content html In, the key words are indicated. However, some websites also use them strong The tag emphasizes the subheading, but if there are too many subheadings on the page strong Tags may be detrimental to ranking.
<i And em Differences between:
1. i(italic)Is an entity label used to tilt characters, em(emphasis)Is a logical tag that emphasizes the content of the text
2. i Labels are only in italics and have no actual meaning. They are often used to express italics without emphasis or emphasis, such as biological names, terms and loanwords;
3. em Indicates that the characters in the label are important for emphasis. The default format is italic, but you can use CSS Add a style.
Recommendation: in order to comply with CSS3 The specifications of, i Labels should be used as little as possible and should be used instead em
9. ★ what is standard document flow
*** Standard document flow refers to the flow arrangement of elements from left to right and from top to bottom by default. When the front content changes, the position of the back content will also change. *** HTML Is a standard document stream file. To put it simply, various layout attributes are displayed in the html The effect shown in, such as display(Inline and block level elements*very important*),float,position
10. ★ what is z-index? When can the value of position be triggered?
z-index : It refers to the display level of overlapping layers when an element is positioned on the current document page. The default value is 0. There is no limit to the value. The larger the value, the higher the display level Trigger mechanism: when position The value of is set to absolute,relative and fixed Can only be triggered when
11. ★★ how does CSS3 realize fillet?
border-radius attribute
1. Four values: The first value is the upper left corner, the second value is the upper right corner, the third value is the lower right corner, and the fourth value is the lower left corner.
2. Three values: The first value is the upper left corner, The second value is the upper right and lower left corner, and the third value is the lower right corner
3. Two values: The first value is upper left and lower right, and the second value is upper right and lower left
4. One value: the four fillet values are the same
Just use border-radius Fillet can be achieved by setting the four corners to the appropriate size
12. ★★ what cache methods does HTML5 have?
1,localstorege Cache, which stores the data in the local client. The cache can only be cleared manually by the user
API: 1.localstorege.setItem(key,value)，Formal cache of key value pairs
2.localstorege.getItem(key)，Cache values based on key names
3.localstorege.length ，Gets the total number of caches
2,sessionStorege Session caching refers to the process from opening the browser to accessing the page to closing the page, sessionStorege The stored data is destroyed as the page closes
API: 1. sessionStorage.setItem(key,val)，localStorage It is created in the form of key value pairs;
2. sessionStorage.getItem(key)，Obtain the cached value according to the key name;
3. sessionStorage.length；Get the total number of cache values, localStoarge The returned is an object;
3,Offline caching mechanism(Application Cache)
1. to configure manifest Documents, manifest A file is a simple text file that tells the browser what is cached (and what is not cached)
2. manifest The document can be divided into three parts:
1,CACHE MANIFEST - The files listed under this heading will be cached after the first download
2,NETWORK - The files listed under this heading require a connection to the server and will not be cached
3,FALLBACK - The documents listed under this heading specify the fallback page when the page is inaccessible (e.g. page 404)
3. API: 0(UNCACHED) : No cache, that is, there is no application cache related to the page
1(IDLE) : Idle, that is, the application cache is not updated
2 (CHECKING) : Checking, i.e. downloading the description file and checking for updates
3 (DOWNLOADING) : Downloading, that is, the application cache is downloading the resources specified in the description file
4 (UPDATEREADY) : The update is complete and all resources have been downloaded
5 (IDLE) : Obsolete, that is, the description file of the application cache no longer exists, so the page can no longer access the application cache
4,web SQL
1. Relational database, through SQL Statement access
2. Web SQL database API Not at all HTML5 Part of the specification, but it is a separate specification that introduces a set of uses SQL Operation of client database APIs
3. Support: Web SQL The database is available in the latest version Safari, Chrome and Opera Work in the browser.
4. API: 1. openDatabase: This method creates a database object using an existing database or a new database.
2. transaction: This method allows us to control a transaction and perform commit or rollback based on this situation.
3. executeSql: This method is used to perform the actual SQL Query.
5, IndexDB
1.Index database (IndexedDB) API(As HTML5 To create a data intensive offline with rich locally stored data HTML5 Web Applications are useful. At the same time, it also helps to cache data locally and make traditional online Web Applications such as mobile Web Applications) can run and respond faster.
13. ★★ what are the new pseudo classes in CSS3?
Common pseudo classes:
1. :link Select all unreached links
2. :visited Select all visited links
3. :active Select the active link (or understood as the instant effect of mouse click)
4. :hover State after mouse over link
5. :focus The selected element has focus after input
6. :before Insert content before element
7. :after Insert content after element
14. ★ briefly describe the differences between src and href, and between title and alt
href: href Represents a hypertext reference, which is used to establish a link between the current element and the document. It is often used in link and a And other elements.
Note: when the browser parses this sentence, it will recognize the document as css The file will be downloaded and the processing of the current document will not be stopped, so it is recommended to use link Way, not@import load css.
src: src It refers to referencing resources and replacing the current element. It is an indispensable part of page content. It is often used in img，script，iframe Come on. src Point to the location of external resources, and the internal resources will be moved to the location of the current label in the document; request src Resources are downloaded and applied to the current document,for example js Scripts img Pictures, etc. src The address in the link will not have cross domain problems
Note: when the browser parses this sentence, the download and processing of other resources will be suspended until the resource is loaded, compiled and executed. This too js The problem of putting the script at the bottom instead of the head
title:
1. title Attribute is to provide additional annotation information for the element. When the mouse is over the element, there will be title Text display to achieve supplementary instructions or prompts.
2. title Attribute is more inclined to the consideration of user experience.
3. title It can be either an attribute of an element or a label. As an attribute, it can be used in division base,basefont,head,html,meta,param,script and title On any label other than( title Chang Yu form as well as a Tags to provide information about the input format and link target), title And style,id,class Wait together as HTML Standard properties common to many tags in.
alt:
1. alt Property is the alternative text when your picture cannot be displayed. It will be output directly where the picture was originally loaded.
2. alt Attributes are conducive to SEO，It is an important basis for search engines to judge whether pictures and words are related.
3. alt It can only be an attribute of an element and can only be used in img,area and input In label( img,area in alt (must be specified).
Note: when a Label insert img When labeling, what works is img of title Properties.
15. ★ what is CSS hack?
CSS hack: CSS hack Is through CSS Some special symbols are added to the style to allow different browsers to recognize different symbols (there are standards for which browsers recognize which symbols, CSS hack Is to let you remember this standard) in order to achieve the application of different standards CSS The purpose of the style.
Note: CSS attribute Hack,CSS Selector Hack as well as IE conditional comments Hack， Hack Mainly for IE browser.
Example: margin Attribute in ie6 The distance displayed in will be twice as wide as that displayed in other browsers, that is to say margin-left:20px;stay ie6 The actual display distance from the left object in the middle is 40 px，Instead of ie6 The distance from the left object shown in is the set value of 20 px;Therefore, if you want to set the distance between an object and the object on the left, it will be 20 in all browsers px The style of the width of the shall be:.kwstu{margin-left:20px;_margin-left:20px;}
CSS hack There are three common forms:
1. Attribute level Hack: such as IE6 Can recognize underscores“_"And asterisk“*"，IE7 Can identify asterisks“*"，But underscore is not recognized_ "，and firefox Neither of them.
2. Selector level Hack: such as IE6 Can identify*html .class{}，IE7 Can identify*+html .class{}perhaps*:first-child+html .class{}.
3. IE conditional comments Hack: IE Conditional annotation is Microsoft IE5 A non-standard logical statement provided at the beginning. For example, for all IE: <!-[if IE]><!-Your code-><![endif]>，in the light of IE6 And the following versions:<!-[if it IE 7]><!-Your code-><![endif]->，This kind Hack Not only for CSS Effective, it will take effect for all code written in the judgment statement.
PS: Conditional comments are only available in IE It can only be executed under the browser. This code is in non IE Browsing is ignored as a comment. Can pass IE Conditional annotations load different CSS,JS,HTML And server code.
16. ★★ what is graceful degradation and progressive enhancement?
Progressive enhancement progressive enhancement:
1. Build pages for low version browsers to ensure the most basic functions, and then improve and add functions such as effect and interaction for advanced browsers to achieve a better user experience.
2. The view of progressive enhancement holds that we should focus on the content itself. Content is the incentive for us to build a website. Some websites display it, some collect it, some seek, some operate, and some websites even contain the above, but the same thing is that they all involve content. This makes "progressive enhancement" a more reasonable design example. It was also immediately Yahoo! Adopted and used to build its "tiered browser support" (Graded Browser Support)"The reason for the policy.
graceful degradation graceful degradation:
1. Build complete functionality from the beginning, and then be compatible with lower version browsers.
2. The elegant view is that the website should be designed for the most advanced and perfect browsers. The testing work under browsers that are considered "outdated" or lack of functions is arranged at the last stage of the development cycle, and the test object is limited to mainstream browsers (such as IE,Mozilla Etc.).
difference:
1. Elegant degradation starts from the complex status quo and tries to reduce the supply of user experience
2. Progressive enhancement starts with a very basic and functional version and continues to expand to meet the needs of the future environment
3. Degradation (functional attenuation) means looking back; progressive enhancement means looking forward while ensuring that its foundation is in a safe zone
17. ★★★ how to adapt the mobile terminal?
Method 1:@media Media query, which performs different queries by querying the width of the device css Code, and finally achieve the configuration of the interface. Method 2: Flex Elastic layout Method 3: rem + viewport Zoom, screen width setting rem Value, used by all elements that need to be adapted rem Is the unit, and the elements that do not need to be adapted are still used px In.
18. ★★ how to clear the default style in Apple's native browser, such as the default style of button and input?
Clear apple default style: css Add to style input,textarea,button { -webkit-appearance: none; border-radius:0px; border:none;}
input,button Default style: input[type="button"], input[type="submit"], input[type="reset"] {-webkit-appearance: none;}
19. ★ CSS clear floating method.
1. Add an empty block level label at the end of the label, and set the style attribute as: clear: both；Disadvantages: if there are many floating layouts on the page, a lot of space will be added div，It is not conducive to page optimization.
2. Parent definition pseudo class after and zoom，.box:after{display:block; clear:both; content:""; visibility:hidden; height:0;} .box{ zoom: 1 }
3. Simple and crude, parent settings overflow:hidden，The disadvantage is that we can't communicate with each other position Use together
4. Directly set the height of the parent element separately( height)；Disadvantages: it is only suitable for the layout with fixed height. It is necessary to give the exact height if the height and the parent div When it is different, it will cause problems. It will have a great impact on responsive layout.
20. ★★ common layout methods at PC end.
1,utilize float+overflow realization
The width is fixed on the left and right, and the distribution floats to both sides. If overflow processing is not set in the middle, the default width is 100%，After setting, the width of both sides will be intercepted to realize intermediate adaptation
2,flex layout
adopt flex Adjust the layout according to the relevant attributes
3,Table Table layout
4,float+margin Realize three column layout
5,location absolute Realize intermediate adaptation
6,Grid Grid layout
7,Grail layout
8,Dual wing layout
9,Contour layout
21. ★★ the left side of the layout is 20%, the middle is adaptive, and the right side is 200px. Positioning cannot be used.
Layout: <div class="box">
<div class="left">left</div>
<div class="right">right</div>
<div class="content">content</div>
</div>
Style:*,html,body{
margin: 0;
padding: 0;
}
.box{
width: 1500px;
height: 500px;
background-color: rgb(215, 221, 221);
margin: 0 auto;
}
.left{
width: 20%;
height: 200px;
background-color: chocolate;
float: left;
}
.right{
width: 200px;
height: 200px;
float: right;
background-color: cornflowerblue;
}
.content{
overflow: hidden;
height: 400px;
background-color: darkblue;
}
22. ★★ inline elements and block level elements? What is img? How are inline elements converted to block elements?
Inline element: 1.Width and height cannot be set;
2. yes margin Only the left and right settings are valid, and the up and down settings are invalid;
3. padding Up, down, left and right effective; No word wrap
Block level elements: 1.Width and height can be set
2. margin and padding Up, down, left and right are effective for it
3. Lines that exceed the current line will wrap automatically
4. Multiple block element labels are written together, and the default arrangement is from top to bottom
img: Belongs to an inline block element(inline-block),That is, there are attributes of inline elements and attributes of block level elements
The conversion between elements can be done by setting the style: display:block/inline/inline-block To change their element attributes
23. ★★ set multiple elements to the same line? How to clear floating?
Set multiple elements to the same row: 1. float(float) 2.Inline element/Inline block element Clear float: see 19 for details
24. ★ what is CSS3 transform? animation? What's the difference?
transform: 1. transform Attribute applies 2 to the element D Or 3 D transformation. This attribute allows us to rotate, scale, move, or tilt the element.
2. transform Property is a static property and needs to be matched transition and animation To show the animation effect. You can think of it as left,top Like other attributes, it's just a static style.
animation: One css3 The animation properties of need to be matched@keyframes use
Difference: 1. transition yes css Detect the change of specified attributes in the for automatic gap animation.
2. animate It is to specify the key frame attributes in the animation process and the attributes for animation.
25. ★★ what is the difference between nth of type and Nth child?
nth-of-type: Should css A pseudo class is a label that has a set of sibling nodes, use n To filter out the location of a group of sibling nodes.
nth-child: Should css The pseudo class first finds the sibling elements of all the current elements,, use n To filter out the position of the sibling element node of the current element.
In general, nth-of-type It is the second sibling of the current element n One, and nth-child Is the second node of the sibling node of the current element n The current element.
Example:
<p>first</p>
<p>the second</p>
<h1>Third</h1>
<p>Fourth</p>
<p>Fifth</p>
p:nth-child(4){
color: red; //What is selected is the p label of the 'fourth' content
}
p:nth-of-type(4){
color: yellow; //The p tag of the 'fifth' content is selected
}
26. ★★: what is the difference between before and before?
difference:
1. The names are different: one is a pseudo class and the other is a pseudo element
2. Different versions: the functions are the same, but the single colon pseudo class is written in the old version css2 The double colon pseudo element is a new version css3 Writing method
3. Compatibility difference: the compatibility of pseudo class writing with single colon is better than that with double colon. :before > ::before
27. ★★ briefly describe all properties of the viewport
width: control viewport You can specify a value, such as 600, or a special value, such as device-width Is the width of the device, scaled to 100% Timely CSS Pixels). height: and width Correspondingly, specify the height. initial-scale: Initial scaling, that is, when the page is first scaled load Zoom when (adjust page zoom). maximum-scale: The maximum scale that allows the user to zoom to. minimum-scale: The minimum scale that allows the user to zoom to. user-scalable: Can users scale manually
28. ★ how to understand the semantics of HTML structure?
Why semantic:
a. In order not to CSS In this case, the page can also present a good content structure and code structure:In order to look good when running naked;
b. User experience: for example title,alt For labels used to explain nouns or explain picture information, try to fill in meaningful words label Flexible use of labels;
c. advantageous to SEO: Establishing good communication with search engines helps crawlers capture more effective information: crawlers rely on tags to determine the context and the weight of each keyword;
d. Facilitate other devices (such as screen readers, blind readers, mobile devices) to render web pages in a meaningful way;
e. Easy for team development and maintenance, semantic, more readable, follow W3C Standard teams follow this standard, which can reduce differentiation.
What to pay attention to when writing code:
1. Use as few non semantic tags as possible div and span；
2. When the semantics are not obvious, you can use div perhaps p When using, try to use p, because p There is up-down spacing by default, which is beneficial to compatibility with special terminals;
3. Do not use pure style labels, such as: b,font,u Wait, use css set up.
4. Text that needs to be emphasized can be included in strong or em In the label, strong The default style is bold (do not use bold) b)，em It's Italic (don't use it) i)；
5. When using a table, the title should be caption，For meter thead，For main part tbody Surround, tail tfoot surround. The header and general cells shall be separated, and the header shall be used th，Cell use td；
6.Form field to use fieldset Wrap the label and use it legend The label describes the purpose of the form; demo
7.each input The description text corresponding to the label needs to be used label Label, and by input set up id Properties, in lable Set in label for=someld To make the description text and the corresponding input Associated.
8.Add: not only write html When the structure is, the label should be defined and the element should be written css Class names should also follow the semantic principle. Don't just use a name. It's very difficult to read when reconstructing later. The most taboo is that you can't speak English and use Chinese Pinyin instead. Don't do that LOW .
29. ★★ pseudo class selector and pseudo element? What are the pseudo elements introduced in CSS3?
1. The pseudo class selector is css2 Old writing in version, relative to css3 The new writing of pseudo elements in will be more compatible.
2. Pseudo elements can only appear once in a selector and need to be matched content Property
3. Pseudo elements do not appear in DOM So it can't pass js To operate, just add it to the render layer
css3 Introduced pseudo elements:
1, ::after //Insert content after xxx
2, ::before // Insert content before xxx
3, ::first-letter //Select the first letter of the xxx element
4, ::first-line //Select the first line of the xxx element
5, ::selection //Select the element part selected by the user
30. ★★ what are the new features of HTML5 and what elements have been removed? How to deal with the compatibility of HTML5 new tags? How to distinguish between HTML and HTML5?
HTML5 New features:
1, Semantic tags
2, Enhanced form
3, Video and audio
IV Canvas mapping
V SVG mapping
6, Geographic location
7, Drag and drop API
VIII WebWorker
IX WebStorage
X WebSocket
Elements removed:
1,Purely expressive elements: basefont，big，center，font,s，strike，tt，u.
2,Elements that negatively impact availability: frame，frameset，noframes.
handle HTML5 New label compatibility issues: Using html5shiv
Principle: use document.createElement()establish html5 label
Usage: 1. Import on the page html5shiv.js
2,Authoring in styles article,aside,dialog,footer,header,section,footer,nav,figure,menu
{display:block}
How to distinguish HTML and HTML5:
HTML: 1)Identification text( eg: Define title text, paragraph text, list text, predefined text);
2)Establish hyperlinks to facilitate the jump of page links;
3)Create a list to organize the information orderly for easy browsing;
4)Display multimedia information such as "image, sound, video and animation" in the web page to make the web page design more impact;
5)Tables can be made to display large amounts of data;
6)Forms can be made to allow text information to be input in the web page and other user operations to facilitate information interaction;
7)Tags without semantic structure (common naming methods are as follows:, eg: <div id="header"></div>, This statement is used to represent the header of the web site).
HTML5: 1)For painting canvas Elements;
2)For media playback video and audio Elements;
3)Better support for local offline storage;
4)New special content elements( eg: article,footer,header,nav,section Etc.);
5)New form control( eg: calendar,date,time,email,url,search Etc.);
6)It has semantic advantages and provides some new tags( eg: <header> <article> <footer> Semantic tags) are provided, which can better support the reading of search engines and facilitate SEO Spider crawling.
31. ★★ common browser compatibility problems?
1,In different browsers padding and margin Different
Solution: use wildcards(*)take padding and margin Set to 0
2,Block attribute label float After that, there are horizontal margin Value, in IE6 The display will be larger than the setting( IE6 Double margin bug)
Solution: in float Add in label style control display:inline;
3,Set a smaller height label (generally less than 10) px)，stay IE6，IE7，Travel beyond the height you set
Solution: set the label that exceeds the height overflow:hidden;Or set the row height line-height Less than the height you set.
4,Inline label settings display:block;Later adopted float Layout, and then set the horizontal margin Value, in IE6 The display will be larger than the setting( IE6 Double margin bug)
Solution: in display:block;Add after display:inline;display:table;
5,......See the link for more information
32. ★ block level elements? Inline element? Empty element?
Block level elements: 1. The width and height value can be set, and the element size exceeds html The document wraps automatically
2. Both outer and inner margins can be controlled
3. Can accommodate inline elements and other block elements
Inline element: 1. The width and height value cannot be set. The element immediately follows the previous element and will not wrap
2. Width is the width of its text or picture, which cannot be changed;
3. Inline elements can only contain text or other inline elements;
Empty element: 1. Tags without closed tags are called empty tags.
2.Some of the tags we use have closed tags. for example<td>Label, it has a closed label</td>. However, some labels do not have closed labels, such as<br />Tags, which we call empty tags.
33. ★★ media attribute? screen? All? max-width? min-width?
media: Media query
screen : computer screen
All : Default for all devices
max(min)-width : Specifies the width of the target display area
css Merge: @media screen and (min-width:xxxpx) {}
34. ★ name attribute value of meta tag?
Explanation: meta Tagged name Property is used to define a HTML The description and keywords of the document specify the name of metadata and content Property information/Name of the value
Attribute value: 1. application-name //Specifies the name of the Web application that the page represents
2. author //Specifies the name of the author of the page document
example: <meta name="author" content="Author name">
3. description //Specify the description of the page. The search engine will display this description in the search results
example: <meta name="description" content="Page description">
4. gennerator //Specifies a software package for generating documents (not for handwritten pages).
example: <meta name="generator" content="FrontPage 4.0">
5. keywords //Specify a comma separated list of keywords - related pages (tell search engines what the page is related to).
example: <meta name="keywords" content="HTML, meta tag, tag reference"
Tip: always specify keywords (it is necessary for search engines to classify pages).
35. ★★ generally, there are several ways to cut the picture of mobile phone pages
1,DPR: 2 ----- Cut the drawing twice (i.e. the size of the original design drawing, because the design drawing is enlarged twice the size of the original mobile phone) and generally save it as xxx@2x
2,DPR: 3 ----- Cut three times the size of the original design drawing (i.e. 1 times the size of the original design drawing).5 Times, because the design drawing is enlarged twice the size of the original mobile phone) Generally saved as xxx@3x
Precautions for cutaway:
1, Size: must be even
2, Naming: the naming shall conform to the functional block
3, ......See the link for more details
36. ★★ what's the difference between px/em/rem? Why is the font usually set to 62.5% for font size
px(Pixel): the default size calculation unit of the page, absolute length,It is relative to the display screen resolution
Features: 1. IE Those uses cannot be adjusted px Font size in units
2. Most foreign websites can be adjusted because of their use em or rem As font unit;
3. Firefox Can adjust px and em，rem，But 96%Used by more than Chinese netizens IE browser(Or kernel).
em: Relative length, relative to the font size applied to the current element; The default font size for general browsers is 16 px，Then 1 em = 16px
Features: 1. em The value of is not fixed;
2. em Inherits the font size of the parent element.
rem(root em): Relative unit html The unit of font size of the root element, when html of font-size: 16px When, 1 rem = 16px
Features: 1. This unit combines the advantages of relative size and absolute size. It can not only adjust all font sizes proportionally by modifying the root element, but also avoid the chain reaction of layer by layer compound font size.
2. except IE8 And earlier, all browsers support rem.
Why font-size Set to 62.5%: Convenient conversion!
1. Because the default font size of most browsers is 16 px ，And will font-size Set to 62.5% Is equivalent to the font size font-size:10px;
2. Then in other conversion units, such as rem In font conversion, it can be expressed as 1 rem = 10px， Integer values are convenient for unit conversion
3. But in Chrome(Google Chrome) supports a minimum font size of 12 px ，The solution is to html Set root font to font-size: 625%; Meaning: 1 rem = 100px ，Convert in this unit
37. ★★ what is the difference between sass and scss? How to compile sass
Differences: 1 sass Write without braces, scss With braces
Example: sass- .box
color:red
scss- .box{
color:red;
}
2, sass No, ; number , scss have
3, scss Writing and css It's exactly the same
sass compile:
1. sass Is based on Ruby Language, so it is in use sass Language must be installed before Ruby compiler.
2. Sass Languages have two suffixes, namely .sass and .scss ，The two are just a little different.
3. Compilation method:
1,Command line compilation
See the link for details↑
2,Plug in save compilation
See the link for details↑
38. ★★ how to optimize css?
Optimization principle: reduce css Style rendering load time by cutting css Code volume of style and other related operations
Practical optimization:
1,Inline first screen key CSS(Critical CSS): inline CSS It can advance the time when the browser starts page rendering
* There is an important index in performance optimization - effective drawing for the first time( First Meaningful Paint，abbreviation FMP)That is, the first content of the page( primary content)Time on screen
** This indicator affects the waiting time before users see the page, and the inline first screen is the key CSS(Namely Critical CSS，It can be called the first screen key CSS)Can reduce this time.
Note: inline css It is not unlimited, and its initial congestion window 3 is limited( TCP Related concepts, usually 14.6kb， Compressed size), if inline CSS If the file exceeds this limit, the system needs to make more round trips between the server and the browser, which can not advance the page rendering time.
2,Asynchronous loading CSS
* CSS Will block rendering, in CSS The browser will not render any processed content until the file request, download and parsing are completed.
** Sometimes, this blocking is necessary because we don't want to be in need CSS Before loading, the browser starts rendering the page.
*** Then the first screen key CSS After inline, the remaining CSS Blocking rendering of content is not necessary, and external rendering can be used CSS，And load asynchronously
Mode I. use JavaScript Create style sheets dynamically link Element and insert into DOM Yes.
Mode 2: transfer link Elemental media Property to a media type (or media query) that does not match the user's browser, such as media="print"，It can even be a type that doesn't exist at all media="noexist". For browsers, if the style sheet is not applicable to the current media type, its priority will be lowered and downloaded without blocking page rendering.
3,File compression
* Through relevant construction tools css Style is packed and compressed to remove redundant spaces and line breaks. as webpack,rollup,grunt/gulp.js etc.
4,Remove useless CSS
1. Filter to remove related duplicates css style
2. Remove items that cannot or do not take effect in the page css style
Recommended Optimization:
1,Use selectors selectively
2,Reduce the use of expensive attributes
1. When the browser draws the screen, all properties that need to be operated or calculated by the browser need to cost more.
2. When pages are redrawn, they reduce the rendering performance of the browser. So I'm writing CSS We should minimize the use of expensive attributes
* Expensive properties: e.g box-shadow/border-radius/filter/transparency/Pseudo class:nth-child()etc.
3,Optimize rearrangement and redrawing
* Reduce rearrangement
1. Rearrangement will cause the browser to recalculate the entire document and rebuild the rendering tree, which will reduce the rendering speed of the browser. There are many operations that trigger rearrangement, and we should avoid triggering these operations frequently.
** Avoid unnecessary redrawing
1. When the appearance of the element (e.g color，background，visibility Redrawing is triggered when the properties (such as attributes) change.
2. Redrawing is unavoidable in the use of the website. However, the browser has optimized this, and it will combine multiple rearrangements and redraws into one execution.
3. However, we still need to avoid unnecessary redrawing, such as triggered when the page scrolls hover Event, which can be disabled when scrolling hover Event, so that the page will scroll more smoothly.
4,Do not use@import
*** Not recommended@import There are two main reasons.
* First, use@import introduce CSS It will affect the parallel download of the browser. use@import Referenced CSS The file is only the one that references it css After the file is downloaded and parsed, the browser will know that there is another one css You need to download, then download, and then start parsing and building after downloading render tree And a series of operations. This prevents the browser from downloading the required style files in parallel.
** Second, multiple@import It will cause the download order to be disordered. stay IE In,@import It will cause the download order of resource files to be disrupted, that is, they are arranged in@import hinder js File before@import Download, and disrupt or even destroy@import Own parallel download
39. ★★ how to compress and merge css files? How to implement gulp?
How to compress and merge:
** Through relevant construction tools css Style is packed and compressed to remove redundant spaces and line breaks. as webpack,rollup,grunt/gulp.js etc.
gulp How css Compression merge
* See link
40. ★ how to display pictures and words on the same line?
1. to img Label addition“ vertical-align:middle"attribute 2. If it is a background image, pass background To set the location 3. Put the picture and text in different places div In, set“ vertical-align:middle"attribute
41. ★★ a what is the correct setting sequence of active hover link visited in the tag?
a Label setting order:
1. link ， Link status
2. hover ，The style displayed when the mouse is over the link
3. active ，Link pressed style
4. visited ， The status of the link after it has been accessed
42. ★★★ click the picture on the mobile phone for a long time to select the picture. How to deal with it?
img{ pointer-events:none }，Events are prohibited, but the events of the whole tag will be disabled. It is not recommended
img{ -webkit-user-select:none }，User selected status
recommend:
img{
-webkit-touch-callout: none; //touch
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
43. ★ briefly describe several properties and methods of video tag
Properties:
src : Video properties
poster: Video cover, no picture displayed when playing
preload: Preload
autoplay: Auto play
loop: Loop Playback
controls: Browser's own control bar
width: Video width
height: Video height
Method: by video id Get current element
Media.paused; //Pause
Media.defaultPlaybackRate = value;//The default playback speed can be set
Media.playbackRate = value;//Current playback speed, change immediately after setting
Media.played; //Returns the area that has been played, TimeRanges. See the following for this object
Media.seekable; //Returns the TimeRanges of the region that can seek
Media.ended; //End
Media.autoPlay; //Auto play
Media.loop; //Loop play
Media.play(); //play
Media.pause(); //suspend
//Video control
Media.controls;//Is there a default control bar
Media.volume = value; //volume
Media.muted = value; //Mute
44. ★★ how many common video coding formats are there? How many video formats are there?
Common video coding formats, H264 , VP8， AVS, RMVB，WMV，QuickTime(mov) Video formats are MPEG,AVI,nAVI,ASF,MOV,3GP,WMV,DivX,XviD,RM,RMVB,FLV/F4V.
45. ★★ what is the difference between setting the width and height on the label and setting the width and height in style?
stay canvas Set width and height on the label, canvas Changes in the canvas will not affect the canvas content, that is, the canvas content will not change On the contrary, in style Setting the width and height in the style will affect the shape of the canvas content
46. ★ what is border image? What is box sizing?
border-image:
border-image: It literally means border picture, which can be said to be css3 A heavyweight attribute in, belonging to a member of the border; The main function is to define the picture as the border surrounding the element
API: Can be abbreviated
border-image-source， //The path of the picture used in the border.
border-image-slice // Picture border offset inward
border-image-width // Width of picture border
border-image-outset // The amount by which the border image area exceeds the border.
border-image-repeat //Whether the image border should be tiled, rounded, or stretched.
box-sizing: Allows you to define specific elements that match a region in a specific way.
** For example, if you need to place two framed boxes side by side, you can box-sizing Set to "border-box". This causes the browser to render a box with a specified width and height, and put the border and inner margin into the box.
47. ★★ explain the weird box model in ie low version and the weird box model and elastic box model in CSS3.
48. ★★ attributes corresponding to animation.
49. ★★★ talk about your understanding of transition.
50. ★★ canvas how to draw a triangle | square
51. ★★ several ways of CSS clearing floating
52. ★★★★ why initialize CSS style?
53. ★★ explain CSS sprites and how you want to use it on your page or website.
54. ★★ a click the box to find the solution.
55. ★★ if I don't enter <! DOCTYPE HTML >, can HTML5 work?
56. ★★ which browsers support HTML5?
57. ★★★ what are the selectors in CSS3?
58. ★★ what is the use of multi column layout in CSS3?
59. ★★★ does local storage have a life cycle?
60. ★★ what is the difference between local storage and Cookies?
61. ★★ what is WebSQL? Is WebSQL part of the HTML5 specification?
62. ★ what are the similarities and differences between XHTML and HTML?
63. ★★ introduce the box model of CSS? What is the elastic box model?
64. ★★ what is the role of Doctype? What is the difference between standard mode and compatible mode?
65. ★★ what is your understanding of the browser kernel? What are the common browser kernels?
66. ★★ what are the three layers of the front page? What are they? What is the function?
67. ★★★ what are the CSS selectors? How is the priority algorithm calculated?
68. ★★★ what are the advantages and disadvantages of iframe?
69. ★★★ reflow and repaint
70. ★★ handwriting realizes the layout of three barrels of mahjong.
71. ★★★★ what is BFC
72. ★★★★ what are the attributes of flex layout
73. ★★ list the pseudo classes and pseudo elements you know. What is the difference between pseudo classes and pseudo elements?
74. ★★ the essence of rem layout.
75. ★ what is the difference between the div+css layout and the table layout?
76. ★★★★ implementation method of single line or multi line text overflow display ellipsis.
77. ★ what is the difference between display:none and visibility: hidden?
78. ★★ problems caused by floating elements and solutions?
79. ★★ what methods can be used to clear floating?
80. ★★ pointer events: what does none do?
pointer-events: none; Indicates that the element will not respond to {mouse/touch} related events.
Detailed reference: https://segmentfault.com/a/1190000023070286
81. ★★★★★★★ implementation principle of 1px frame common to mobile terminal?
1, Causes:
Why does this problem arise? It is mainly related to one thing. DPR (device pixel ratio) is the ratio of device pixels to CSS pixels when the default zoom is 100%.
window.devicePixelRatio = Physical pixel /CSS pixel
The current mainstream screen DPR=2 (iPhone 8), or 3 (iPhone 8 Plus). Take the 2x screen as an example. The physical pixel of the device needs to achieve 1 pixel, and DPR=2, so the css pixel can only be 0.5. Generally, the design draft is designed according to 750, and the 1px on it is referenced by 750, while we write the css style with the device 375 as the reference, so we should write 0.5px! After trying, we know that iOS 8 + system supports Android The system does not support.
2, Solution:
- WWDC's solution to iOS system
- Use border picture
- Using box shadow
- Use pseudo elements (recommended)
- Set the scale value of the viewport
3, Use pseudo element scheme Code:
1,stylus
.border
width 1rem
height 1rem
margin .2rem
position relative
&::after
content ''
position absolute
z-index 999
left 0
right 0
bottom 0
top 0
border solid 1px #f00
@media (-webkit-max-device-pixel-ratio: 1.49)
transform scale(1)
width 100%
height 100%
@media (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49)
transform scale(0.5)
width 200%
height 200%
@media (-webkit-min-device-pixel-ratio: 2.5)
transform scale(0.3333333)
width 300%
height 300%
transform-origin 0 0
2,sass
@mixin border($border-width: 1px, $border-color: map-get($base, border-color), $border-style: solid, $radius: null) {
// Provide positioning reference for border position
position: relative;
@if $border-width == null {
$border-width: 0;
}
border-radius: $radius;
&::after {
// Used to solve the content covered by border layer
pointer-events: none;
position: absolute;
z-index: 999;
top: 0;
left: 0;
// fix when there are decimals in the element width, the border may not be displayed completely
// overflow: hidden;
content: "\0020";
border-color: $border-color;
border-style: $border-style;
border-width: $border-width;
// Adapt dpr for scaling
@media (-webkit-max-device-pixel-ratio: 1.49) {
width: 100%;
height: 100%;
@if $radius != null {
border-radius: $radius;
}
}
@media (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49) {
width: 200%;
height: 200%;
transform: scale(.5);
@if $radius != null {
border-radius: $radius * 2;
}
}
(-webkit-min-device-pixel-ratio: 2.5) {
width: 300%;
height: 300%;
transform: scale(.3333333);
@if $radius != null {
border-radius: $radius * 3;
}
}
@include transform-origin(0 0);
}
}
Detailed reference: Mobile 1px solution - Nuggets
82. ★★★ how to apply CSS to obtain the DPR of the current device?
83. ★★★★★ how to add iconfont on the page? How do I add font text to a style?
li::before height 1rem content: "\e60d"
84. ★★ how to set the font size of 10px?
b font-size .12rem font-weight 400 transform scale(0.8)
85. ★★★★ how to realize multi line text overflow hiding?
ellipsis($width = 0, $line-clamp = 1) width $width display -webkit-box -webkit-line-clamp $line-clamp -webkit-box-orient vertical overflow hidden
86. ★★★★ how to realize the automatic extension of transverse container?
width max-content
87. ★★★★★ $nextTick usage scenario?
- Better-Scroll
88. ★★★ better scroll rolling condition?
- The height (width) of the container should be less than the height (width) of the content
- The child elements of the container should be unique
- When new bscoll(), there should be content. For example, in Vue, use $nextTick()
89. ★★★★ position: have you used sticky? What effect does it have?
Sticky layout using position:sticky
90. ★★★★★ flex:1 is written completely? What do they mean?
What exactly does flex:1 stand for?
91. ★★★★★ tell me about your understanding of GPU. For example, what elements can trigger GPU hardware acceleration?
-
GPU: graphics processor for processing graphics related tasks and rendering pages
-
Use transform: translatez (0), opacity, and filter in css to enable GPU hardware acceleration.
92. ★★★★ pause and play CSS animation in pure CSS mode
Pause and play CSS animation in pure CSS mode
93. ★★★★ benefits of using CSS3 animation instead of JS animation
Why replace js animation with css animation?
94. ★★★ briefly describe Sass and Less, please explain the difference?