Web front-end Development Learning notes (II)

Homework2:http://my.ss.sysu.edu.cn/wiki/display/web/homework+2+-+movie+review

This assignment is related to layout, so many of them are knowledge of layout:

The Block,inline-block,inline value of the 1.display attribute is distinguished

What really needs to be differentiated is inline-block and inline. Are all in the same line, how to distinguish them? The first thing to understand is the important difference between the block element and the inline element: the height and width of the block elements are controllable, and the inline elements are not. Blocks correspond to block elements, inline corresponds to the inline elements, inline-block known as "inline block elements" (both the height of the block and the characteristics of the inline), draw a picture to understand:

Two blocks with different heights:

Two highly different inline-block:

Two inline:

2. About margin:

Some elements of the margin default value is not 0, such as body, depends on the type of browser.

3.float

We can use float to achieve the effect of text around a picture like this:

Just set the picture on the left to Float:left, although the elements of float are not part of the normal stream, but the text does not overwrite the image, but it surrounds the picture.

4. An unresolved issue:

When I wrote this assignment, I encountered a strange problem, and there was a situation in which:

The corresponding code is as follows:

The box model is as follows:

But after setting the overflow to hidden, the problem is resolved:

Code:

Search on the Internet, there is an explanation: https://www.zhihu.com/question/30938856, but they do not understand, first dig a hole here, and then fill in.

Web front-end Development Learning notes (II)