Basic notes on html and css (must read for front-end)

When I first came into contact with HTML, I always used tables for layout, which was very troublesome and quite ugly, so I didn’t have much interest in it at first. It was not until half a year ago that I started to use div+css to write pages that I became interested in it. As a rookie, I record my lessons and gains mainly for myself to see, and I also hope that it will be helpful to students who want to learn in the future. At the same time, I also ask seniors to point out my shortcomings.

1. Reduce the use of meaningless tags

Here is a simple example:

For this top structure,

Error: Full column > Page center > Left side + (right side > ul > li*9 > a)

Correct: Full column > Page center > Left side + (ul > li*9 > a)

For the right part, there is no need to use a div to wrap the ul. One ul can obviously achieve it, so why use extra div tags to nest it. Therefore, when writing, if a problem can be solved with just one tag, do not use meaningless multiple layers of nested tags.

2 About naming

When I was learning Java, because my English was not good, I liked to use pinyin to name things. This was not a good idea. Although I knew it at the beginning of my study, I didn’t pay much attention to it. With the reminders from people around me, and especially because I myself feel the inconvenience of using pinyin, I have corrected myself and will pay more attention to naming in the future. It doesn’t matter if you are not good at English, don’t we still have Youdao and Baidu?

Another thing is the naming when tags are nested. Generally, the naming of tags at the same level is not a big problem, and you only need to use one word. However, when nesting occurs, you need to use "-" to connect them, otherwise it is easy to confuse yourself which label is which. For example, the top column above can be named as top, the right part can be called top-right, and there may be top-right-detail-link at the end. If it is too long, it can be abbreviated to top-rd-link. If it is still too long, it can even be abbreviated to trd-link. Note that it is abbreviated only if it is too long. If it is short, it does not need to be abbreviated to ensure the understanding of the meaning. In addition, the last word is best not to be abbreviated for the sake of understanding.

3 Use of special symbols

The drop-down arrow above is made using the diamond symbol ◇, and two tags are used for nested writing.

 < i >< s > ◇ </ s ></ i >

The s tag uses position to control the position of the part that needs to be displayed, and the i tag controls the window size and hides the overflow.

CSS CodeCopy content to clipboardi

{
width : 15px ;
height : 8px ;
position : relative ;
overflow : hidden ;
}
is {
font : 400 14px / 14px consolas;
position : absolute ;
top : - 6px ;
}

The above is the common practice. As a novice, without considering compatibility, I feel that using one tag can solve the problem. For characters, use line height to control the vertical position, and use width and height to limit the display area.

XML/HTML CodeCopy the content to the clipboard

<!DOCTYPE html >
< html >
< head lang = "en" >
< meta charset = "UTF-8" >
< title > Test </ title >
< style >
i {
display: inline-block;
height: 50px;
width: 100px;
overflow: hidden;
font: 400 100px/0px SimSun;
}
</ style >
</ head >
< body >
< i > ◇ </ i >
</ body >
</ html >

This is the effect:

Currently, I have only tested the effect on Google and Firefox, and there is no problem. Please point out if there is anything wrong.

4 The distance between adjacent inline block elements

If the navigation above is converted into an inline block element, there will be a distance of several pixels between the two adjacent elements. It may not be visible at a glance, but it can be seen after zooming in. The only way to solve this problem is to use floating.

5 Continuous writing of numerical values:

In CSS, the values of some attributes can be written continuously. For example, padding and border-radius. The former are up, right, down, and left; the latter are upper left, upper right, lower right, and lower left. They are all arranged in a clockwise direction, but with different starting points. If the four directions are considered as a, b, c, and d. So when two consecutive numbers are written behind it, they represent: ac, bd; three numbers represent a, bd, c; and it goes without saying that four numbers represent a, b, c, d.

6 Clearing floats

There are 4 ways to clear floats, the most common one is using pseudo elements.

CSS CodeCopy content to clipboard.clearfix

:before, .clearfix:after {
content : "" ;
display : table;
}
.clearfix:after {
clear : both ;
}
.clearfix {
*zoom: 1; /*IE/7/6*/ /*Compatible with IE6*/
}

7 Set the height.

When talking about floating above, I suddenly thought of the issue of section height. Generally speaking, try not to use a fixed height to hard-code a section. Don't hard-code it! Don't write it dead! Don't write it dead! Important things should be said three times. How to make responsive if it is hard-coded?

8 The margin and padding of an element

are effective in the horizontal direction (left and right) of all element margins and paddings, and only the vertical direction (up and down) of the elements within the row do not play a supporting role. It should be noted that padding can expand the border of an element, but it will not squeeze the element out of its original vertical position.

9 The use of relative positioning and absolute positioning

There are four types of positioning: absolute positioning, relative positioning, fixed positioning, and static positioning. There is nothing much to say about the latter two types of positioning. They are just like the previous two types. What needs to be noted is that relative positioning will occupy the original position in the document flow, while absolute positioning will not occupy the original position in the document flow. Therefore, when you need to use positioning, you need to analyze the specific situation according to the actual situation and consider whether to use relative positioning or absolute positioning. For example:

CSS Code copy content to clipboard

* { margin : 0; padding : 0; color : #fff ; font-size : 20px ; }
.nav { height : 30px ; background-color : pink; border-bottom : 4px solid div : red ; }
.w { width : 100px ; margin : 0 100px ; position : relative ; height : 30px ; z-index : 1; }
.nav-list { height : 30px ; background-color : red ; }
.left { width : 100%; height : 400px ; background-color : peru; position : absolute ; }
.b { margin-left : 210px ; width : 100px ; height : 100px ; background-color : lightblue; position : relative ; }

XML/HTML CodeCopy content to clipboard

< div class = "nav" >
< div class = "w" >
< div class = "nav-list" > list </ div >
< div class = "nav-list" > list </ div >
< div class = "nav-list" > list </ div >
< div class = "nav-list" > list </ div >
< div class = "nav-list" > list </ div >
</ div >
</ div >
< div class = "left" > left </ div >
< div class = "b" > b </ div >

List belongs to the upper part, left is the advertisement at the bottom, and b is the content of the lower part. If relative positioning and absolute positioning are used to solve the problem, then left should use absolute in order not to affect the lower part. In this way, the list that exceeds the upper part will be covered. Therefore, a certain level should be set for the parent box of the list. Logically, relative should be used to occupy the position of the upper part because it still belongs to the upper part. In this case, you need to set relative for b as well, and set the left margin to avoid being blocked.

10 Use positioning to center elements.

To horizontally center a block-level element, you can use margin: 0 auto. The solution using positioning is: after setting the positioning, set the left (top) to 50%, and then use margin-left to move back half of its position.

CSS CodeCopy content to

clipboardheight : 20px ;
width : 50px ;
position : absolute ;
left : 50%;
margin-left : - 25px ;

11 Background and images

People often ask when to use img to insert images and when to use backgrounds. To put it simply, I think that the icons in general websites all use backgrounds, and if they are specifically related to a certain product, then img images are used.

The above article on the basic points of HTML and CSS (a must-read for the front-end) is all the content that the editor shares with you. I hope it can give you a reference, and I also hope that you will support 123WORDPRESS.COM.

Original URL: http://www.cnblogs.com/qing9442/archive/2016/07/26/5709413.html

<<: MySQL executes commands for external sql script files

>>: How to use iframe to apply the data of other web pages while maintaining compatibility