Hide label
display: none;
It does not show in any way, not occupying the page, but reappears still occupying
opacity: 0.5;
modification box transparency value of 0, completely transparent, but the page placeholder
hatched box
box-shadow: 150px 0 10px 0 red, 0 150px 10px 0 green;
x y axis offset axis offset shadow width Bleaching Color
Cassette positioning three
fixed positioning
The current page width and height of the window (lock the screen size changes vary): vw vh
Once opened positioning properties, left, right, top, bottom four Nouns can participate layout
Fixed positioning reference browser window
layouts: Distance box four fixed positioning of the four sides of the margin of the browser window: eg: left - left from the left, right - the right from the
left and right take a left, go on on
z-index value is equal to a positive integer greater than 1, a plurality of superimposed layers overlaying layer display has the z-index value
z-index: 666;
Summary:
1. Z-index attribute value need not superimposed sequentially from 1, arbitrarily set
2. z-index higher level attribute value larger display, showing different levels occurs overlaps the display region, the display area shows a high-level overlay display low-level display area
Summary:
1. The box model fixedly positioned with reference to the screen page layout position four edges, top, right, bottom, left control the distance from the bottom right page screen left four edges
2. top and bottom orientation of two layouts At the same time the presence of only the top attribute values are layout effect, concurrently with empathy left right, left attribute values are only effect layout
box model 3 may be fixedly positioned to overlap the display area (box model with other page because the page occurs scroll, fixed position relative to the page locate the box is always stationary), fixed positioning of the box model will be displayed at the top
Absolute positioning
sub-labels get less than the parent label of wide, open also do not hold a high level of parent
Must set up their own sub-tab width and height, the parent must also set the width and height of your own
position: absolute;
absolute positioning of the label is relative to a reference system for positioning, will not affect each other directly
reference system: locate the nearest parent
open four azimuth positioning
on the pitch at the subtalar ...
on the go, take the left around
Child using absolute positioning, usually want to refer to the parent to locate, the parent must be positioned to deal with as a child of reference
parent can choose fixed, absolute, but both will affect the box model positioning, relative positioning is not box model will affect the
parent with the child must
position: relative;
Absolute positioning:
1, as a label for a movement to move the parent (child After completion of the layout relative to the stationary position of the parent), and does not affect the label layout brothers (Brother movable, relative to their parent or still )
2, Z-index values change vertically overlapping relationship sibling layer
3, the parent of the child must be relatively positioning processing (positioning can be three kinds of)
the parent to the child first layout, the sub-stage absolute when positioning, the parent of the general layout has been completed, if the parent uses positioning to complete the layout, the natural child of the parent to complete the equivalent of absolute positioning
if the parent does not use targeting to complete the layout, we have to post-parented increase the positioning process, to assist the child absolute positioning, positioning is to increase the parent's late, we have to ensure that the increase does not affect the layout before parent, relative positioning can be done
Relative positioning
{.box
/ * relative positioning of the layers is offset * /
position: relative;
/ * left: 100px; * /
/ * right: 100px; * /
/ * Top: 100px; * /
/ * bottom: 100px; * /
/ * The system: their original positions, and the offset does not affect their original position * /
}
1. absolute positioning auxiliary address the needs of
2, there is located opposite used independently, but the model can completely replace the cartridge, it is generally not
Summary:
1. The parent tag relatively positioned (relative) to assist in positioning the sub-label absolute (Absolute) layout, so that each sub-tabs are four separate reference edge parent tag layout position, top, right, bottom, left, respectively controlling the distance from the parent tag lower right edge of the left four
when top and bottom 2. layouts exist two orientations, only the top attribute values are layout effect, concurrently with empathy left right, left attribute values are only layout effect
3. the box model absolute positioning may display region overlaps with other models of the box on the page, it is generally desired layout, without treatment; but overlap may occur simultaneously between the absolute positioning for the tags, this time often who need to be addressed in the next display, z-index attribute is to solve this problem
* /
js
Front scripting language - programming language - a weak type of language - the business logic to complete the page and page interaction
1, you can generate your own page data
2, can request background data
3, can accept user data - can render to another location on the page; be submitted to the background
4, modify the page label content, style, properties, events (page can be done by js input and output devices to interact with the computer)
<body>
<-! Click the pop-up: the Hello JS ->
<- between line:! wrote an event attribute tag ->
<- <div the above mentioned id = "dd" onclick = "Alert ( '! hello js') "> </ div> ->
onclick: mouse click
ondblclick: Double click
onmousedown: Mouse Down
<div id = "dd"> </ div>
Import embodiment
</ body>
<- inline:! label written in the script, script tags should appear at the bottom of the body (which may be placed after the end of the body ) ->
<-! <Script> ->
<-! dd.onclick = function () {->
<-! Alert ( 'Hello JS') ->
<-!} - >
<-! </ script> ->
<- outreach formula:! by src attribute of the script tag, links to external js file ->
<script src = "js / js introduced .js">
// a after the introduction of external script tag has src js file, equivalent to a single label, the internal code is automatically shielded
dd.onclick = function () {// do not work
Alert (666)
}
</ script>
js grammar
<Script>
the let AAA = 123;
the let BBB = '123';
the console.log (== AAA BBB); // == only data comparison
console.log (aaa === bbb); // === do Comparative data type
// weak language types: choose how stores data determined by the environment
the console.log (. 1 + 2); //. 3
the console.log ( '. 1' + '2'); // 12 is
Console. log (1 '2' +); // 12 is
the console.log (1 - '2'); // -1
</ Script>
<Script>
// Third, the data type
// value type
// 1) digital type
123 A = the let;
the console.log (A, typeof (A));
A = 3.14;
the console.log (A, typeof (A));
// 2) boolean
the let B = to false;
the console.log (typeof ( B), B);
//. 3) a string type: '' ''``
let c = `123
456
789`;
the console.log (C, typeof (C));
//. 4) undefined type: uninitialized variables of
the let D;
the console.log (D, typeof (D));
// reference type
// 5 ) array (corresponding List):
let ARR = [. 1, 2,. 3];
the console.log (ARR, typeof (ARR));
//. 6) the object (equivalent to dict): the key must be a string of all
let sex = 'M';
the let DIC = {
name: 'Owen',
Age: 17.5,
Sex, // if the value is a variable, the variable name with the same name as the key, can be abbreviated
};
the console.log (DIC, typeof (DIC)) ;
// 7) function type
function Fn () {}
the console.log (Fn, typeof (Fn));
//. 8) type null
the let X = null;
the console.log (X, typeof (X));
</ script>
<Script>
// II Variables and Constants
the let NUM = 123;
NUM ++;
the console.log (NUM);
const STR = '123';
// STR = '456'; // constants must be declared with an initial value, and Once assigned immutable
the console.log (STR);
</ Script>
<Script>
// a, three ways to output information
// statements console output
the console.log ( 'Ah Zhenshuai')
// popup message
alert ( 'Ah you really handsome')
// write the content to the page
document.write ( '<h2 style = " color: red"> Ah you handsome dregs </ h2>')
</ Script>