The Nineth chapter--Intimate contact with elements: Box model

In this chapter, we will see that the use of CSS can almost always be controlled for all aspects of the construction element. Row Gao--line-height

Let's familiarize ourselves with a new attribute--row height, which we've never seen before.
Adjusts the height of the text on the entire page to allow for greater vertical spacing between rows. Increasing the line height of the text can improve readability, and it can also make a contrast between different parts of the page. To do this, we add a line-height attribute to the body rule:

body {
    font-size:small;
    Font-family:verdana, Helvetica, Arial, Sans-serif;
    Line-height:1.6em;
}

Here, change the spacing between the lines to 1.6em. In other words, it's 1.6 times times the size of the font. By using the Line-height property, we increased the spacing between the lines of the text, increasing from the default value to 1.6em.
Summary: The Line-height property allows you to specify the amount of vertical spacing between lines in the text. Similar to other font-related properties, you can specify the row height by pixel, or you can use an EM or percent value relative to the font size. In the publishing industry, the spacing between rows is also called "line spacing." Box Model

What is a box model. This is a way for CSS to look at elements. CSS considers each element to be represented by a box. Let's see what that means.

All elements are treated as boxes: paragraphs, headings, block references, lists, list items, and so on. Even inline elements (such as <em> and links) appear to be boxes in CSS. analyze the box model carefully

With CSS, you can control all aspects of the box: the size of the inner margin around the content, whether the element has a border (what type of border, and the size of the border), and how large the outer margin is between the elements. Let's look at each part of the box and see what it does: what is the content area.
Each element will have something, such as text or an image, that will be placed in a box that contains exactly the same size as the contents. Note: There is no space between the content and the edge of the box in the content area. Take a look at the picture below:
what is the inner margin.
All boxes may have a layer of inner margin around the content area. The inner margin is optional, all not necessarily, but by using the inner margin, you can create some visible space between the content and the box border. The inner margin is transparent, has no color, and does not have its own decoration. Take a look at the picture below:
what is a border.
You can have an optional border around the element. This border surrounds the inner margin, and because it is a line around the content, it visually separates the content from the other elements on the same page. Borders can have a variety of different widths, colors, and styles. Take a look at the picture below:
What is the outer margin.
The outer margin is also optional, enclosing the border. With the outer margin, you can add space between the different elements on the same page. If two boxes are next to each other, the outer margin is equivalent to the space between them. Similar to the inner margin, the outer margin is transparent and has no color or decoration. Take a look at the picture below:
How to configure a box

The box model may look simple, with only content, inner margins, borders, and outer margins. However, if you combine them, there are countless ways to set the layout of this element for an element that may have internal space (inner margin) and outer Space (outer margin). Let's look at a few boxes and see how you can change your elements. Box
Border
Inner margin
outer margin
Content Area

Once you know the above knowledge points, let's answer the following questions: What is the difference between the inner margin and the outer margin? They look the same.
A: The outer margin provides the spacing between elements, and the inner margin adds extra space around the content. If you have a border, the inner margin is inside the border, and the outer margin is outside the border. You can think of an inner margin as part of an element, and the outer space surrounds your element, separating it from the other elements. I know that they are all optional, but if you want to have a border or an outer margin, you have to have an inner margin first.
A: It is not necessary, they are completely optional, there is no dependency between each other. So you can have a border without an inner margin, or you can have an outer margin without a border, which is OK. So, in addition to size, you don't seem to be able to specify styles in the margin and the outer margin, do you?
A: basically right. Both the inner and outer margins are used to provide more visible space, and no color can be specified on the margins and the outer margin, nor can any decorations be added. However, because they are transparent, they render a background color or a background image. There is a difference between the inner margin and the outer margin: the background color (or background image) of the element extends below the inner margin, but does not extend to the outer margin . The size of the content area is determined only by the size of the content.
A: Browsers use multiple rules to determine the width and height of the content area. Although content is the main way to determine the size of an element, if you need to control the size of the element, you can set the width and height yourself. Inner margin--padding

There is a padding property in the CSS that you can use to set the same inner margin around the content. You can set this property to a number of pixels, or you can set it to a percentage. For example, we use pixels to set the inner margin to 25 pixels:

. Guarantee {
    padding:25px
}

