First, what the box model?
Margin : Margin
Border : Border Line
The Padding : Padding
Content : Content
Second, border box and box contents What is the difference? What are the corresponding attribute is?
- 1. border of the housing: border-Box: border , padding, composition Content
a) When debugging browser, the page size of the display element refers to the size of the border box
b) the background elements, default coverage border of the housing, may be modified by the background-clip property
C) background-Clip property: Meaning: Coverage Background
Not inherit
Default values: border-box
Value: border-box: background border of the housing cover
Box-padding : filled box covered background
Box-Content : background overlay content box
- 2. SUMMARY cartridge (content-box): content of the composition
a) By default, width and height attributes, content refers to the width and height of the cartridge
B) width and height setting ranges may be modified by a box-sizing property
C) Box-Sizing properties: Meaning: box width and height setting range
Can not inherit the default values: content-box
Value: content-box: indicates the aspect of the content of cartridge
Box-border : represents the width and height of the border of the housing
Third, how to change the layout of the elastic axis direction? Define the project in the alignment of spindles What? What projects in the cross-axis alignment?
. 1) Flex-direction property determines the direction of the spindle (i.e., the arrangement direction of the project).
RO W (default): main horizontal direction, starting at the left end;
Reverse-Row : spindle in the horizontal direction, starting at the right end;
column : main vertical direction, the starting point on the edge.
Reverse-column : a vertical direction of the spindle, along the lower starting point.
2) Flex-wrap property definition, if the row axis less than one, how wrap.
nowrap (default): Do not wrap. When the container is not wide enough, the width of each item will be squeezed;
wrap : wrapping, and the top of the vessel a first line;
Reverse-wrap : wrapping, and the bottom of the first container row.
. 3) Flex-Flow is a flex-direction and flex-wrap abbreviated form, the default value is: Flex-Flow : Row wrap;
. 4) The justify-Content attribute defines the alignment of the items on the spindle.
Spindle direction: row- starting point on the left, Row-reverse- starting point on the right, column- starting point at the top, column-reverse- starting point at bottom
Start-Flex (default): The project is located in the spindle starting point.
End-Flex : Project is located in the spindle end.
Center : center
BETWEEN-Space : justification, the spacing between the items are equal. ( Beginning and final project, and no parent container edge interval )
around-Space : at equal intervals on both sides of each item. Therefore, the gap between the project twice the size of the project and the interval of the border. ( First and last project, with the edge of the parent container there is a certain interval )
. 5) align = left -items attribute defines how items in a cross-axis alignment.
Start-Flex : starting cross-axis alignment.
End-Flex : end cross-axis alignment.
Center : midpoint of the cross-axis alignment.
baseline: first line of text in the project baseline alignment. ( High lines of text, the font size will affect the baseline of each line )
the Stretch (default): If the project height is not set or set to Auto , occupies the entire height of the container.
align-content attribute defines a plurality of axes alignment. If the project is only one axis, the property does not work.
( When item replaced multiple rows, can be used align-content unsubstituted align = left-items )
Start-Flex : the starting point is aligned with the cross shaft.
End-Flex : aligned with the end of the cross shaft.
Center : aligned with the midpoint of the cross shaft.
BETWEEN-Space : both ends of the cross-axis alignment, the average spacing between the axes of the distribution.
around-Space : the axis of each of both edges are equal. Therefore, the spacing between the axes twice the size of the interval axis border.
Stretch (default): axis occupies the entire cross-axis.
Fourth, inline elements which, what characteristics? What are block-level elements, characterized by what? Empty elements are there?
Block-level elements
- Width and height can be set up on their own, absolutely no relation to the content
- Default on a separate line, a line can not coexist with other elements
- Corresponding css attributes are display: block
- Common are div, p, h1-h6, hr, ul, ol, pre h5 variety of new semantic tags such as header, footer
- Width and height can not be set, setting is invalid, the content is determined by the width and height
- Default row can co-exist with other elements
- Corresponding css attributes are display: inline
- Common inline element has: a, span, strong, I, b, td
- You can set the width and height, absolutely no relation to the content
- The default is not a line by line can coexist with other elements
- Corresponding CSS properties are: display: inline-block
- Common element: img, td, table, video, audio, form. . .
Row element
Block-level elements inline
V. element position, which has several property values? What is its meaning are described in detail.
Absolute : generating absolute positioning element relative to the first parent element is positioned outside the static positioning.
Fixed : generating element absolute positioning, relative to the browser window positioning.
Relative : generating element relative positioning, positioning relative to its normal position.
Static : default. No positioning element appears in the normal stream
Inherit : provisions should inherit the value of the position property from the parent element.
Six, Run the display which has a common value of the property? Respectively, what does this mean?
None : This element will not be displayed.
Block : This element will appear as a block-level element, with a line break before and after this element will.
Inline : default. This element will be displayed as inline elements, before and after the element has no line breaks.
Block-inline : inline block elements.
Inherit : provisions should inherit the value of the display property from the parent element.
Seven, CSS priority selector, discharged from high to low.
The browser's default stylesheet declaration
User stylesheet general statement
On the stylesheet general statement
Author style sheets Important Notice
User style sheets Important Notice
Eight, overflow attribute which values describe its meaning.
The Visible : The default values. Content will not be pruned, there will be elements outside the box.
Hidden : content will be trimmed, and the remaining content is not visible.
The Scroll : content will be trimmed, but the browser will display the scroll bar to view the rest of the content.
Auto : If the content is pruned, the browser will display the scroll bar to view the rest of the content.
Inherit : provisions should inherit the value of the overflow property from the parent element .
Nine, DOCTYPE role? The role of semantic tags?
<! DOCTYPE> declaration on the first line of the HTML document, before the <html> tag in. Tells the browser parses the document parser what the document standard. DOCTYPE is not present or incorrectly formatted documents presented will result in compatibility mode.
The role of semantic tags: good understanding of HTML document browser
Conducive to search engines to understand HTML document
Ten, describing graceful degradation and progressive enhancement.
Progressive enhancement (Progressive Enhancement) : outset be constructed for low version of the browser page, perform basic functions, and then the effect of interaction for advanced browser, add a function to achieve a better experience.
Graceful degradation (Graceful Degradation) : start to build a fully functional site, and then for browser testing and repair. For example, a start using CSS3 properties of building an application, and then gradually hack for the major browsers so that it can be properly viewed on the lower versions of the browser.
XI, write several common browser kernel (a 1 point).
1 , the browser 360: Chrome IE kernel and the kernel.
2 , Baidu browser: IE and Webkit dual core.
. 3 , QQ browser: Chromium dual-core core + IE.
4 , cheetah browser: Trident and WebKit.
5 , Sogou browser: chromium kernel.
XII remove floating method (at least four)?
(1) to define a single parent element height ( height )
How it works: If the parent element does not define the height of the height of the parent element completely softened by the sub-elements, the parent div manually defined height, will be solved automatically parent div can not get to the level of the problem.
Pros: Simple , less code , easy to grasp .
Disadvantages: only suitable for fixed-height layout, to give the exact height, height, and if the parent div is not the same, can cause problems. For responsive layout will be greatly affected.
(2) applied at the end of the empty tag div tags clear: both
Principle: Adding an empty div, css increased use clear: both clear float, so that the parent can automatically get div height.
Advantages: simple, less code, browser support is good, not prone to blame the problem
Cons: Many beginners do not understand the principle; if the page layout and more floating, we must increase the number of empty div, is not conducive to optimizing the page.
(3) the parent div defined pseudo-class : after and zoom
Principle: element generating pseudo-classes and effects in principle corresponds to the method 2, but IE8 above and non-IE browsers support only: after, zoom (IE turn have attributes) resolves ie6, ie7 float problem
Advantages: browser support is good, not prone to blame the problem, the wording is fixed, do not understand can also copy direct;
Drawback : CSS code for many, many beginners do not understand the principles of the code to be used in combination to make two major browsers are supported.
(4) the parent div define overflow: hidden
Advantages: simple, less code, better browser support
Disadvantages: it can not be used in conjunction with position, because the size of the excess will be hidden. (Not recommended for use in this way, it may affect the layout of page elements)
Thirteen, a detailed description of em, rem, vh, vw, px,% the six units of meaning?
PX : is an abbreviation Pixel (pixel), the relative length unit with respect to the screen resolution;
EM : Reference parent element font-size, having characteristics inherited. The browser's default font is 16px,
REM : CSS3 unit is a relatively new, but just the opposite HTML root element. It can only be done by modifying the root element of all proportion to adjust the font size, and font size layer by layer to avoid complex chain reaction.
% : Percentage relative length unit, with respect to the percentage of the value of the parent element.
vh and vw: with respect to the height and width of the viewport, 1vh equal to the height of the viewport 1/100, 1vw width equal to 1/100 of the viewport.
Fourth, the background image associated attributes (address, repeat mode, position, size, fixed background)?
- 1. set the background image: background-image: url ()
- 2. Set the background image repeat mode: background-repeat
Value: repeat: the default value, the horizontal and vertical directions tile repeat-x: Tile horizontally repeat-y: Tile vertical direction no-repeat: setting a background image tile will not be repeated
- 3. Set the background image Location: background-position
2. Value: xy take the pixel value: X: indicates the offset from the background image in the horizontal direction of the image shifted to the right indicates a positive value, a negative value indicates offset to the left image y: vertical offset distance of the background image value represents image offset downwards, a negative value indicates image shifted upward Note: binding "sprite" background image adjustment element to achieve, this technique is called "Smart technology" take percentage reference element size calculates horizontal and vertical offset distance 0% 0 %: background image in the upper left elements 50% to 50%: background image at the intermediate element 100% 100% : background image is displayed in the lower right corner element determining the position of the background image azimuth values X : left / Center / right Y: Top / center / bottom If only the key in one direction, the other direction is the default center
4. Set background image size properties: background-size Value: XY XY represent the width and height of the background image pixel value percentage: reference element image width and height dimensions calculated background magnitude Cover: shows a geometric image enlarged to completely cover element , excess invisible contain: shows a geometric image receiving element is just stretched, can not exceed the element size, or may cause the background image can not be completely covered effect element 5. the background properties shorthand properties: background values: url () repeat position Note: a background property value in the order above background-size separately provided
Fifth, form elements in two ways for writing the drop-down list?
<input type=text list=list1>
<datalist id=list1>
<option> recommended option 1 </ option>
<option> recommended option 2 </ option>
</datalist>
<select size=1 >
<option> Option 1 </ option>
<option> Option 2 </ option>
<option selected >选项三</option>
</select>
</select>