CSS Draw special graphics, Meida query, display Inline-box gap Problem and calc () function

This article is also published in my personal website www.yaoxiaowen.com

The distance from the previous article has been one months, compared to writing code, found that writing articles is really more need to adhere to the matter. To get to the point, it is necessary to keep a record of these one months, when writing IFE tasks.
One, CSS to draw special graphics.
In a Web page, when you need some special graphics. such as semicircular, triangular, etc., we generally let the UI transduction, but in fact, the use of CSS border (border) properties, we can draw some regular graphics.
There are four corners in the box model, so there is a radian attribute for each corner.
Look at the code first:

1 . Half_circle {2width: 50px; 3 height: 50px; 4 Border-radius: 25px 0 0 0; 5 border-color: blue olivedrab red black; 6 border-width: 2px; 7 }

Then the following:

Of course, this figure is not very intuitive, if the graph can be marked out of the center radius, border length and other information, so as to be clear, but I am sorry to do such a callout diagram too troublesome, so I do not, but I think, learned high school mathematics, should be able to see, the upper left corner of the arc is how to draw out The total length is 50, the upper left corner arc radius is 25, moving from the upper left corner along the left and the top border to move 25, find two points, and then do an arc exactly with these two points tangent, in fact, the center is exactly the centre of the box. So in fact, Border-radius to draw the basic principle of the arc is, from a corner as a starting point, along two borders to move x length, and then according to these two points, do two vertical lines, and then the intersection is the center, x as the radius, and then you can draw an arc.

Then look at the main code for the following two graphs:

1 . Four_triangle_1{2 width:0px;3 Height:0px;4 Border-color:Red Green Blue Pink;5 Border-width:25px;6}7 8 . four_triangle_2{9 width:0px;Ten Height:0px; One Border-color:Red Green Blue Pink; A Border-width:20px 10px 30px 40px; -}

。

Think carefully, these two pieces of code, as well as the corresponding diagram, understand the principle of it can be (mainly the point of its intersection is how to determine). Then you can use the imagination to draw a variety of diagrams, online to tell CSS to draw a variety of graphic articles too much, but original aim, understand the basic principle, the rest of a little pondering, you can write.

Also, in Android, we draw arcs using the corners property of the shape resource, assuming that rectangle is used to draw a semicircle around a control, but sometimes it's not the semicircle we want, because the height of the control is WRAP_ Content Only by knowing the exact height of the control can we draw the perfect semicircle on both sides.

Two, naming rules hyphen? Underscore
Before I named ID or class in HTML, I used an underscore (underscore), because the code like C,java is underlined, so I get used to it, but when I use the [Attribute|=value] selector, I write [ Class|=col], found no effect, tested several times, in the document, about [Attribute|=value] selector description, found such a sentence,
The value must be the whole word, such as lang= "en", or followed by hyphens, such as lang= "en-us".

Then understand that I use underscore in the code, for this selector has no effect, you must use a hyphen (hyphen, sometimes called a dash). Front of the pit is really a lot ah, online look at the CSS naming norms, about hyphen or underscore problems, general or recommended use of hyphen good. (and this also involves browser compatibility issues).

Third, media query
In Android, for different phone size resolution, we use resources can be differentiated, such as DRAWABLE-XHPI, MDPI,LAYOUT_W360DP and the like, the front end also need to face different devices, and various sizes, then the way to solve this problem is Media

@media query, you can set different CSS styles for different media types (such as screen, speech, etc.), and different screen sizes.
such as this

1 @media (min-width:769px) {... }2@media (max-width:768px) {... }

This allows us to use a different style sheet depending on whether the screen size is greater than 768px.
As defined by the specification, this is the case
Media queries contain an optional media type and 0 or more expressions that meet the CSS3 specification to describe media features that are parsed to true or false.
It contains not only min-width,device-height,orientation these commonly used media functions, but also supports and,not,only logical operators and the use of commas to separate lists. This makes it possible to make a variety of complex query conditions.

