First, the priority of CSS selectors is how to calculate?
Browser by priority rules to determine which elements of the style show. Priority indicators identified by four dimensions, we assumed that a, b, c, d named represent the following meanings:
indicating whether to use a inline style (inline style). If you are using, a is 1, and 0 otherwise.
b represents the number of the ID selector.
c represents the number of selectors and the like, and a pseudo class attribute selector and selectors.
d represents the tag (Type) and the pseudo-element selector and the selector.
Priority results are not generated by the above four values of the score, but for each separate comparison value. a, b, c, d weights from left to right, gradually decreases. Is determined priority, from left to right, one by one comparison, a maximum value until the comparison, to stop. So, if the value of b is different, c and d no matter how big, it will not affect the results. Such as 0,1,0,0 higher priority than 0,0,10,10.
When equal priority occurs, the latest style rules appear will be adopted. If you write the same rules in the style sheet (either in the document or other internal style file), then the last occurrence (at the bottom of the file) style of a higher priority, and therefore it will be adopted.
When writing style, I would use a lower priority, so these styles can be easily overwritten. Especially when writing UI component is more important, so that the user does not need to by very complex priority rules or using! Important way to cover components of the style.
Second, what is reset (resetting) CSS and standardization (normalizing) the difference is CSS? Which way would you choose and why?
Reset (Resetting): Reset meant to remove all the browser's default style. For all elements of the page, such as margin, padding, font-size set to the same as all of these styles. You will have to redefine the style of the various elements.
Standardization (Normalizing): standardization not removed all of the default styles, but remains a useful part, but also to correct some common mistakes.
When pages need to achieve a very personalized design, I would choose to reset the way, because I write a lot of custom styles to meet the design requirements, this time there is no need standardization of the default style.
Third, please elaborate works Float positioning.
Float (float) is positioned CSS properties. Floating elements removed from the normal flow of the page, but remain part of the liquidity will affect the positioning of other elements (such as text will float around an element). This is the absolute positioning different, absolutely positioned elements are completely removed from the document flow.
Clear properties by using the CSS left, right, both, so that downward movement of the element (clear float) below the floating element.
If the parent element contains only the floating element, the height of the parent element will collapse to zero. We can turn off floating between the front to fix the problem from the floating element to the parent element by clearing (clear).
There is a hack approach, a custom class .clearfix, using pseudo-element selector :: after clear float. There are other methods, such as adding empty
And float setting overflow property of the parent element. And these methods are different, clearfix method, just give the parent element to a class is defined as follows:
.clearfix After :: {
Content: '';
the display: Block;
Clear: both;
}
is worth mentioning that, the parent element attributes to overflow: auto or overflow: hidden, so that it will form the interior of the sub-element block formatting context (block formatting context), and will expand their parent element, it can surround its children.
Fourth, the z-index attribute Please describe and explain how to laminate context (stacking context).
Vertical stacking order of z-index attribute CSS control elements overlap. z-index value is not only influence the static element position.
Z-index value of the order is not defined, they appear in the elements of the DOM stack (the lower the level, the more the position on the emergence). Non-static positioning element (and its children) will always override the static positioning element (static), and regardless of the HTML hierarchy.
Element contains a set of context is laminated layers. In the context of a plurality of laminated, z-index value which is a sub-element with respect to the parent element instead of the document root setting. Each of the stack is completely independent of the context of its siblings. If element B is located above the element A, even if the C sub-elements of the element A has a higher ratio of the element B z-index values, elements C can never element B above.
Each context laminate is self-contained: when the occurrence of content elements are stacked, the whole element will be laminated sequentially laminated in the parent context. CSS property triggers a few new context laminate, e.g. opacity less than 1, filter is not none, transform than none.
V. Please elaborate block formatting context (Block Formatting Context) and how it works.
Block format context (the BFC) is a visual CSS rendering portions of the Web page, the layout is an area block level occurs cartridge, the element is floating regions interact with other elements.
A HTML box (Box) satisfies any of the following one, creates block formatting context:
float value is not none.
position is not static values or relative.
value display is a table-cell, table-caption, inline-block, flex, or inline-flex.
overflow value is not visible.
In BFC, the left edge of the left outer edge of each box are included in the block in contact therewith.
Two adjacent cassette block level margin in the vertical direction can occur combined (collapse). More please refer to the combined margin (margin collapsing).
Six, which remove floating techniques, which are applicable?
Empty div method:
.
Clearfix Methods: .clearfix class already mentioned above.
overflow: auto or overflow: hidden Method: already mentioned.
In large projects, I will use Clearfix method, .clearfix where needed. Setting overflow: hidden sub-element approach may make it appear incomplete, when the height of the sub-element is greater than when the parent element.
Seven, please explain what is Sprite diagram (css sprites), and how?
Sprite figure is integrated into the multiple pictures on a picture. It is the use of icons used on many small sites in a number of (Gmail use). Implementation:
Using generators multiple pictures packed into a Sprite map, and suitable for generating CSS.
Each image has a corresponding CSS class that defines the background-image, background-position and background-size property.
When using pictures, add the appropriate class to your element.
benefit:
Reduce the load of multiple images HTTP requests (a Sprite diagram requires only one request). But for HTTP2, load multiple images is no longer a problem.
Advance load resources, when needed to prevent problems caused to start the download, for example, only appears in: hover pseudo-class pictures without flicker.
Eight, how to solve the compatibility problems styles different browsers?
After determining the cause of the problem and the problem browser, using a separate style sheet, the only problem with the browser loads. This method requires the use of server-side rendering.
Use has to deal with such issues libraries, such as Bootstrap.
Use autoprefixer automatically generate CSS attribute prefix.
Use Reset CSS or Normalize.css.
How to provide a page for the limited functionality of the browser? What kind of techniques and processes?
Degrades gracefully: to build a modern browser application, while ensuring that it functions properly in older browsers.
Progressive enhancement - The practice of building an application for a base level of user experience, but adding functional enhancements when a browser supports it.
Progressive Enhancement: but added when the browser supports building applications based on user experience new features.
Use caniuse.com checking feature support.
Use autoprefixer automatically generate CSS attribute prefix.
Use Modernizr for feature detection.
What are the different ways to hide content (it applies only to screen readers)?
These methods and accessibility (a11y) related.
visibility: hidden: the element remains in the page flow, and take up space.
width: 0; height: 0: the element does not take up any space on the screen, resulting in does not show it.
position: absolute; left: -99999px: it will be placed outside the screen.
text-indent: -9999px: This only applies to block elements of the text.
Metadata: for example, by using http: //Schema.org,RDF and JSON-LD.
WAI-ARIA: how to increase the web page accessibility W3C technical specifications.
Even WAI-ARIA is an ideal solution, I will be using absolute positioning method, because it has the fewest cautions apply to most elements, but also very simple to use.
Nine, in addition to screen, you can say the example of a @media attribute it?
all
apply to all devices.
print
To load the appropriate documents to the visible window currently in use. advance consultation paged media (media screen size) to meet the individual device does not match the page size and other issues.
screen
primarily for color computer screens
speech
parsing the speech synthesizer Note:. CSS2 already had a similar media type called aural.
X. Writing Efficient CSS should pay attention to what?
First, the browser selector from the far right, that is the key selector (key selector), turn left to match. The key selection, the browser from the DOM the filter element, and then traverse the parent element of the selected element upwardly, determines whether a match. Select match shorter sentence chain, matching the speed of the browser faster. Avoid using labels and universal selector as a key selector, because they match a large number of elements, the browser has to be a lot of work to judge the elements of the parent element whether they match.
BEM (Block Element Modifier) methodology recommends that everything has a single class, and, where you need hierarchy, that gets baked into the name of the class as well, this naturally makes the selector efficient and easy to override. BEM (Block Element Modifier ) proposal in principle as a separate CSS class name, and if necessary a hierarchical relationship, the relationship is also reflected in the nomenclature, which naturally makes selector efficient and easy coverage.
Find out which CSS properties will trigger re-layout (reflow), redraw (repaint) and synthetic (compositing). When writing style, avoid triggering possible to re-layout.
XI, advantages and disadvantages of using CSS are pretreated what is?
advantage:
CSS to improve maintainability.
Easy to write nested selector.
Introduce Variable, adding the theme function. Files can be shared theme in different projects.
CSS generate duplicate by mixing (Mixins).
Splitting your code into multiple files. CSS files can be split up too but doing so will require a HTTP request to download each CSS file.
The code is split into multiple files. Without pretreatment, CSS, although may be divided into multiple files, but the need to create a plurality of HTTP requests to load the files.
Disadvantages:
Require pre-treatment tool.
Recompilation time may be slow.
For you have used the CSS pretreatment, talk like and do not like the place?
like:
Most of the problems and advantages mentioned.
Less implemented in JavaScript, high degree of integration with NodeJS.
Dislikes:
I use Sass by node-sass, it's written in C ++ LibSass binding. When Node version switch, I often have to recompile.
Less, the variable name prefixed with @, easily confused with CSS keywords, such as @ media, @ import and @ font-face.
How to implement a non-standard font to use web design?
Using the @ font-face and define a different font-family font-weight.
Explain how the browser determines which elements CSS selector match.
This section above on Writing Efficient CSS related. The key selector browser, the browser screened from the rightmost selector (selector key) from the DOM the element, and then traverse up the parent element of the selected element, it determines whether a match. Select match shorter sentence chain, matching the speed of the browser faster.
For example, the form p span selector, the browser first find all the elements and its parent element traversed until the root element to find
element. For certain, just find a
, You know 'and `have been matched to discontinue match.
XII described pseudo-elements and their use.
CSS pseudo-elements are added to the selector keyword, to choose a particular part of the element. They can be used for decoration (: first-line,: first-letter) or add elements to the tag (with content: ... combinations thereof), without modifying the tag (: before,: after).
: first-line and: first-letter can be used to modify the text.
.Clearfix method mentioned above, the use of clear: both no space to add elements.
Use: before and after the show triangular arrow tips. Encourage separation of concerns, because the triangle is considered part of the style, not the true DOM. With no additional HTML elements, using only CSS style drawing triangle is unlikely.
reference
XIII, talk about your understanding of the box model, and how to tell the browser to use a different rendering of the box model layout.
CSS box model describes the rectangular frame elements in the document tree to be generated, and according to the layout pattern layout. Each box has a content area (e.g., text, image, etc.) and optional surrounding padding, border, and margin areas.
CSS box model is responsible for calculating:
How much space is occupied block-level elements.
Border overlaps, margins, whether the merger.
The size of the box.
Box model has the following rules:
The size of the block elements is determined by width, height, padding, border and margin.
If not specified height, the height of the block-level element is equal to the contents of sub-elements comprising a height plus padding (unless the floating elements, see below).
If not specified width, the non-floating block-level element width equal to the width of the parent element of the parent element minus the padding.
The element height by the height of the content is calculated.
Element width is calculated by the width of the content.
By default, the components of padding and border is not an element of width and height.
reference
Fourteen, ** {box-sizing: border-box;} will have what effect? **
Elements of the default application of box-sizing: content-box, width and height of the elements will determine the size of the content (content) of.
box-sizing: border-box to change the width and height calculated as the element, border and padding size will be counted.
Padding + border width = vertical height of the element contents (content) + height of vertical
padding + = horizontal width of the element contents (content) in the horizontal direction + the width direction of the width of border
attribute value display what are?
none, Block, inline, inline-block, the Table, the Table-Row, the Table-the Cell,. List-Item
inline and inline-block What is the difference?
I put the block joined them, in order to obtain a better comparison.
relative, fixed, absolute and static four kinds of positioning What is the difference?
After positioning elements which position the attribute value must be relative, absolute, fixed or sticky.
static: default targeting property values. This keyword specifies the elements using normal layout behavior that elements of the current position in the document layout regular stream. At this time, top, right, bottom, left, and z-index attribute is invalid.
relative: this key element placed in the first position when the positioning is not added, again without changing the premise of the page layout adjustment element position (location thus left blank when this element is not added positioning).
absolute: no space reserved for the element, the element by specifying the offset relative to the nearest ancestor elements positioned non-static, determining the position of the element. Absolutely positioned elements can set the margins (margins), and will not be merged with other margins.
fixed: Do not reserve space for elements but viewport relative to the screen (the viewport) to specify the position of the element specified by the element. Position of the element does not change when the screen scrolling. When printed, each page element will appear in a fixed position. fixed property will be stacked to create a new context. When the transform property of the non-ancestor element none, to the container by a viewport ancestor.
sticky: flow calculation according to a normal position of the cartridge (which is referred to as normal flow position), and then with respect to the elements in the stream flow root (BFC) and containing block (block-level nearest ancestor element) is positioned. In all cases (even when the element is positioned as a table), the positioning element not affect subsequent elements. When the element B is positioned viscous, still in accordance with the position of the subsequent element position when B is not positioned is determined. position: sticky effect of position table element: same relative.
Fifth, what you have used the existing CSS framework? How do you improve them?
Bootstrap: slow update cycle. Bootstrap 4 is already in alpha version for almost two years. Add a spinner assemblies are widely used in the page.
Semantic UI: the source structure that is difficult to understand custom theme. Unconventional theme system experience is poor. External library path required hard-coded (hard code) configuration. Variable value reassignments, no Bootstrap well designed.
Bulma: we need a lot of class and non-semantic mark, made redundant. Not backward compatible, so that after the upgrade version, it will disrupt the normal operation of the application.
You understand and CSS Flex Grid do?
Flex is mainly used for the unidimensional, while the Grid is a two-dimensional layout.
Sixteen, Flex
flex shaft vessel there are two, horizontal and vertical, each container unit is called flex item.
You may be provided on the container six attributes: flex-direction flex-wrap flex-flow justify-content align-items align-content
Note: When the set flex layout, float subelements, clear, vertical-align attribute will fail.
Flex project properties
There are six attributes may be used in the program item: 1. order 2. flex-basis 3. flex-grow 4. flex-shrink 5. flex 6. align-self
Seventeen, Grid
CSS grid layout for the page is divided into several major areas, or to define the relationship between the size, the position and the internal layers between the component elements.
Like the table, like a grid layout allows us to align rows or columns of elements. However, it may still use CSS grid layout more easily than CSS form. For example, the sub-element mesh container can position themselves so they like element CSS positioning, real overlap and levels.
Responsive design and adaptive design What is the difference?
Adaptive response to design and are designed to enhance the user experience between different target devices to optimize the parameters adjusted according to the window size, resolution, and environment control method and the like.
Adaptive responsive design principle: With a website should be the code, have a good effect on the display and use a variety of devices. Responsive Web site by using media queries, responsive and adaptive grid pictures vary based on a variety of factors to create a good user experience. Like a ball through expansion and contraction to accommodate different sizes of the ring.
Adaptive designed like a modern interpretation of progressive enhancement. And in response to a single design to be adapted to different designs of adaptive equipment and other features by detecting, from a series of already defined window size and other characteristics, features and select the most appropriate layout. Using a ball to pass through a variety of different basket, a plurality of adaptive design allows the use of balls, and then depending on the size of the basket, to choose the most appropriate one.
Eight, you have not used the retina resolution graphics? Among what technology?
I tend to use higher resolution graphics (twice the size of the display) to deal with the retina display. A better approach is to use media queries, as @media only screen and (min-device-pixel-ratio: 2) {...}, and then change the background-image.
For graphical icons and the like, I would use as much as possible svg fonts and icons, as they are in any resolution, can be rendered very clear.
Another method is, after checking the value of window.devicePixelRatio using JavaScript to modify the src attribute, and replace it with a higher resolution version.
Ninth, under what circumstances, with the translate () instead of absolute positioning? When the opposite is true.
translate () is a value of the transform. Transform or change the opacity does not trigger the browser re-layout (reflow) or redrawn (repaint), only trigger complex (compositions). The change absolute positioning will trigger re-layout and then redrawing trigger and complex. transform the browser to create a GPU layer for the element, but the change will use absolute positioning to the CPU. Thus translate () is more efficient and can shorten the drawing time smooth animation.
When using translate (), an element still occupies its original space (a bit like position: relative), which is to change the absolute positioning different.
XX, inline elements, block-level elements differences
Inline elements: and other elements on one line height, line height, and margin and padding are not changed, the width of the immutable image of the text, only the text or other inline receiving elements; wherein the element row is img
Block-level elements: always start on a new line height, line height and padding, and margin control can be restrained and other elements housed; line elements into block-level elements manner: display: block;
While the width of fixed width adaptive side
You can use flex layout copy the following HTML and CSS code to open the browser can see the effect
{.Wrap
the display: Flex;
The justify-Content: Space-BETWEEN;
}
.div1 {
min-width: 200px;
}
.div2 {
width: 100%;
background: # E6E6E6;
}
HTML,
body,
div {
height: 100% ;
margin: 0;
}
horizontally and vertically centered manner
flex
// 父容器
display: flex;
justify-content: center;
align-items: center;
position
// parent container
position: relative;
// 子容器
position:absolute;
margin:auto;
top:0;
bottom:0;
left:0;
right:0;
position+transform
// parent container
position: relative;
// 子容器
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
table-cell
html, body {
height: 100%;
width: 100%;
margin: 0;
}
.box {
display: table;
height: 100%;
width: 100%;
}
.content {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.inner {
background-color: #000;
display: inline-block;
width: 200px;
height: 200px;
}
display:none、visibile:hidden、opacity:0的区别
| | Whether to hide | whether space in the document | whether it will trigger events | | - | - | - | - | | display: none | Yes | No | No | | visibile: hidden | Yes | Yes | No | | opacity : 0 | a | is | a |
XXI difference in CSS @import and link the
link belong HTML tags, and CSS @import is provided
when the page is loaded, link will also be loaded, and references @import CSS will wait until the page has finished loading before loading the
import to recognize only in IE5 or more, while link is HTML label, no compatibility
link right way of style heavy weights above the right @import
XXII, how to achieve waterfall layout with css
Use column-count and break-inside two CSS3 properties
Xxiii, the excess text display ellipsis
single line
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
多行
Run the display: -webkit-Box;
-webkit-Box-Orient: Vertical Number of;
-webkit-Line-CLAMP: 3; // display a few lines of up to
overflow: hidden;
XXIV use of pseudo-elements painted triangle
.info-tab {
position: relative;
}
.info-tab::after {
content: ‘’;
border: 4px solid transparent;
border-top-color: #2c8ac2;
position: absolute;
top: 0;
}
XXV, known aspect parent box, img width and height of the child is unknown, let img box covered with a parent and can not be deformed picture
We need to use the object-fit css property
div {
width: 200px;
height: 200px;
}
img {
object-fit: cover;
width: 100%;
height: 100%;
}
Twenty-six, iframe role
iframe third party is used to insert a page in the page, the page using iframe earlier primarily used for navigation such many pages are part of the same, so that when switching to avoid duplicates page.
Advantages 1. easy to modify, simulate separation, as some of the information management system will be used. 2. But now basically not recommended. Unless special needs, it is generally not recommended.
1. iframe create disadvantages of slower than the average DOM element of 1-2 orders of magnitude 2. Load iframe tag will block the page if the page onload event does not trigger a timely manner, will let users feel very slow page loads, the user experience is not well, you can dynamically set by js iframe src attribute in Safari and Chrome, to avoid blocking. 3. iframe for SEO friendly, alternative mechanisms for dynamic languages in general is Incude and ajax dynamically populate content.
Xxvii, what is css hack
Because different browsers such as Internet Explorer 6, Internet Explorer 7, Mozilla Firefox and other analytical understanding of CSS is not the same, thus causing the resulting effect is not the same page, not the page results we need.
This time we need to write different CSS for different browsers, it can be compatible with different browsers, the page can also get the effect we want in different browsers.
This process is different for different browsers write CSS code, called CSS hack, also called write CSS hack.
Xxviii, what is the difference between transition and animation
transition
state elements can be achieved within a certain period of time for the final transition state for simulation in a transition animation effects, but limited function, only for the production of simple animation effects and animation property
animation
can create Flash-like animation, by keyframe control every step of the animation, more precise control, so you can make more complex animations.
XXIX what's margins merger
The combined margins means that when two vertical margins meet, they will form a margins.
The combined height equal to the margins of the larger of the two combined height of the outer margin of the occurrence.
Thirty, inline-block method for removing inter-element spacing
Remove spaces
using negative margin
using size-font: 0
Letter-spacing
Word-spacing
