## Page ## production process
Foreword page production process:
<ul>
Production process <li> page </ li>
<Li> how to divide the area </ li>
<Li> CSS knowledge divided areas </ li>
</ul>
### pages making process ###
Good design by the designer draft, then made by our front-end engineers page:
<br> 1. divided area of the page (the most important and complex)
<br> 2. filling content
How to divide the region ### ###
<ul>
<Li> with a suitable element to represent different regions (HTML) </ li>
<Li> position of the setting area, size, background style (CSS) </ li>
</ul>
CSS knowledge ### ### divided areas
Each element generates a rectangular area on the page, CSS said rectangular region a box (Box)
Box Knowledge:
<ul>
<Li> box model: Composition of a single box </ li>
<Li> visual formatting model: arranging a plurality of boxes (the interaction between the box and impact) </ li>
<Li> Layout: practical </ li>
</ul>
## box model ##
### Box Model Overview ###
#### boxes Classification ####
Box type produced by different elements may vary, one element, what kind of box generated, depending on its CSS display property
<br> display: none => does not generate box
<br>display:innline=>行盒
<br> display: block => block boxes
<br> display: Other values => Other boxes
Composition #### #### box
<br> margin: Margin
<br> border: Borders
<br> padding: padding
<br> content: content
<br> Note: additional knowledge: CSS size => In CSS, there are many attributes of value, it must be represented by a dimension, a dimension of value and units of the
<br> CSS dimensions in common:
<br> 1.px: pixel, the absolute size of the computer screen by a lot of small dots, each dot is a pixel (so other unit of measure, calculated after the browser will become px)
<br> 2.em: relative size, relative to the current element font size (px)
<br> 3.%: percentage, at different CSS properties, have different meanings
<br> Note 2: it comes to CSS properties =>
<br> width: width, can not be inherited, the default value of auto, when the content exceeds the width of the content will be automatically cut off the line change, the English word is truncated, a Chinese characters is truncated.
<br> height: height, can not be inherited, the default value auto
<br> overflow: when handling contents overflow, can not be inherited =>
<br> 1.hidden: partially hidden overflow
<br> 2.scroll: scroll bar appears in the horizontal and vertical directions, if overflow scroll bar available, otherwise unavailable.
<br> 3.auto: When content overflows in the horizontal or vertical direction, scroll bars appear only in that direction, or do not appear (the default value)
<br> min / max-width / height: minimum / maximum width / height, can not be inherited, a default value 0px, to ensure the width / height greater than this value can not be smaller than the attribute value /
Margins within ## ##
###meaning###
Represents the distance between the border of the content is divided into upper (Top), the right (right), lower (bottom), left (left) four directions
### CSS-related attributes ###
padding-top: upper inner margin can not be inherited, a default value 0px, other values of em,%
<br> padding-right: the right internal margins, can not be inherited, the default value 0px, other value em,%
<br> padding-bottom: in the bottom margin, can not be inherited, the default value 0px, other value em,%
<br> padding-left: the left margin, not inherited, the default value 0px, other value em,%
<br> padding: Sketch CSS property is not real property, it just provides a quick CSS wording =>
<br> 1. padding: padding inside the top margin in the lower left and right margins padding
<br> 2. padding: padding under the padding on the inside left and right margins
<br> 3. padding: top to bottom, left and right margins Nene
<br> 4. padding: top to bottom, left and right inner
##frame##
###meaning###
Dividing the inner and outer boundaries, the upper (Top), the right (right), lower (bottom), left (left) four parts
### CSS-related attributes ###
1.border-top-style: the style of the border, can not be inherited, the default value is none, other values =>
<br> (1) solid: solid line
<br> (2) dashed: dotted line
<br> (3) dotted: dot matrix
<br> (4) double: double solid line
<br> (5) Other
<br> 2.border-top-width: the thickness of the border, can not be inherited, a default value Medium, other values =>
<br> (1) medium: Medium
<br>(2)thin:细
<br>(3)thick:粗
<br>(4)px
<br>(5)em
<br> 3.border-top-color: the color of the border, can not be inherited, the default value currentcolor, other values =>
<br> (1) black: black
<br> (2) white: white
<br> (3) gray: gray
<br> (4) other colors
<br> (5) rgb: deployment with three primary colors red, green and blue, each color value is a decimal number: 0-255, writing format: rgb (red, green, blue)
<br> (6) HEX: deployment with three basic colors red, green and blue, each color value is a hexadecimal number 00-ff, writing format: # red, green and blue, the number must be # 6, or three values
<br> 1.border-top: Sketch property, writing format: border-top: thickness Style Color
<br> 2. right border: border-right-XXX (ibid)
<br> 3. bottom border: border-bottom-XXX (ibid)
<br> 4. left border: border-left-XXX (ibid)
<br> 5.border-width: Sketch properties: a thickness simultaneously all borders
<br> 6.border-style: Sketch property: Setting the style of all borders
<br> 7.border-color: Sketch property: all at the same time set the color of the border
<br> 8.border: Sketch properties: Setting the thickness of all the borders, styles, colors, writing format: border: thickness Style Color
## Margin ##
###meaning###
Similar to the distance between the box and the box, specific rules are complex, elaborate visual formatting model
### CSS-related attributes ###
1.margin-top: from the outside, can not be inherited, a default value 0px, other values => em,%
<br> 2.margin-right: the right margins, can not be inherited, the default value 0px, other values => em,%
<br> 3.margin-bottom: bottom margin, can not be inherited, the default value 0px, other values => em,%
<br> 4.margin-left: left margins, can not be inherited, the default value 0px, other values => em,%
<br> 5.margin: Sketch property, writing format =>
<br> (1) margin: Margin on the right bottom margin Left Margin Margin
<br> (2) margin: the margins left and right margins bottom margin
<br> (3) margin: up and down left and right margins Margin
<br> (4) margin: vertical and horizontal margins
<br> 6. The browser's default style margin: -webkit-XXX, -webkit- browser vendors prefix
## additional knowledge ##
### sub-box ###
1. The border of the housing (border-box): the border, padding, content composition, debugging browser, displays the page element size refers to the size of the background border cartridge, elements, default coverage border of the housing, through the background-clip attribute modification =>
<br> (1) the coverage of the background, not inherited, a default value: border-box
<br> (2) Value:
<br> border-box: background border box cover
<br> padding-box: Background filled box cover
<br> content-box: background covering the contents of the box
<br> 2. filling box (padding-box): the padding, content composition, in the strict sense, overflow refer to the overflow, filling refers to overflow box
<br> 3. SUMMARY cartridge (content-box): composed of a content, by default, width and height attributes, content refers to the width and height of the box, width and height setting ranges may be modified by a box-sizing property, box-sizing property =>
<br> (1) the coverage of the background, not inherited, a default value: content-box
<br> (2) Value:
<br> content-box: indicates the aspect of the content of cartridge
<br> border-box: box represents the width and height of the border