This will increase the inner margin of 25 pixels in the four week (top, right, bottom, and left) of the content. How to increase the inner margin only on the left.

CSS provides an attribute in each direction (top, right, bottom, and left) for an inner margin, an outer margin, or even a border. To add an inner margin to the left, you can use the Padding-left property as follows:

. guarantee {
    padding:25px;
    padding-left:80px;
}

This uses the Padding-left property to add an inner margin to the left. Notice that we first set the surrounding margin to 25 pixels, and then assign a Padding-left property to the left. The order is important here, and if you swap the order, you set the margin to the left and then set the universal Padding property back to 25 pixels, which also includes the left (so that the margin on the left is overwritten). outer margin--margin

Using CSS can easily increase the outer margin. Similar to the inner margin, you can specify the outer margin as a percentage or in pixels. For example, we use pixels to increase the outer margin of 30 pixels in the four week of an element, and you can do this:

. guarantee {
    padding:25px;
    margin:30px;
}

This adds an outer margin of 30 pixels around the content (top, right, bottom, and left).
In some cases, you should use the inner margin instead of the outer margin-if you need to have more visible space around the content area itself, use the inner margin, on the other hand, if you want more space between the element and the edge of the page, use the outer margin in this case. How to increase the outer margin only on the right.

Just as with the inner margin, you can add another property margin-right to increase the right margin. Such as:

. guarantee {
    padding:25px;
    padding-left:80px;
    margin:30px;
    margin-right:250px;
}

rule: First there is a property to control all 4 sides, and if you want to set each side individually, there is actually a property for each side. Add a background image

If you want to add an image to the background of an element, there is another way. With CSS, you can add a background image to any element using the Background-image property. Such as:

. guarantee {
    padding:25px;
    margin:30px;
    Background-image:url (images/background.gif);
}

The Background-image property is set to a URL, which can be a relative path, or it can be a complete URL (http://...). Notice that no quotes are required on both sides of the URL.

We know there are two ways to add images to a page, and Background-image is not going to replace the element. No, the Background-image attribute is very specific, and it simply sets the background image of an element. This property is not used to place the image on the page, you must also use the element to place the image. Consider this: The background image is a performance aspect, and the only reason to use the Background-image attribute is to make the element more appealing. The, element, on the other hand, is used to contain an image that may have a more important role in the page, such as a photo or logo.

The Background-image property places an image in the background of the element. There are two other properties that also affect the background image: Background-position and background-repeat.

The Background-position property sets the location of the image, either by pixel or by a percentage, or by keyword designation, such as top, left, right, bottom, and conter. Such as:

Background-position:top left;

This places the image in the upper-left corner of the element. There are many different ways to specify locations in CSS, and we'll discuss them further later.

By default, the background image is "tiled", which is repeated to fill the entire background space. The Background-repeat property can control this tile behavior.

Background-repeat:repeat;

This sets the image to repeat in both horizontal and vertical directions. This is the default behavior. There are several other background-repeat values available, such as: No-repeat: The image is displayed once and does not repeat at all. Repeat-x: The image repeats only horizontally. Repeat-y: The image repeats only vertically. Inherit (inheritance): Processed by the settings of the parent element. A concise guide to Borders

Here's a look at the different ways to control the border of an element. Border Style
The Border-style property can control the visual style of the border. There are 8 available border styles, including solid lines, dashes, ridges, and grooves.
Border Width
The Border-width property controls the width of the border. You can specify the border width using keywords or pixels.
Note: different browsers may have different definitions of the specific sizes of thin, medium, and thick . Different browsers may have different default sizes for keywords thin, medium, and thick, so if the border size is really important to you, you should consider using pixel size to specify.

Border Color
The Border-color property sets the color of the border. This is similar to setting the font color, and you can specify a color by using a color name, an RGB value, or a hexadecimal code.

border-color:red;
Border-color:rgb (100%, 0, 0);
Border-color: #ff0000;

specify a border on one side
As with the outer and inner margins, you can also specify the border style, width, and color of any side (top, right, bottom, and left).
specify border rounded corners
You can create rounded corners on four corners, or only one corner or any combination of these 4 corners.

With a simple guide to the outline above, let's look at a practical problem, and now we need to provide a jagged border for a paragraph, that is, to make the border look jagged, what exactly is to be done about it. There's actually a trick here: We'll use the dashed (broken polyline) border to set its color to white (consistent with the page background color). id attribute

Suppose you have a footer on your page and all pages have only one footer, so it sounds good to use IDs. You can add an identifier footer to the paragraph that contains the footer text, as follows:

<p id= "Footer" >please steal this page, it isn ' t copyrighted into any way</p>

Note: Only one element in the page ID is "footer", that is, each element can have only one ID, and no spaces or other special characters are allowed in the ID name .
Specifying an ID for an element is similar to adding an element to a class. The only difference is that this property is named ID, not class. An element cannot have more than one ID, and not many elements on the page are allowed to have the same ID.
Now let's answer a question: Can you do this: an element has an ID and belongs to a class.
A: Of course you can. Consider this: ID is only an element's unique identifier, but it does not prevent this element from belonging to a class or multiple classes (just as you have a unique name, but you can join one or more clubs). How to use IDs in CSS.

Selecting an element with an ID is basically the same as selecting an element with a class. Can simply review: if there is a class named Specials, there are several ways to choose the elements that use this class. You can select only some of the elements in this class, as follows:

p.specials {
    color:red;
}

This will only select the paragraphs in the Specials class. Alternatively, you can select all elements that belong to the Specials class, as follows:

. specials {
    color:red
}

This selects all elements in the Specials class.
Using the ID selector is very similar. To select an element by ID, you need to use a # character in front of the ID (you can compare it to a class, and when you choose by class, you need to use a point number [.] Before the class name). Suppose you want to select any element with an ID of footer:

#footer {
    color:red/* This will select any element with ID "footer"/
}

Alternatively, you can select only one <p> element with an ID of footer, as follows:

P#footer {
    color:red/* This will select a <p> element with id "Footer" */
}

