CSS Foundation

Time:2021-1-14

1. Differences of standard CSS box model and IE box model

Standard CSS box model: content width does not include padding and border
Ie box model: content width includes padding and border

2. Box sizing property

Used to control how the browser box model is parsed,
Border box indicates that the traditional box model of IE is content width, including content padding border
Content box means to use the standard CSS box model, that is, the content width does not include padding and border

3. Which properties of CSS selector can be inherited

ID selector class selector label selector adjacent selector sub selector iterative selector wildcard selector property selector pseudo class selector
Font size font family color can be inherited
Margin padding width height border cannot be inherited

4. How to calculate the priority rule of CSS

Element selector 1
Class selector 10
ID selector 100
Element label 1000
The style declared by! Important has the highest priority

5. What are the values of display? Explain their role

None hidden element
Inline inline element (default)
Block level elements
Table table display
Inline block inline block element

6. The value of position

Static is displayed as normal document flow by default
Fixed fixed positioning relative to visual window positioning
Absolute positioning is relative to the nearest parent element that is not static
Relative does not deviate from the position of document flow relative to itself

7. What are the new features of CSS3?

RGBA and transparency
fillet
Border picture
Box shadow
Media query provides two sets of CSS styles according to the page width

8. What is the principle of creating a triangle

Set the width and height of the box to 0; then set the border style

    .box {
        width: 0px;
        height: 0px;
        background: transparent;
        border-left: 40px solid transparent;
        border-right: 40px solid transparent;
        border-bottom: 40px solid #ff0000;
        border-top: 0;
    }

9. Common compatibility problems

(1) Different browsers have different default margins and padding
(2) Google will change the value below 12px font to 12px by default
-WebKit text size adjust: none solution
(3) . IE6 double margin problem. When there is a horizontal margin after the block label float, the IE6 margin is larger than the set value. Use display: inline block to convert it into an in line element
(4) You can only get the set custom attribute through getattribute() under Firefox

10. Why initialize CSS style

Because of the compatibility of browsers, different browsers have different default values for some tags. If CSS is not initialized, there will be some subtle differences

eleven display:none Difference from visibility: hidden

Display: none; element hiding does not occupy the position on the page
Visibility: Hidden hidden elements still occupy the corresponding space on the page

12. Why and when do floats need to be cleared? How to clear floats

Floating problems
(1) . the height of the parent element cannot be stretched, which affects the same level of the parent element
(2) . non floating inline elements with floating elements are displayed immediately after
How to clear floats
Contains floating parent element overflow: hidden
Add a label after the last floating element{ clear:both; }

13. After setting the element floating, what is the display value of the element

block

14. How to make chrome support text less than 12px

font-size: 12px;
-webkit-transform:scale(0.8)

15. CSS Sprites

All the pictures involved in a page are included in a large picture, and then the combination of background image, background repeat and background position of CSS is used to locate the background. The use of CSS sprites can reduce the HTTP requests of web pages, thus greatly improving the performance of the page; CSS sprites can reduce the bytes of pictures.

Recommended Today

Kotlin will support wasm-wasm weekly report 1014 with the combination of 64 bit wasm, wasm FAAS, wasm and AI

Editor’s note: first, webassembly has been making great efforts in the fields of serverless and cloud computing. We have seen the application of 64 bit webassembly, serverless based on webassembly, and webassembly in the field of AI. ​ WebAssembly 64 bit webassembly Memory64 of 64 bit webassembly is being implemented step by step! 64 bit […]