Web front-end issues that are easy to forget

Background:

At the end of the year, I just went out to the front-end rookie, finally have free time to tidy up the recent investment resume when the problem. Some are often used but not carefully paid attention to, some people think that no one to use and ignored. For the next time this error does not occur, make a summary. The answer to the question is some of my own summary, some find information to obtain. The answers you find are particularly marked. If there is any problem in this article, I hope that everyone actively message, I will make changes to the article.

Html:

　1.div picture img with div container with distance solution

This problem often appears in the layout of the site, and is also the front-end interviewer as browser compatibility often mentioned "old pacesetter".

Status: Ie6,ie7 under the IMG and DIV (block Element) will appear some interval, IE7 will have this problem, IE8 is not.

Cause: Inline elements, such as pictures and text, default to the baseline of the parent element (baseline is the baseline, and here we think it is a horizontal line that runs horizontally through the div and vertical position. ) is aligned, and baseline has a certain interval (related to font-size,font-family) to the bottom of the parent, so set Vertical-align:top/bottom/text-top/text-bottom Can prevent this situation from appearing. And not only Li, but also the other block elements including IMG will have this image.

Solution:

Method One: Define the picture img tag vertical-align:bottom,vertical-align:middle,vertical-align:top.

Img{vertical-align:bottom;}

Method Two: Define the font size in the container to be 0.
div {
width:110px;
border:1px solid #000000;
font-size:0
}

　2. Highlight Content (a question in the interview, highlighting the keywords for the search results.) Because the usual in the use of rare, so there is no concern, it can be seen that their basic reserves need to improve.

　Label:<mark></mark>

Action: Using the mark tag element, you can highlight the text in the document to achieve a noticeable effect.

Solution:

<p> using the mark tag element, you can <mark> highlight </mark> display the text in your document for an eye-catching effect. </p>

Note: The use of strong, EM elements can also achieve this effect, it is not recommended to use strong, EM elements, because the role of strong, EM elements is to emphasize the text, not just highlighting the text.

padding and margin problems of 3.HTML tags (starting at the beginning of the use of padding and margin is relatively rough.) For label layout settings, try primarily. This problem needs to be resolved immediately)

　　Problem analysis: For HTML tags to be divided, generally can be divided into: block-level elements, inline elements, empty elements (may be divided into different names, but can be divided into these three categories). In general, we are exposed to block-level elements and inline elements. First we analyze the differences between the two types of labels.

Block-level element: a block-level element will have a single row and its width automatically fills its parent element width.

Inline elements: Inline elements do not have a single row, the adjacent inline elements are arranged in the same row, and the line is not wrapped until a row, the width varies with the content of the element.

Note: In general, block-level elements can be set width, height property, inline element set width, height is invalid (note: block-level elements are still exclusive if the width is set)

　Results:

Block-level elements can set the margin property and the Padding property. and can be displayed correctly.

The padding-left/padding-right/margin-left/margin-right of the horizontal direction of the element in the row produces a margin effect, but the vertical direction of the padding-top/padding-bottom/margin- Top/margin-bottom does not produce a margin effect. (The horizontal direction is valid, the vertical direction is invalid)

The answers refer to: What are the elements in the Jackie_xie HTML line? What are block-level elements?

　What is the difference between 4.src,url and href?

　　URL (Uniform Resource Locator, Uniform Resource Locator): A Uniform Resource Locator is a concise representation of the location and access methods of resources that can be obtained from the Internet, and is the address of standard resources on the Internet. Each file on the Internet has a unique URL that contains information that indicates the location of the file and how the browser should handle it. (We can simply understand that the resource file is stored in an infinite number of folders, and we can find it through the file path, and the file path is unique)

Classification:

1. Absolute URL (absolute URL)

An absolute URL (absolute URL) displays the full path of the file, which means that the absolute URL itself is in a location independent of the location of the referenced actual file.

2. Relative URL (relative URL)

Describes the location of the destination folder as a reference point, in the folder that contains the URL itself. If the target file is in the same directory as the current page (that is, the page that contains the URL), then the relative URL of the file is only the filename and extension, if the target file is in a subdirectory of the current directory, then its relative URL is a subdirectory name, followed by a slash, Then is the target file file name and extension (for example, under the A folder with the B folder and C.txt, and under the B folder has d.txt, and we want to c.txt as a reference point, get d.txt, then url= "./d.txt"). If the destination file is not in the same directory as the current page, you need to use ".. /"（.. /is to return the previous path to the destination file, until the destination file is in a folder that has a common parent folder with the folder where the current page resides, and then find the path to the destination file.

　　　Focus: Definition and distinction of href and src

　　The href and src are different, and they cannot be replaced with each other. We use SRC on replaceable elements, but the href is used to establish a relationship between the documents involved and the external resources.

　　　href (hypertext Reference)

Specifies the location of a network resource to define a link or relationship between the current element or the current document and the desired anchor or resource defined by the current attribute. ( or it can be understood as a hypertext reference, pointing to the location of the network resource, establishing a link between the current element (anchor point) or the current document (link), which is linked to the page's direct relationship, and the page itself does not stop loading other content when it is loaded.) )

Example: <link href= "Style.css" rel= "stylesheet"/>

The browser understands that the current resource is a stylesheet, and the page resolution is not paused (because the browser requires style rules to draw or render the page, the rendering process may be paused). This is not the same as putting the CSS file content unload <style> tag, so we recommend using the link tag instead of @import to import the stylesheet into the HTML document.

　　　SRC (Source)

Embeds only the current resource to the location defined by the current document element. (Refers to the introduction of the file, the purpose is to load the file into the HTML page, when the browser will pause other content when parsing will load the SRC content, it must wait until the SRC content is loaded after the completion of the subsequent execution.) This is why JS files are often placed at the bottom of the HTML file for the reason. If you put a JS file on the page head, at present I know a way to implement JS last Load method is used in the JS script: Window.onload event processing. )

　

　　　

　　

　　

Web front-end issues that are easy to forget