[Articles] brush title html + css + js 4/10

Cattle off network analysis topics

Here Insert Picture Description
Analysis:
1. Most HTML element is defined as block-level element or elements inline
HTML <div> element

  • HTML <div> element is a block element which is in combination with other containers can be used HTML elements.

  • <Div> element has no specific meaning. In addition, since it belongs to the block-level element, the browser displays the longitudinal fold line thereof.

  • If used with CSS, <div> element may be used to set style properties for large blocks of content.

  • Another common use <div> element is the document layout. It replaced the old method of using tables to define the layout. Use <table> elements in the correct use of the document layout is not a table. Effect <table> elements is a tabular data.

  • Tag may be set high-level block frame, block-level common labels div, p, h1-h6, ul, li, dl, dt, dd.
    HTML <span> element

  • HTML <span> element is an inline elements, used as a container of text.

  • <Span> elements are also no specific meaning.

  • When used with CSS, <span> element can be used as part of a text style attributes provided

    div, p is the bulk element
    span is inline elements
    img inline block element

Here Insert Picture Description
Resolution:

  • Network Bootstrap framework system works as follows:
    1, data lines (.Row) must be contained in the container (.container) in order to impart its proper alignment and the distance (padding).
    Such as: <div class = "Container">
    <div class = "Row"> </ div>
    </ div>
    2, row (.Row) may be added in a column (.column), but can not exceed the number of columns split the total number of columns, such as 12.
    Such as: <div class = "Container">
    <div class = "Row">
    <div class = "the MD--COL. 4"> </ div>
    <div class = "the MD--COL. 8"> </ div>
    </ div>
    . 3, the specific contents of the container should be placed in a row (column), the column and only (column) lines can serve as the container (.Row) direct child element
    4, by setting the distance (padding) so as to create a column spacing between the columns. Then through the first column and the last column is provided from the outer negative (margin) to the offset distance (padding) effects
    detail: http://www.imooc.com/code/2325

  • Nested columns on
    Bootstrap grid system framework also supports nested columns. You can add one or more rows (.Row) container in one column, this column was then inserted into the container rows. But the container column row (Row) in the container, a width of 100%, that is, the width of the current external column.
    Here Insert Picture Description
    Resolution:

  • all, bind, the first parameter is a function of the three apply this pointing object

  • The second parameter difference came:

    1. The call is to go directly into the parameter, the second and third n-th argument all separated by commas, directly into the back obj.myFun.call (db, 'Chengdu', ..., 'string');
    2. All parameters apply must be placed inside the array pass in a obj.myFun.apply (db, [ 'Chengdu', ..., 'string']);
    3. In addition to returning a function other than bind, its parameters and the same call.
  • This problem needs to be resolved
    Here Insert Picture Description
    Here Insert Picture Description
    Analysis:

  • The entire (page initialization, user interface behavior change style, change the interface style animation, etc.) during rendering browser reflow (reflow) and repaint (redraw)
    will greatly affect the performance of web, especially mobile phones page. So when we page design to minimize reflow and repaint.

  • What is reflow and repaint (Original link: http: //www.cnblogs.com/Peng2014/p/4687218.html)

  • reflow: the process of a child element of style change occurs for example, a direct impact on the parent element and traceability up many ancestor elements (including siblings), this time to re-browser to render all the elements of this sub-element associated with the called reflux .

  • reflow: almost inevitable. Now popular on the screen some of the effects, such as folding tree, expand (essentially show elements and hidden), etc., will cause reflow browser. Mouse over, click on ...... as long as these acts caused a change in the properties of certain elements of the footprint, positioning way, margins and other page, it will cause internal, and even around the re-rendering the entire page. Usually we are unable to estimate the browser in the end what part of the code will reflow, they all affect each other.

  • repaint: If you just change the background color of an element, text color, border color, and so does not affect the properties around it or inside layout will only cause the browser to repaint (redraw). repaint significantly faster than the reflow

  • The following situation will lead to the occurrence of reflow
    1: to change the window size
    2: change the text size
    3: content changes, such as a user typing along in the box
    4: active pseudo-class, such as: hover
    . 5: operation class attribute
    6: script operations the DOM
    . 7 : calculated offsetWidth and the offsetHeight
    . 8: setting style attribute
    Here Insert Picture Description

  • "Form" the special block element, it can only be used to accommodate other block elements.
    Here Insert Picture Description
    Here Insert Picture Description
    Here Insert Picture Description
    Resolution:

  • Bb represents a bold, strong Indicates important text

  • C.fieldset for packets while legend for packet description
    Here Insert Picture Description
    Analysis:

  • datalist list of options specified input field, created by option;

  • keygen provide a reliable method of authenticating a user, the key pair generator, a client private key stored in the public key to the server, the client certificate for later verification;

  • The output element outputs for different types of

Published 10 original articles · won praise 0 · Views 156

Guess you like

Origin blog.csdn.net/yjj510818155/article/details/104815139