There is a difference between class and ID: The ID selector matches only one element in the page.
Here are some questions to answer:

If you have such a paragraph on your page:

<p id= "Guarantee" > ... </p>

If we were to select this element, the selector could be written as #guarantee and P#guarantee.
A: Either of these can be, they will choose the same element. On this page, we know that there will definitely be a paragraph specified as this ID, so which selector is ok (#guarantee要简单一些). However, in a more complex set of pages, this may occur: Some pages assign this unique ID to a paragraph, and on some other page, the ID may be assigned to a list or block reference. So you might want to define multiple rules for this ID, applying different rules based on the different types of elements on the page, such as P#someid and Blockquote#someid. Class and ID names have rules.
A: The class name starts with a letter, but the ID name can begin with a number or a letter. IDs and class names can contain letters, numbers, and _ characters, but cannot have spaces. So "Number1" is OK, "main_content" is OK, but "header content" is not. Be sure to remember that IDs must be unique. Mixed Style sheet

Before closing this chapter, here's an interesting thing to do, and we're going to mix some style sheets. So far, you've been using just one style sheet. Well, someone said you can't use more than one style sheet. You can definitely specify a set of style sheets for any HTML. But you might want to know why anyone would want to do that. There are many good reasons for that. Here's the first reason.
Let's assume that head first leisure room opened, with franchise, completed an initial public offering, and so on. This will be a huge corporate website with hundreds of pages and obviously you want to use an external CSS style sheet to add style to these pages. Because the company has many divisions, these divisions want to adjust their styles in their own way. In addition, leisure room experience also want to have some control of the style. You will need to use more than one style sheet at this time.
Start with the head office style, then allow the division and lounge experience to cover and modify these styles, how to do it. As shown below:

<! DOCTYPE html>
 
The order of the above style sheets is important. A style sheet overrides the style in the style sheet linked to it.
Next, let's answer the following questions: So the order of the stylesheet is important, right?
A: Yes, these style sheets are arranged from top to bottom, and the bottom style sheet has the highest precedence. So, assuming the head office and the beverage department's style sheet <body> elements all have a font-family attribute, then the beverage department's style takes precedence because it is the last link in the HTML. Simple Web sites do not need this.
A: You may be surprised to find that this is true. Sometimes a style sheet is used as the underlying style of the page. To modify a style, instead of modifying the style sheet, link the stylesheet, and then provide your own style sheet below it, specifying the style you want to modify. Specify media type

There is another reason why you want to have more than one style file: You might want to adjust the style of the page for the type of device (desktop PC, laptop, tablet, cell phone, or even print version of the page) that will display the page. Well, to do this, you can take advantage of a media property, add this property to the <link> element, and use only the style files that apply to the specified device. Let's look at an example:

<link href= "Lounge-mobile.css" rel= "stylesheet" media= "screen and (max-device-width:480px)" >
 
This query specifies a device with a screen (not other devices, such as a printer or 3D glasses, or a Braille reader). Media properties allow you to specify the type of device to which this style sheet applies. The media query matches the device by creating a media query to specify the device type. And the screen width is no more than 480 pixels.

Similarly, we can create a query to match the printer device, as follows:

<link href= "Lounge-print.css" rel= "stylesheet" media= "print" >
 
The Lounge-print.css file is only used when the media type is "print", which means that we want to view the page through the printer.
There are also many properties that can be used in the query, such as Min-device-width, Max-device-width, and display direction [orientation, which can be horizontal (landscape) or Portrait (portrait)]. There are also a number of other properties. Keep in mind that you can add more <link> tags to your HTML as needed, covering all the devices you want to support. adding media queries directly to CSS

To specify a device with a specific attribute for the CSS, there is another way to do it: not using the media query in the link tag, but writing it directly in the CSS. An example is given below:

/* use @media rules, followed by your media inquiries. For devices that match this query, all applicable rules are placed in braces, so if the device screen width is greater than 480px, these rules will be used ...
    */@media screen and (min-device-width:481px) {#guarantee {margin-right:250px; }/* If the device screen width is less than 480px, these rules will be used ...
    */@media screen and (max-device-width:480px) {#guarantee {margin-right:30px;
    }/* If you want to print this page, you will use these rules * * @media print {font-family:times, "times New Roman", serif; 
}/* All other rules apply to all pages because they are not included in a @media rule * * p.specials {color:red; }
 
In this way, @media rules contain only CSS rules that are specific to one type of media. In a CSS file, the rules that are common to all media types are placed under the @media rule, so that rules are not unnecessarily duplicated. In addition, when the browser loads the page, it uses the media type to determine which rules the page applies to, and ignores the mismatched rules.
Summary: Media inquiries are currently a positive development of standards organizations in a field, so pay close attention to the best practice of designated equipment, this aspect is still evolving.
Note: IE8 and previous versions do not support media queries.
Here are a few questions to answer: it's really cool. So I can create a different style sheet for different devices, right.
A: Yes, you can create multiple style sheets and then link them in your HTML. To determine which style sheet to use, this work can be done by the browser, which uses the appropriate stylesheet based on the media type and the features you specify in the media query. In addition to Max-device-width and Min-device-width, are there other media properties?
A: Yes, there are many, including the maximum and minimum widths (unlike Device-width,max-device-width and min-device-width media attributes depend on the actual screen of the device, not the width of your browser window, Using the Max-width and Min-width properties, they represent the maximum and minimum width of the browser window itself, not the screen size , the maximum and minimum height, orientation, color, aspect ratio, and so on. You can view the CSS3 Media query specification to see all the details (http://www.w3.org/TR/css3-mediaqueries/). To specify different CSS rules for different media types and features, use <link> or @media, which is better.
A: Both of these are OK. Note, however, that if you put all the rules in one file and then use the @media rule to separate them, your CSS will become very large. By using different <link> elements for different media types, you can organize CSS in different files according to media type. So, if your CSS file is quite large, we recommend that you use the <link> element to specify a different style sheet. Test your media query level

Please check the following equipment and the corresponding specifications. Can you design a set of media queries that specify the following devices?

<link rel= "stylesheet" href= "lounge-smartphone.css" media= "screen and (max-device-width:640px)" >
 

<link rel= "stylesheet" href= lounge-tablet-portrait.css "media=" screen and (max-device-width:1024px) and ( orientation:portrait) ">
 
Or

<link rel= "stylesheet" href= lounge-tablet-landscape.css "media=" screen and (max-device-width:1024px) and ( Orientation:landscape) ">
 

<link rel= "stylesheet" href= "lounge-pc.css" media= "screen and (max-device-width:1280px)" >
 

<link rel= "stylesheet" href= "lounge-tv.css" media= "screen and (max-device-width:2650px)" >