Four: Display:inline-box there are extra gaps

The problem that came up a few days ago, like the following,
HTML code:

1 <DivID= "wrapper">2 <Divclass= "box">1</Div>3 <Divclass= "box">2</Div>4 <Divclass= "box">3</Div>5 <Divclass= "box">4</Div>6 </Div>

CSS code:

  1   #wrapper  {  2  width :  400px ;  3  border :  1px blue dotted ;  4 } 5   6  .box  { 7  width :  25% ;  8  display :  Inline-block ;  9  border :  1px red solid ; 10 } 

My intention was to expect each box to occupy 25% of the width and then just be a row. Such demand is still more common.
But look at the actual effect.
：

I used Display:inline-block, but there was a gap behind every box. This makes me very puzzled, the Internet search, only then understood the principle.
The blog of one of the great gods is more clearly explained:

In HTML, line breaks, spaces, tabs, and so on, which produce whitespace characters, which are all in the final analysis, are controlled by font-size, and the size of the font directly results in the size of the void between the elements of inline or inline-block, The gap between the inline-block elements is that it is always wrong to have a fixed size.

Also said that we use inline-box, in fact, the nature of the element is inline, but from a line, in fact, or box, so the white space, this is a historical issue, because the Western text is used to use space as a division, and the eastern text is not so.
And according to its principle, the solution is actually very simple, in the parent element, add font-size:0, but this solution will also bring a trouble, that is, each inside the child elements, font-size need to be reset.

Five, box-sizing, and Calc () functions
A solution to the previous problem to see the actual effect.
：

As you can see, the gap in the middle is indeed 0, but the four box is still not full, for the simple reason that we set width:25%, but according to the standard box model, this width,height contains only the content area, excluding padding, Border, not including margin. So although we set the width:25%, but each box, plus border, their actual occupied width is more than 25%,

Of course, not including margin is logical, but does not include padding,border, actually does not accord with the human thinking habit. So in the earlier IE browser box model, (also called IE weird mode), the width of its box is contained padding and border.

But the current standard of Width,height only contains the content area, in some scenarios, it will cause us to write layout trouble, take the above problem, the width is a percentage, rather than fixed value ah, that how to solve the problem. There is a calc () function in the CSS, which is a computational function that uses "+", "-", "*" and "/" arithmetic, as well as percentages, px, EM, REM, and so on, can be mixed to calculate the value dynamically.

I put the above layout in CSS, set to write

1 . Box {2width: calc (25%-2px); 3 height: 50px; 4 display: inline-block; 5 border: 1px red solid; 6 }

：

So that we can achieve the purpose we want.
There are also two points to note about the Calc () function.
1, there must be a space before and after four operators.
2, in fact, the Calc () function, does not just calculate <length>, others like <frequency>, <angle>, <time>, <number>, < Integer> It can be used as well.

In addition to the Calc () function, is there any other way to solve the above problem?
Let's change the CSS code to this.

1 . Box {2box-sizing: border-box; 3 width: 25%; 4 display: inline-block; 5 border: 1px red solid; 6 }

Testing, but also to achieve the effect we want, because the box model is only contained content, not intuitive, so we set the Box-sizing:border-box, in fact, the same as the IE strange mode of calculation, will padding, Border is also counted into the box width.

A little bit more sentiment:
When writing Ife task1_7, this page is more complex and more content. Later found that they write too messy, and sometimes change a certain area of the content, will affect the content of other areas, which means that I write code coupling is too high, decoupling, it should be one of the silver bullets in the field of software engineering. In the future to write html,css need to pay attention to this problem, such as the content of float, to remove the parent element floating, using absolute,relative positioning method, also pay attention to their reference point, as far as possible is based on the direct parent element.

CSS Draw special graphics, Meida query, display Inline-box gap Problem and calc () function