Frontend path for backend programmers 06-layout model, color value, length value, and backend 06 --

Frontend path for backend programmers 06-layout model, color value, length value, and backend 06 --

Directory

• Layout Model
• Flow)
• Float)
• Layer)
• Color value
• Length Value

I. layout model

Webpage layout model: In my personal understanding, each element in html is arranged. The arrangement can be divided into three types: flow model, floating model, and layer model.

Ii. Flow Model

This is the default Layout mode for Web pages.

Features:

Iii. Floating Model

The floating model is used to solve the overbearing features of block-level elements. For example, if two block-level elements are in the same row, the floating model can be used;

Specific manifestation: the float attribute of css can be used to control element floating.

Iv. Layer Model

Similar to the layer editing function in photoshop, each html element can be precisely located on a webpage.

Specific Operation: Use the position attribute of css to support the layer model.

The layer model has three forms:

1. absolute position (position: absolute)

Drag an element from the document stream, and use the left, right, top, and bottom attributesClosestOneHas positioning attributesOfParent contained block.

If such a block does not existBrowser window.

2. position: relative)

Offset relative to the previous position. The direction and amplitude of the movement are determined by the left, right, top, and bottom attributes, and the positions before the offset remain unchanged.

3. fixed position (position: fixed)

Similar to absolute, but it is relative to the view itself (Webpage window in the screen). Because the view itself is fixed, it does not change with the scroll bar of the browser window,

Unless you are on the screenMobile browser windowThe location of the screen, orChange the display size of the browser window,

Therefore, fixed positioning elements are always located at a certain position in the browser window and will not be affected by the flow of documents.

4. Combined use of absolute and relative

Review the key points of absolute above: 1. reference object: its parent element 2. The reference object must be a positioning element.

Key Points of relative: 1. Reference: yourself

Therefore, if you need to absolutely locate the child element relative to the parent element, you can use relative to change the parent element to the positioning element, and use absolute to absolutely locate the child element.

5. color value

In the web page, color settings are very important, with the font color (color), Background color (background-color), Border color (border), There are also many ways to set the color:

1. English command color

For example, p {color: red;} sets the color to red.

2. RGB color

This correspondsphotoshopInRGBThe color is the same fromR(red),G(green),B(blue)The ratio of three colors to the color.

         p{color:rgb(133,45,200);}

The value of each item can be 0 ~ An integer between 255 and 0% ~ The percentage of 100%. For example:

         p{color:rgb(20%,33%,25%);}

3. hexadecimal color

The color setting method is as follows:Widely usedThe principle is actuallyRGBSet, but the value of each item is0-255Changed to hexadecimal00-ff.

     p{color:#00ffff;}

Vi. Length Value
CurrentlyPx (pixels),em,% PercentageNote that all three units are relative units.　　
1. pixels
Pixels refer to the small dots on the display (the CSS specification assumes that"90 pixels = 1 inch"). The actual situation is that the browser will use the actual pixel value of the display, and most designers currently prefer to use pixels (px) As the unit.
2. em
It is the font-size value of the font-size given by the current element. If the font-size of the element is 14px, 1em = 14px; if the font-size is 18px, 1em = 18px. The following code:

p{font-size:12px;text-indent:2em;}

The code above can be used to indent the first line of a paragraph by 24px (that is, the distance between two fonts ).

Special case: when the unit of font-size is set to em, the calculation standard is based on the font-size of its parent element.

3,Percentage

p{font-size:12px;line-height:130%}

Set the Row Height (row spacing) to 130% (12*1.3 = 15.6px) of the font ).