JavaScript authoritative design--CSS (brief study note 16)

some special properties of 1.Documentdocument.lastmodifieddocument. URLDocument.titleDocument.referrerDocument.domaindocument.write ()Document.writein ()  2. Query the selected textMouseUp events with the mouse  3. The browser defines multiple text editing commands (Rich Text editor)Use the ExecCommand () method of the Document object.

• Document.querycommandsupport () Determine if the browser supports the command
• document.querycommandenabled () Query the command currently in use
• Document.querycommandstate () determines whether the current turntable of the command is available
• Document.querycommandvalue () query associated values
• Document.querycommandindeterm () Detection of "fontname" Query results

  non-standard properties for 4.CSS

• The browser vendor adds a vendor prefix to the property name
• Firefox:-moz-
• Google:-webkit-
• ie:-ms-

  5.CSS Positioning

• Static: By Document content flow
• Absolute: Relative to a group of county elements or relative to the document itself
• Fixed: Relative browser window positioning
• Relative: relative to document flow

  6. No need to specify dimensions for each dynamic elementsome elements (slices) have intrinsic dimensions. Also, it is sufficient to make the desired width for dynamic elements that contain text or other streaming content. let the element content layout automatically determine its height.   7.z-indexZ-index only applies stacking effects to sibling elements. If the two elements are not overlapping between sibling elements, then setting their Z-index property is useless. 8.CSS Standard box model (content box model)Width and height Simply specify the width of the element's content area, not the inner margin or border width of the element. The standard box model specifies the width and height style properties for the dimensions of the given content area, and does not include padding and borders. It can be called a " content box Model ".

Box-sizing has three values: Content-box (Default), Border-box,padding-box.

1. Content-box:border and padding do not count into width.
2. The padding-box:padding is calculated into the width (less used).
3. Border-box:border and padding are calculated into the width, which is also the weird mode.

take a look at the following example:HTML:

<class= "Box1"> Sing woo effort </div>  <class= "Box2"> Sing woo effort </Div  >

Style:

. Box1{Height:100px;padding:10px;width:100px;Border:30px Solid Red;}. Box2{box-sizing:Border-box;-moz-box-sizing:Border-box;/*Firefox*/-webkit-box-sizing:Border-box;/*Safari*/width:100px;Height:100px;padding:10px;Border:30px solid Black;}

Results:   9.visibility and displaysame: Two can control the explicit concealment of the element. difference: The Visibility:hidden element is hidden, but the document layout still retains its space. The display:none element is hidden, and the document layout does not allocate space to it.    10.HTML5 Bits Each element defines the Classlist attribute. The property value is a Domtokenlist object: A read-only class array object that contains the individual class names of the elements. there are add (), remove (), toggle (), contains () and other methods. and the Domtokenlist object has real-time nature .   11.document.stylesheets[] The elements of an array are Cssstylesheet objects. The Cssstylesheet object has a cssrules[] array.

JavaScript authoritative design--CSS (brief study note 16)