2017 CSS for front-end questions (1)

1.CSS 属性是否区分大小写？

Answer: no distinction. Html,css are not sensitive to capitalization, but for better readability and teamwork are generally lowercase, and in XHTML the element names and attributes must be lowercase.

2.行内(inline)元素 设置margin-top和margin-bottom 是否起作用？padding-top和padding-bottom是否会增加它的高度？

A: Inline elements are also divided into replacement elements (replaced element) and non-replacement elements (non-replaced element).

• Replace element: Refers to an element that is used as a placeholder for other content. such as: IMG, input and other functions;
• Non-replacement element: refers to the element contained in the document, such as: span, etc. does not work;

3.设置p的font-size:10rem，当用户重置或拖曳浏览器窗口时，文本大小是否会也随着变化？

A: REM is a relative unit of measure that is based on the size of the font-size in the HTML root element, and the size of the text does not change with the size of the window.

4.translate()方法能移动一个元素在z轴上的位置？

Answer: No. The translate () method can only change the displacement on the x-axis and the y-axis.

5.only 选择器的作用是？ @media only screen and (max-width: 1024px) {margin: 0;}

A: Stop the rest of the old version of the browser parsing the selector.
Only used to set a specific media type that can be used to exclude browsers that do not support media queries.
In fact, only many times it is used to hide style sheets for devices that do not support media Query but support media Type.
The main features are: Media Queries support device, normal call style, at this time when only does not exist;
For devices that do not support media Queries but support media type, this will not read the style because its first reads only instead of screen;
In addition, the media qqueries browser is not supported, regardless of whether it is supported or not, the style will not be adopted.

6.浏览器CSS匹配顺序

A: Browser CSS matches are not found from left to right, but from right to left.
For example #divbox p span.red{color:red;}, the browser looks in the following order:
Find the span element of all class= ' red ' in HTML first, find out if there is a P element in its parent element, and then determine if there is a DIV element with ID divbox in the parents of P.
If all exist then match on. The benefit of browser lookup from right to left is to filter out extraneous style rules and elements as early as possible.

7.display:none 和visibilty:hidden的区别：

A: Display:none and Visibility:hidden are all features that hide an element on a webpage.
But the difference between the two is that the Visibility:hidden property makes the object invisible, but the space that the object occupies on the page does not change (invisible but can be touched),
is equal to leaving a blank area, and the Display:none ' attribute will make the object disappear (invisible and invisible)

8.请描述 BFC(Block Formatting Context) 及其如何工作。：

A: Floating elements and absolute positioning elements, block-level containers for non-block-level boxes
(e.g. Inline-blocks, table-cells, and Table-captions), and block-level boxes with overflow values not "visiable",
Will create a new BFC (block-level format context) for their content

The conditions that will trigger the BFC are:

• The value of float is not none.
• The value of the overflow is not visible.
• The value of display is Table-cell, table-caption, any of the inline-block.
• The value of position is not relative and static.

Result of Folding:

• When two adjacent margins are positive, the collapsed result is a larger value between them.
• When two adjacent margins are negative, the collapsed result is a larger value of both absolute values.
• Two outer margin a positive and negative, the result of folding is the sum of the two.

9.谈谈样式的优先级

Increase the priority level progressively

1. 0. Element (type) selector (H1) and pseudo element selector (: Before)
2. 1. Class selector (. Demo) Property selector ([type= "Radio"])
3. 2.ID Selector (#demo)
4. inline style

When you use the!important rule on a style declaration, the style declaration overrides any other declarations in the CSS.
Some rules of thumb:

• Never never use!important on a full-site-wide CSS
• Only use!important on specific pages that need to cover entire stations or external CSS (such as referenced ExtJS or YUI)
• Never never use!important in your plugins
• Always optimize to consider using style rules to prioritize to solve problems instead of!important

10.了解过FOUC吗？如何解决FOUC

A: Flash of unstyled Content (FOUC) document style briefly fails
Just add a LINK element to the head element of the document or add a SCRIPT element to prevent Fouc from happening.

LINK Element Solution

Script Element Solution

3 Friends of old Cold
Links: Http://www.jianshu.com/p/3f16baff8cb8
Source: Pinterest
Copyright belongs to the author. Commercial reprint please contact the author for authorization, non-commercial reprint please specify the source.

2017 CSS for front-end questions (1)