Shulou(Shulou.com)06/01 Report--

Editor to share with you what css common problems are, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

1. Can I set padding and margin for the inline element in CSS?

The inline element setting width,height is invalid. But setting margin and padding is valid.

The outer margin of an inline non-replacement element does not change the row height of an element.

Div, form, table, header, aside, section, article, figure, figcaption, h2~h7, nav, p, pre, blockqoute, canvas, ol, ul, dlspan, a, img, label, input, select, textarea, br, i, em, strong, small, button, sub, sup, code

2. What are the values of CSS box-sizing?

Allows you to define specific elements that match an area in a specific way.

Box-sizing: content-box | border-box | inherit

Generally used in adaptive web design, the structure of the web page will not be destroyed by using this property.

Commonly used values:

Content-box,border and padding are not counted in width

Padding-box,padding is calculated into width

Border-box,border and padding are calculated into width, which is actually a weird mode.

Compatibility

-webkit-box-sizing: 100px; / / for ios-safari, android

-moz-box-sizing:100px; / / for ff

Box-sizing:100px; / / for other

3. CSS BFC principle?

BFC (block formatting context) block-level formatting context. Is a html box with left-aligned elements

Definition:

The value of float is not none

The value of position is not static or relative

The value of display is table-cell, table-caption, inline-block, flex, or one of inline-flex

The value of overflow is not visible

Vertical outer margin folding of adjacent block boxes occurs only if they are in the same BFC. If they belong to different BFC, the outer margin between them will not be folded

The role of BFC

1. Clear the internal float

We often encounter this problem in layout: when a child element is floated, the parent element will collapse highly, that is, the height of the parent element becomes 0. To solve this problem, you just need to change the parent element into a BFC. A common approach is to set overflow:hidden for the parent element.

2. Vertical margin merging

In CSS, the outer margins of two adjacent boxes can be combined into a separate outer margin. This way of combining the outer margin is called folding, and the resulting outer margin is called the folded outer margin.

The result of folding:

When two adjacent outer margins are positive, the result of folding is a larger value between them.

When the two adjacent outer margins are negative, the folding result is the larger absolute value of both.

When the two outer margins are positive and negative, the folding result is the sum of the two.

This can also be solved with BFC. The principle has been talked about earlier.

3. Create an adaptive two-column layout

In many websites, we often see such a structure, left picture + right text two-column structure.

Add overflow:hidden to both picture and text styles to make it a block-level formatting context.

3. New features of HTML5 and CSS3?

Html5: semantic tags; enhanced forms; video and audio; canvas;svg drawing; geolocation; drag and drop api;webworker;storage (sessionStorage and localStorage); webSocket

Ten new features of HTML5

Css3:

(1) CSS3 implements fillet (border-radius), shadow (box-shadow), and frame image border-image.

(2) add special effects to text (text-shadow,), force text wrapping (word-wrap), linear gradient (linear-gradient)

(3) rotate, scale, position, tilt: transform:rotate (90deg) scale (0.85, 0.90) translate (0px, Jay, 30px) skew (- 9degmem0deg)

(4) added more CSS selector, multi-background, rgba ()

(5) the only pseudo element introduced in CSS3 is:: selection

(6) Media query (@ media), multi-column layout (flex)

How to clear floats by CSS?

That is, to prevent the element from collapsing.

1. The parent element becomes the BFC block-level formatting context overflow:hidden

Disadvantages: element overflow can not control the display, do not use

2 、 clear: {

Clear:both

}

3. Pseudo elements after and before,clear:both

IE6-7 does not support: after, using zoom:1 to trigger hasLayout

.clearfix: after {

Content: ".

Display: block

Height: 0

Clear: both

Visibility: hidden

} .clearfix {display: inline-block

} / * for IE/Mac * /

In view of the extremely low market share of IE/Mac, we simply ignore it. Finally, the simplified code is as follows:

.clearfix: after {

Content: ".

Display:block

Height:0

Visibility:hidden

Clear:both

}

.clearfix {

* zoom:1

}

1) display:block causes the generated elements to be displayed as block-level elements, occupying the remaining space

2) height:0 avoids the height of generating content that destroys the original layout.

3) visibility:hidden makes the generated content invisible and allows content that may be covered by the generated content to click and interact

4) through content: "." Generate content as the last element, as for whether the point in content or anything else is OK, some versions of content may have empty content, which is not recommended. Firefox will still create additional gaps until 7.0content: "; after inserts the content of content after the element.

5) zoom:1 triggers IE hasLayout.

Through the analysis, it is found that except for the clear:both used to close floats, the other code is nothing more than to hide the content generated by content, which is why other versions of closed floats have font-size:0,line-height:0.

4. How to center left and right vertically with CSS?

Summary of common methods for horizontal and vertical centering of CSS

1. Elements are tightly laid out in the document stream, and you can't use top left to move elements directly, which is easy to cause confusion.

Use the position:relative; element to change the center of the element by not floating in the document stream.

Content {

Margin-top:-50% of height

Position:relative

Top:50%;}

2. Flexible layout flex

Body {

Display: flex

Align-items: center; / * defines the vertical center of the body element * /

Justify-content: center; / * defines the horizontal center of elements in body * /

}

.content {

Width: 300px

Height: 300px

Background: orange

}

3. Set the parent container to display:table

Then set the child element, that is, the element you want to center vertically, to display:table-cell.

However, this is not recommended because it will destroy the overall layout.

What kind of CSS preprocessor have you used?

Talking about CSS preprocessor

At present, the most mainstream CSS preprocessors are LESS, SASS and Stylus.

5. How many CSS pseudo classes are introduced?

Add some special effects of selectors.

The format is: selector: pseudo class

Insert content after after element

Insert content before before element

Empty child elements within the empty element

6. CSS selector priority?

Summary of CSS selector priority in essence post

Id > Class selector > tag selector >

7. What kind of CSS layout have you used?

Holy Grail layout, double wing layout, Flex layout and absolute positioning layout

8. The value and function of CSS display attribute?

The display attribute specifies the type of box that the element should generate.

The commonly used ones are none, inline, block and inline-block. Parting means:

1) none: the element will not be displayed, and the real space for changing the element will not be retained. But there is another visibility: hidden, which preserves the space of the element.

2) inline: the default attribute of display. Displays the element as an inline element without a newline character before and after the element. We know that inline elements cannot set width and height, so once the element's display property is set to inline, setting the properties height and width is useless. The height that affects it at this point is generally the height of the internal elements (font-size) and padding.

3) block: the element will be displayed as a block-level element with a newline character before and after it. Once set to block, the element can set width and height. The element has a single line.

4) inline-block: inline block element. This attribute value combines the features of inline and block, that is, it is both an inline element and can be set to width and height.

9. What is the difference between CSS units rem and em?

Px is a fixed pixel, and once set, it cannot be changed to fit the page size.

Em and rem are more flexible than px. They are relative units of length, meaning that the length is not fixed and is more suitable for responsive layouts.

The difference between em and rem can be summed up in one sentence: em is relative to the parent element and rem is relative to the root element.

10. The difference between standard box model and css box model.

(1) there are two kinds, IE box model and W3C box model.

(2) Box model: content (content), fill (padding), border (margin), border (border)

(3) Division: border and padding are included in the content section of IE

The above is all the content of the article "what are the css FAQs?" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.