Day12 notes

1, Four methods of hiding

/*After hiding, the lower element will top up*/
/* display: none; */

/*The default is display and display:block; The effect is the same. Block also converts other types of elements into block level elements*/
/* visibility: visible; */

/*Hidden elements are space occupying hiding. Hiding elements will not affect the structure of other web pages and will make the function of elements invalid*/
/* visibility: hidden; */

/*When the transparency is 0, the element can also be hidden and the occupying position can be hidden. After hiding the element, its function is still in use*/
/*opacity: 0;*/

/*overflow:hidden;Hide when container contents overflow*/

Table table

/*It refers to the gap between cells, which is the same as the html attribute cellspacing*/
border-spacing:value

2, input file upload file

<input type="file" name="" id="" value="" style="opacity: 0;"/>

3, Pseudo object (element) selector

Pseudo object (element) selector: you can add styles to the selected content through css selector without adding elements

Pseudo class selector: describes a state link visited hover active

/*You can select the first word in a line*/
p::first-letter{
	font-size: 30px;
	color: red;
} 
			
/*Works only on the first line*/
p::first-line{
	color: red;
}

/*Adding something after the element content can make the element have an element. Note: the default type of elements added through pseudo objects is inline*/
div::after{
	/*content property must be set*/
	/* content: "Happy! "; */
	/* content: url(img/mi.png); */
	content: "";
	width: 50px;
	height: 50px;
	background-color: red;
	display: block;
}
			
div::before{
	content: "";
	width: 50px;
	height: 50px;
	background-color: red;
	display: block;
}

4, Triangle

/*Triangle: it can be used through the border of the element. When the width and height of the element are not given by default, only the border can be used to realize triangle*/
div{
	width: 0;
	height: 0;
	/*transparent Indicates transparency*/
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-top: 50px solid orange;
	border-bottom: 50px solid transparent;
}

5, Browser compatible

Open source: open source code. Everyone can use, research and modify the domestic Linux system. It is based on this system because it is open source

Representative system: deepin (domestic system)

No open source: without open source code, there are many pirated windows - some national institutions, such as banks, will not use window system or mac system
Financial security

Why is there a browser compatibility problem?
Since the major mainstream browsers are developed by different manufacturers, the core architecture and code used are also difficult to reconcile, which provides a hotbed for all kinds of inexplicable bugs (code errors). Coupled with various technical barriers set by major manufacturers for their own interests, CSS application is more troublesome than expected. The problem of browser compatibility is something we must overcome.

Browser kernel:

1. It is mainly divided into two parts: rendering engine and JS engine.

2. Rendering engine: it is responsible for obtaining the content of web pages (HTML, XML, images, etc.), sorting messages (such as adding CSS, etc.), and calculating the display mode of web pages, which will then be output to the display or printer. The syntax interpretation of web pages will be different due to different browser cores, so the rendering effect is also different.

3. JS engine: parse and execute javascript to realize the dynamic effect of web pages.

At first, there was no clear distinction between rendering engine and JS engine. Later, JS engine became more and more independent, and kernel 9 tended to only refer to rendering engine.

6, CSS Bug, CSS Hack and Filter

1. CSS bug: the problem that CSS styles are not resolved in different browsers, or that CSS styles cannot be displayed correctly in browsers is called CSS bug

2. They are different ways to modify CSS in unofficial browsers, because they are not the same way to modify CSS in unofficial browsers. Some people prefer to use patch to describe this behavior.

3. Filter: refers to the meaning of filter. It is a method to show or hide rules or declarations for specific browsers or browser groups. Essentially, filter is a Hack type used to filter different browsers.

7, Some side effects of using Hack

It reduces the readability of CSS code and increases the burden of code.

There are usually two ways to use CSS Hack and Filter:

1) One is to use the browser's own Bug to hide or display styles or declarations;

2) The other is to use the browser's imperfect support for CSS, such as the lack of support for some rules or syntax to hide or display styles.

8, Picture gap bug

Problem: when the height of the container is not set, the image will support the bottom of the container by a few pixels by default, about 3px
Solution:

1,Set height

2,Convert the picture from an inline block element type to a block level element display:block;

3,Take the picture out of the document stream, float:left;

4,Use for pictures vertical-align:top;

9, Vertical align attribute description:

1,When I explained the form before, I mentioned one valign="top|middle|bottom" Center text vertically

2,vertical-align Actually and html order valign The function is the same

3,vertical-align:top|middle|bottom|baseline(Baseline alignment);

4,Note: by default, the pictures are aligned with the baseline

5,Why? vertical-aiign Can solve the picture gap problem, because vertical-align Changed the default arrangement position of pictures

10, Hyperlink blue border bug

Problem: if the picture is placed in the hyperlink, there will be a blue border problem in the lower version of the browser
Solution:

1,Remove the default border of the picture img (medium) border:none|0; 

2,Note: the default border of the picture is invisible and appears only under specific conditions

11, input element, inconsistent distance from the top of the browser bug

Problem: the default arrangement of form elements is inconsistent from the top of the browser
Solution:

1,set up float:left;

2,vertical-align: top; 

12, Inconsistent default size of button element bug

Problem: form button tags have different styles in different browsers
Solution:

1,Cancel the default style of the form button and reset it

2,Use background image

3,In work, we usually use hyperlink mark to simulate button mark, because button Both buttons and hyperlinks have jump function

13, Mouse pointer bug

Problem: the hand attribute value of cursor attribute is only recognized by browsers below IE9. Other browsers do not recognize this declaration. The pointer attribute value of cursor attribute is IE6 This statement is recognized by browsers above 0 and other kernel browsers.
Solution:

cursor:pointer;

cursor:	auto default
		crosshair plus
		text text
		wait wait for
		help help
		progress process
		inherit inherit
		move move
		ne-resize Move up or right
		pointer Hand shape

14, input line height bug

Problem: the text in the form element cannot be centered in the browser of lower version of IE
Solution:

Set the row height for the form element.

15, 8 common compatibility issues

1,Transparency issues opacity

2,margin-top problem

3,Picture gap

4,Blue Border 

5,Inconsistent distance between the form and the top of the browser

6,Different form button styles

7,Mouse pointer problem

8,Form text line height problem

16, Clear float

/*Universal removal method simulates the empty box mode in the form of css*/
.clear::after{
    /*The content must be empty, otherwise it will occupy a space*/
	content: "";
    /*Add an empty box after the element that needs overflow:hidden*/
	display: block;
    /*Clear all new empty boxes*/
	clear: both;
    /*Hide the newly added empty box*/
	visibility: hidden;
    /*The old IE hollow box also has a height, so it is necessary to specify that the height is 0*/
	height: 0;
}
/*It is also to solve the compatibility problem of IE. after may not work in IE, so it is necessary to write zoom*/
.clear{
    /*zoom Zoom attribute, occupied position unchanged, visual zoom only*/
	zoom: 1;
} 

17, Element centered

.eleMiddleParent{
	position: relative;
}
.eleMiddleSon{
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
}