All of you are tired after the end of the weekend. Let's take a look at the interview questions in the cold winter)

Preface

Although I have a very good CSS level, water is not a good reason.

In the recent winter, the eldest brother gave me a bit of "cool" for the interview. Let's take a look at what his Weibo says?

Normal flow, containing block, bfc, margin collapse, base line, writing mode, bidi,
As a result, the first question (I really only asked what values and actions of position) is a tragedy ......

• The common values of position attributes include static, relative, absolute, and their basic behaviors. This includes the positioning origin of relative and absolute.
• The old version of fixed is not supported by IE, but an engineer who is enthusiastic about the technology should also understand it.
• Some research engineers can know that the containing block Calculation Method of absolute is different from that of normal streams. Of course, if you have not read the standard, the expression is not necessarily like this.
• Engineers who have in-depth research on CSS layout will know the overlapping behavior of position, display, margin collapse, overflow, and float.

To tell the truth, if you are asked this question in a good state, I can still talk to him (very light). In a normal state, I guess I have a direct tragedy. Why?

The answer is without a doubt that my CSS level is very watery. When there is not enough project experience, reading books cannot remember some things, so project practice is still required.

So with my pride in water, I tried how deep the water was, and half of the people would be wiped out.

Thinking process

If we simply put forward several attributes of position, there is no problem, but let's look at its divergence:

Normal flow)

Containing block (including block)

Bfc (I realized that I must have met him, but I forgot to do everything !)

