Don't know the back end of CSS is not a good program ape?

As H5 in the mobile side of the development of the high-end, now most of the company's advanced front-end demand is also everywhere digging corner, the front-end pay has risen, the company does not have a dedicated front-end how to do?

As the boss in the eyes of the "procedural ape" front end is not very incompetent performance, that as a back-end personnel need not understand the front-end it? In order to enhance the value or need to understand the point, or a bit of trouble to find the front, it is not let others crazy ...

The front-end first from the most common style to say, the important knowledge of the box model, here is not to grumble about those difficult to understand the concept, directly see the figure below it.

What is called the margin, the inner margin ...

Figure 1: English version

The popular point is the following diagram:

Figure 2: Chinese version

Then look at the total width and the total height of the calculation, should be able to understand:

Figure 3

The reason to know the width and height of the calculation, when you add a button in the back of a line of content, this button will be the size of the browser full screen everywhere, although you left to adjust the width, positioning, the one or two pixels of the thing will make you mad, then you have to learn to calculate that just good pixel problem.

Let's talk about some of the more important things to be aware of:

Padding only exists inside a box, so it usually does not involve the relationship between the other boxes and the problem of mutual influence.

Margin is used to adjust the position relationship between different boxes.

① horizontal margin between elements in rows

Figure 4 Horizontal margin between elements in a row

The distance between the two blocks is: 30px+40px=70px.

② vertical margin between block-level elements

Figure 5 Vertical margin between block-level elements

If it is not an inline element, but a vertically arranged block-level element, the value of margin will vary.

The distance between the two block-level elements is not the sum of the Margin-bottom and Margin-top, but the larger of the two. This phenomenon is called "collapsing" (or "merging") of margin , meaning that smaller margin collapses (merges) into larger margin.

Sometimes you want to give a button to add a background guy's Ah, unexpectedly no effect! A look at the original is covered by other styles, what's going on? Then you need to know CSS style precedence

CSS styles have external styles, inner styles, and inline styles applied to the same element at the same time, that is, the case of multiple styles.

In general, the priority is as follows:

(external style) External style sheet < (inner style) Internal style sheet < (inline style) inline style

Inline style (style= "") (directly on element) ID style (id=) category style (class= ")" Mark Style (written in head or CSS file)

The standard wording of course is to unify the style of writing in the CSS file for easy reuse management, the page try not to write style, keep the code neat. (See Porridge's page do you have a feeling of seeing the sea ... ）

How do you locate the element I think of? CSS Selector appearances

I. Basic CSS selectors have tag Selector, category selector, ID selector 3 kinds:

1. Tag Selector
The name of each HTML tag can be used as the name of the corresponding tag selector, such as H1,P,DIV, etc.
2. Category Selector
The name of the category selector can be customized by the user
The format is as follows:. class{color:green;font-size:20px;}
3.ID Selector
Test with category Selector
The format is as follows:#id{color:green;font-size:20px;}

two. Composite selector: two or more basic selectors, a selector that is connected in different ways
　　1. "Intersection" selector: composed of two selectors directly connected, the result is to select the intersection of their respective element ranges, where the first must be a tag Selector , the first two must be a category selector or an ID selector , two selectors between cannot have spaces, must be written continuously
such as: h3.class{color:red;font-size:23px;} div#special{...} notice there's no gap between the two .

　　2. "Set" selector: Select the range of the basic selector at the same time, any kind of selector can be, and the set selector is a number of selectors through a comma-connected ,
Format such as: H1,H2,H3{COLOR:RED;FONT-SIZE:23PX;} Note that the middle is separated by commas

Three. Descendant selector:
Writing: The outer tag is written in front, the inner layer of the tag is written in the back , separated by a space , when the tag is nested, the inner layer of the tag becomes the descendants of the outer tag
Give me a chestnut:

<HTML><Head><title>Descendant Selector</title><styletype= "Text/css">P span{Color:Red}span{Color:Blue;}</style></Head><Body><P>Nesting<span>With CSS</span>Method of marking</P>Nested outside of<span>Mark</span>does not take effect</Body></HTML>

　　Effect:

　　

The effect is: "With CSS" display red, the other with <span> surrounded by the blue color
The effect of the descendant selector is not limited to the "immediate offspring" of the element, but also affects its "descendants at all levels"

Four. Sub-selector: that is, only for the direct descendants have an impact on the selector, and the "grandson" and to the descendants of the layer does not have a role.
The format is as follows: P>span{color:blue;}

An exception to this is that if an external style is placed behind an internal style , the outer style overrides the inner style.

<Head>    <styletype= "Text/css">      /*internal Style*/H3{Color:Green;}    </style>     <!--external style style.css -    <Linkrel= "stylesheet"type= "Text/css"href= "Style.css"/>    <!--setting: H3{color:blue;} -</Head><Body>    <H3>Test!</H3></Body>

Here is the first two commonly used even knowledge points, and so on to fill other content ...

Finally, the question: is the back-end program ape supposed to know the front? Vote

more source information please pay attention to another program ape's public number "a yard farm's everyday"

Don't know the backend of CSS is not a good program ape?