※ visual formatting model
1. Visual formatting model (visual formatting model): a mechanism for CSS, which specifies how the page layout of multiple boxes.
2. Visual formatting model is a very complex mechanism, contains intricate CSS specification.
※Viewport
1. Viewport (viewport): visible window, generally refers to the viewable area of the browser
2. Viewport size is limited only by the visual impact of the size of the browser window, and unrelated to the content
3. When the size of the page content exceeds the viewport size, browser scroll bar will appear
※ block comprising
l comprises a block (containing block): Each element has comprises a block element it refers to
Typically, the element comprising a cassette block is its parent element content (content? Box
Root element (html) comprises blocks: a block containing the initialization (initial containing block)
l visual formatting model requires that all elements must prevent its containing block
l element comprising block size and location, as long as the two factors by
- Box model elements
- Positioning system elements
※ Positioning System Overview
Visual formatting model provides a total of three positioning system:
Conventional flow (normal flow)
Float (float)
Absolute positioning (absolute positioned)
Any element, must belong to one of the positioning system
Different positioning systems, comprising a block element size and location will be some changes
※ positioning determination system
The default value static position absolute positioning
The default value none float float
By default, the positioning element is a conventional flow
※ box model and positioning system
- Affect the positioning system box model is because the impact of auto worth calculation
※ The size of the box model -?%
- Block size is the percentage comprising
Percentage margin, padding, width: the width of the block containing the percentage
The percentage of height
- When the height of the block containing the content has nothing to do, with respect to the height of the containing block
- If the height of the block containing content related to how much, the setting is invalid
※ box model in size -? Auto
- Size affected positioning system
- Calculated according to the rules of different positioning systems
※ regular stream
- Conventional flow, also known as ordinary flow, document flow, ordinary document flow
- Conventional flow is the most common and positioning systems, are conventional flow positioning all the elements by default
auto value box model
horizontal direction
Size boxes on a conventional horizontal flow, must be equal to the width of the block comprises, if not, the forced margin? Right set to auto
Conventional shed:
- Cassette comprising horizontal center block: fixed width, left and right margin to auto
- Left and right cassette comprising projecting blocks: width auto, left and right margin is negative
Vertical direction
- margin to auto: 0px
- Cover fitness content: height to auto
Box location
- Sequentially placed on the box containing the vertical direction block
- First place: the writing order from top to bottom display HTML elements
- When the cassette occupies in the size of the entire box containing block size
- The vertical direction, if the two adjacent margins, merge the (folding)
- Vertical direction: horizontal direction from the outside is not merged
- Margin neighbor: there is no border between the two margins, padding, and content
- Merge: taking the maximum are positive, taking the smallest are negative, a negative one, the addition
Elastic layout
A box, if it is set to display property flex, the cartridge box becomes elastic (elastic container), of the box
All sub-elements, the project automatically becomes elastic. Flexible arranged in its own cartridge positioning system, affect the layout of the elastic only
Only the elasticity of the flexible pouch project
Attributes
flex-direction: Change the direction of the spindle
row row defaults
row-reverse reverse spindle from right to left
column by column from the arrangement down the spindle
column-reverse by the spindle from the bottom up
justify-content: Change the spindle on its way
flex-start starting a spindle arranged Default
flex-end aligned spindle end
center aligned with the center line of the spindle
Space-between left aside program, intermediate distribution mean
The average distribution of space-around all items
align-items: Change side shaft alignment
Default stretched stretch
flex-start aligned with the start point side shaft
flex-end side shaft end aligned
flex-center side of the shaft centerline aligned
flex-wrap
wrap (wrap)
nowrap (does not wrap)
align-content
Rules: elastic width automatically when the project, width and height adapt content. margin to Auto, it will absorb
The remaining space of the elastic container.
Project Properties
Order in order to change the elasticity of projects, from small to large order of arrangement
Change the compression ratio flex-shrink elastic items
1 Default
0 no compression
Increase the proportion of flex-grow to change the elasticity of the project
0 default does not increase
flex-basis items on the basis of width of the front elastic compression or growth, if not set, the default is auto, represents
Attribute value identical to the width
Sketch flex: grow shrink basis; also set to grow, compression, basic values
Way horizontal center
1. Text the middle level, where the character elements arranged text-aline: center;
2. a conventional horizontal flow cassette center block, setting the width of about auto m argin
3. The cassette of parent element to the flexible pouch, and set justify-content: center;
4. Set the parent element is an elastic cassette, centered around the required elements margin set to auto.
Vertical center
1. Text is centered vertically in the element, set the row height to the height of element
2. box containing the vertical center block, set the parent element is an elastic cassette side shaft alignment is centered align-items:
center
3. Set the parent element to the flexible pouch and the required margin vertical centering elements disposed to auto.
Horizontal center (including the center block)
1. setting the width of the left and right margin auto. (Conventional block flow cartridge, the elastic project [not fixed width])
2. The flexible pouch set justify-content: center, let elasticity project centered on the spindle. (Universal adaptation)
3. parent element arranged text-align: center, let row inside the cartridge, the cartridge centering block.
4. Absolute positioning elements, left: 0; right: 0; fixed width; left margin: auto.
5. margin-left: 50%; transform: translateX (-50%). [Margin, padding block width with respect to the percentage contained
Than] [] ultimate plan
Vertical center
1. The single line of text centered vertically disposed line-height of the parent element comprising a block height.
2. The flexible pouch disposed align-items: center, so that the elastic side project centered on the axis.
3. Absolute positioning elements, top: 0; bottom: 0; set high; vertical margin: auto
4. Absolute positioning elements, top: 50%; transform: translateY (-50%). [Ultimate party
case】
Absolute positioning element vertically centered horizontally
left：50%；top：50%；transform：translate（ -50%，-50%）；
The difference between the row and the block cassette cartridge
1. The line width cartridge can not be set high, all dimensions does not occupy space in the vertical direction, but the margin in the horizontal direction, border,
padding can. All the block size of the effective cartridge.
2. The row is truncated cassette in place, while not block boxes.
3. The cartridge only normal flow line (floating and absolute positioning will override the block is converted to the cartridge), when aligned with other cartridge end to end row
Access. There are many block cartridge positioning system, the positioning system each arranged in its own rules.
4. The rows and lines between boxes box blank is folded internally. Will not block boxes.
Pseudo class selector:
1.: hover, mouse suspended effect
2.: active, a / button activation effect element (the button)
3.: link, a style element unvisited
4.: visited, a style element visited
5.: checked, or is selected from the selected unit pattern
6.: focus, focusing style form element
7.: firstchild, first child element
8.: lastchild, last child element
9.: nthchild (2), a second sub-element;
10.: nthchild (2n) /: nthchild (even), the even-numbered sub-elements;
11.: nthchild (odd), odd-numbered sub-elements
Pseudo-element selector
1. :: before, a sub-element is internally generated, as the first child, and then select it
2. :: after, a sub-element is internally generated, as the last child element, select it and then
3.: selection, select the marquee text
Suffix \ 0: IE5 ~ IE7
Prefix *: IE5 ~ IE7
Prefix
_
: IE6 IE5 ~
Color property, so that non-IE browser is green, IE5 ~ IE6 red, IE7 brown, IE8 ~ IE11 black
color：green；
color\0:black；
*
color：brown；
_
color:red；
The percentage with respect to the height comprises a height of the block, which is effective with the proviso that: a block comprising highly computable
Html set to 100%, it is the height of the viewport.
CSS framework
bootstrap
Concept: priority mobile terminal, responsive grid system (layout 960)