Margin collapse (I don't know. Should it be the element collapse caused by float ?)

Base line (baseline alignment)

......

I'm not impressed at the end. I want to say, can we speak Chinese... At least give me some explanations. It is very difficult for css cainiao to look at the questions .... (Cover your face and cry)

Marvel

After carefully reading the question and analyzing it, you will find that it is very deep. This question may end in five minutes. If it is slow, you can ask for a question for half an hour, and after the question is completed, CSS is negligible...

Why?

① Position is mainly used for page layout. A friend familiar with css layout can use his layout well, and even abandon the float devil (I did an interview question yesterday and didn't use float layout, because float itself is not used for layout, I don't know if it is used for layout, But I think since float should not be used for layout, We Should subconsciously use it less ).

② In the process of its divergence, the block-level element and the line element are mentioned, and even subdivided into the vertical alignment of the line element, which is more likely to scatter to the line-height, not too deep!

③ All of the above can be done well, and then this question can be detailed in a variety of application details, such as in IE7, what will happen when the browser uses the relative z-index, for example, do you use float in layout? Why does float cause element collapse? How do you solve the element collapse ......

......

Then, his question was actually very divergent. For me, I could not understand it, so I could only explain it in my own understanding, let's get started!

Basic visual formatting

If it cannot be achieved overnight, let's take a step by step. First, let's get to know the basic things.

When we use CSS, we will find many "weird" phenomena. If we master how the visual presentation model in CSS works, will it be closer to the truth?

Basic box

CSS assumes that each element has a basic box. This rectangular box is what we call an element box (it is not impossible to show a circle or a group prototype in CSS3)

Each element box has a content area in the center. The content area has the following attributes: padding, margin, and border. :

 

Contained block

Because each element is placed relative to other contained blocks, the contained block is the "layout context" of an element ",

Xiao Chai ye, a swordsman

In this example, the inclusion block of p is div (the inclusion block is assumed by the nearest block-level element). Therefore, the p element depends on the div layout, and the div depends on the body, it does not matter if the element in the row is placed in the contained block.

Block-level elements

Block-level elements are overbearing, and a row is exclusive as its own kingdom, generally, the width of an element is defined as the distance from the padding to the right padding (IE6 has an incorrect explanation of the Box Model ). Margin, padding, width, and height can determine the document layout.

In most cases, we are not very concerned about the document height and width. Generally, the width will be full of browsers and the height will be extended by ourselves.

Horizontal formatting

Originally, the width of the p element is 200, but because of the padding problem, the width is changed to 220, and the outer margin is extended by 40, so the entire width is 260, so it is implicitlyAdded the value of width!
However, its right margin is not 20, because CSS also has a rule :.

So we need to center an element and set it like this.

When the width is determined, the value of the outer margin and the right margin will be set to an equal value (IE6 ignores this and sets it to 0 ).

Negative margin

Because margin can be set to a negative value, the overall situation will become more complex, because according to our above rules, width may exceed its inclusion block !!!

Therefore, when we operate the negative margin, we actually increase the height and width. If the height and width are determined, other attributes are added over there, which leads to the illusion of Moving Elements.

Vertical formatting

The height of a block-level element is determined by its content by default. We can set the height for the element display. However, the element box will not be automatically added.

Vertical center

When auto is set horizontally, the same value is obtained. In vertical conditions, the margin of the element box is lost (the positioning element is different ).

Outer margin merge

We all know that the top and bottom margins will be merged, but there are some situations that will make things more complicated:

If we change the code a bit: "remove the outer element border ..

His merge method completely dumb me .....

Line Element

The layout of intra-row elements is more complex than that of block-level elements. We use block-level element layout, so we will pay more attention to it. However, we often ignore the layout of intra-row elements, which will lead to losses... Let's look at an example:

There are many differences between in-row elements and block-level element tables. The above is just the beginning. Let's begin with a pair. What are the elements in the row:

So there are a lot of things in the industry...

In-row formatting

All elements have a line-height attribute. This value will significantly affect the display of elements in the row. The Row height is determined by its composition element and other content (such as text) height.

Note: line-height actually only affects row elements and other row content, but does not affect block-level elements (at least not directly)

Create box

First, for the Row Element, font-size determines the height of the content area. If the font-size of an element is 15px, the height of the content area is 15px, because the em boxes of all elements are 15px.

If the font-size of an element in a row is 15px, the line-height is 21px, and the 6 PX difference is the row spacing, the line frame is formed:

However, there is another scenario that will make the entire development confusing:

Xiao Chai ye, a swordsman

For anonymous text, the content height remains unchanged and the semi-spacing is 0. For span, the semi-spacing we get after line-height minus font-size is-6, as a result, the line box is still 12px, but the content area is large.

Vertical-align

The margin method cannot be vertical alignment, and the line element provides the vertical-align attribute:

Additional knowledge (http://www.zhangxinxu.com)

Floating and positioning

Reference: http://www.zhangxinxu.com/

After the above knowledge, we know that all document elements have a box! It describes the space occupied by an element in the document layout. Therefore, frames and frames affect each other.

Next we will go to the focus of this article, floating and positioning. In the current layout, to put it bluntly, it is floating and positioning, so they have mastered the layout.

Floating float

Float is a strange stuff. He first proposed to let the image float so that the text can be written around the image ,!

So let's take a look at what float, a loving and hateful guy, has done ???

The floating element will be deleted from the normal stream of the document in Mo mode. Does it affect the document layout?

Where does floating actually mean? The answer to this question is simple. If CSS does not have a float attribute, what will it look like.
We will find that we can use other CSS attributes (excluding table) to implement the Floating Method, whether in the column layout or list arrangement,
The only thing that cannot be achieved is "text surround image". I cannot figure out how to display text surround images. Well, this cannot be replaced by the true significance of float-Zhang xinxu

Taking a look at the above arguments, this is very meaningful. Let's look back at it. It seems that this is indeed the case. float has actually done a lot of things that shouldn't be done, that's why there are so many inexplicable bugs in our layout.

Float details

Before learning more about it, let's take a look at the containing block. The floating element's contained block is the closest block-level ancestor element:

The img inclusion block is the nearest p tag, and then the floating element will generate a block-level box (the inline element will also ), in fact, we can think that float is an inline-block () without directionality ().

The placement of floating elements has many rules.

I don't want to write any rules here. To be honest, I don't want to use this attribute when I look at the first images of so many rules...

Float we are all "relatively" familiar with it, so we generally have a good grasp of its performance, because we think it is actually an inline-block with a direction, so let's take a look at the destructive nature of floating.

Inline boxes

The line element will generate something called the line box. We already know

In containing boxes, inline boxes constitute line boxs (row boxes), which is the key box type that floating affects the layout.

Content area is a box invisible to text, and the size is font-size.

There are two interesting pictures in the blog of Dr. Zhang xinxu. I will take a look at them here.

According to the research in this figure, the following results are obtained:

When the inline boxes feature is lost, the image cannot be associated with the inline boxes text. They are no longer a family member ..
The image is standing by (float brings the element a downgrade)
In CSS, all heights are produced by the CSS model: box model, line box model (line-height), and inline boxes is directly controlled by line-height.
The real height is line boxes composed of inline boxes of each line, while line boxes of each line are vertically stacked to form the height of the containing box
Therefore, without inline boxes, it means that without height, it is reasonable to have no birds with men. Float just does this .... The inline boxes of other people are directly involved, removing others' heights.

Therefore, float allows the text to be centered around the image, because the image has no height, but it has a width. If the element has no height, it will lead to another fact :! We can imagine that the block-level elements have no height. It is very reasonable for them to collapse! So we will do a lot of things to clear the height collapse caused by floating. So we can try to use float as little as possible in a group layout, so let him do his essential work, because there are not many people who want to be eunuch...

Position debut

Finally, the title of the main character finally appeared. I did not really want to say anything here, nor did I come to the conclusion .... This is the last step!

What are the attributes of position? I admit it's a bit of an idiot.

In fact, for position, his things are very simple. They are used to operate block-level elements in just a few scenarios. So let's take a look at the questions raised at the beginning of this article.

① Positioning origin of relative and absolute, without any picture or truth. To solve this problem, let's write an example.

Xiao Chai ye, a swordsman

We can see that if left and top are not specified, the layout is based on the general stream by default .!

Absolute's positioning element has no influence on him by default, but we can see that it will actually overwrite his location, in fact, it is not covering his position. It means that his origin is there, but he just has no height like the float element, and even the width is gone...

② The fixed attribute in IE6 has not been processed yet, but it should be controlled by js. It has an effect problem, and it will definitely shake.

However, after data query, we found that CSS can also be used in IE6.

Solution:

1. add _ background-attachment: fixed; _ background-image: url (about: blank) to the body element. The two attributes are only under the shameful IE6 attribute, therefore, write an hack for IE6.

2. add _ position: absolute; _ top: expression (offsetParent. scrollTop); _ left: expression (offsetParent. scrollLeft); these three attributes.

3. _ top: expression (offsetParent. scrollTop) + 50); in this way, the subsequent number is the distance you need to set.

I personally think this question is of little significance, because my recent company has directly abandoned IE8. What's more, IE6 cannot be very cool for Chinese masters...

PS: the shameful thing is that in this case, margin: auto; can achieve vertical center ..

③ BFC (shameful, I finally found that I didn't put him ...)

The spacing between adjacent boxes is determined by the margin and the vertical margin overlaps. Float and clear float are only valid for elements in the same BFC.

Nima sadly, even though I still don't know what he is doing .... Here I kneel down with shame... Leave it for future solutions.

Conclusion

I found myself a title party! I did not give a positive answer to the question because I did not talk about it here, you know ()!

There are several reasons for not answering questions positively. The first is that I really don't fully understand the question, and the second is that I don't fully understand the terms of divergence...

So if I go to the interview, it will be a tragedy, so CSS still needs to study hard !!!!!