A .CSS box model (BoxModel)
1. Basic Concepts
The so-called box model: that the layout elements in HTML pages viewed as a rectangular box, which is mounted container contents.
Box model consisting of: borders, margins, padding, content.
2. Border (border)
(1) the composition of the border:
Width, style, color
border-with: 粗细 /* 一般用px作为单位*/
border-style：样式（ solid实线 dashed 虚线边框 dotted 点线边框 )
boder-color：颜色
demo
div {
width: 300px;
height: 200px;
border-width: 5px;
border-style: solid;
border-color: pink;
}
(2) Composite wording:
border: width style color (没有顺序）
(3) write separate border
Set on the border is blue, the other red
writing a
div {
width: 200px;
height: 200px;
border-top: 1px solid blue;
border-bottom: 1px solid red;
border-left: 1px solid red;
border-right: 1px solid red;
}
Writing Second, the use of laminate
div {
width: 200px;
height: 200px;
border: 1px solid red;
border-top: 1px solid blue;
}
(4) Form merge adjacent border
The reason
the two adjacent border of the table, overlay thickness will affect the appearance, can be used border-collapseto merge
demo
table,
td,
th {
border: 1px solid pink;
border-collapase: collapase
font-size: 14px;
text-align: center;
}
Precautions:
Borders will affect the size of the box, set the size of the box when available, minus the size of the border with the actual measurement box size. (Provided that the box set, widthand height)
2. inner margins (padding)
Padding is padding the border and content.
(1) separate from the wording
div {
width: 200px;
height: 200px;
padding-top: 1px ;
padding-bottom: 1px ;
padding-left: 1px ;
padding-right: 1px ;
}
(2) Composite wording
padding: 5px; 代表上下左右的都有内边距
padding： 5px 10px; 代表上下内边距是5px 左右是10px
padding: 5px 10px 20px; 代表上边距5px ，左右10px 下边距20px
padding :5px 10px 20px 30px; 代表上边距5px,右边距10px,下边距20px,左边距为30px（顺时针）
Precautions:
1.padding affect the actual size of the box, the box will stretch (provided that the box set, width and height)
2. Set the box size in the time to use actual measurements of size minus the padding.
The actual size of the box to set the size = padding +
demo
/*比如要设置一个200px*200px的盒子，而padding等于20*/
div {
width: 160px;
height: 160px;
padding: 20px;
}
/*最后盒子的实际大小为（160+40）px *（160+40）px
3. box margins (margin)
margin attribute for controlling the distance between the box and the box.
(1) write separately
margin-left 左外边距
margin-right 右外边距
margin-top 上外边距
margin-bottom 下边距
Note:
margin and padding shorthand as complex
(2) use of margins
Margin allows block-level box is horizontally centered, conditions to be satisfied:
1, the width of the boxes must be specified width
2. box around the margins are set to Auto
Demo
.div {
width: 200;
margin: 0 auto;
}
Note:
If the element is a block element or horizontal line the inner center row can be added to the parent element of text-align: center.
(3) margins of the cover
Use block-level vertical margin defined from the outside when the cover margins may occur. (Large overwrite a small value, only the value is large final margin)
<style>
.div1 {
width: 200px;
height: 200px;
background-color: red;
margin-bottom: 10px;
}
.div2 {
width: 200px;
height: 200px;
background-color: blueviolet;
margin-top：30px;
}
</style>
<body>
<div class="div1">盒子一</div>
<div class="div2">盒子二</div>
</body>
Note
margin size not (10 + 30) px combined, but 30px (large numerical values covering a small margin)
(4) margin collapse issue
Conditions generated
1. two nested relationships (parent-child relationship) of block elements, disposed on the sub-margin-top element, this action will margin-top box to the parent. (Box collapse resulting parent)
2. Two nested relationships (parent-child relationship) of block elements, the parent element and the child elements set both margin-top, margin-top two are applied to the parent box (causing parent box collapse greater)
prior to collapse
two boxes are not set margin-top
<style>
.father {
width: 200px;
height: 200px;
background-color: red;
}
.sun {
width: 100px;
height: 100px;
background-color: blueviolet;
}
</style>
<body>
<div class="father">
<div class="sun"></div>
</div>
</body>
Effect
after collapse
wherein a margin-top box provided
<style>
.father {
width: 400px;
height: 400px;
background-color: red;
margin-top: 50px;
}
.sun {
width: 200px;
height: 200px;
background-color: blueviolet;
margin-top: 60px;
}
</style>
<body>
<div class="father">
<div class="sun">盒子二</div>
</div>
</body>
The effect of
treatment
Method a: parent element definition frame
border: 1px solid transparent
Method two: a parent element within the margins defined
padding: 1px
Method three: You can add a parent element
overflow: hidden
4. Clear inner and outer margins
Many inside and outside the margins with page elements, and different default browser are not the same, and therefore between the layout, we must first remove the inner and outer margins of page elements.
* {
padding: 0;
margin: 0;
}
NOTE:
inline elements for compatibility, only possible provided left and right margins, to set the top and bottom margins can be converted into block elements within block element or row.
Two floating (float)
1. The nature of the layout of the page
With css to put the box. The box corresponding to the display position.
Three traditional layout: standard stream, floating and positioning.
2. Standard flow
In accordance with the standard flow is a good default arrangement. (Basic layout mode)
(1) The block-level elements will be on a separate line, from top to bottom order. (HR div ~ P h1 of Table H6 UL OL DL form)
(2). In the order that the elements, from left to right order within a row, across the edge of the parent element wrap. (Span ai em etc.)
3. Floating
grammar:
选择器 { float: 属性值；00
}
Property Value
| Property Value | effect |
|---|---|
| none | Element does not float (default) |
| left | Left floating |
| right | Floating right |
(1) floating action:
Changing the arrangement of the elements of the label. The most typical use of a plurality of block elements so arranged and displayed on one line.
4. The flying characteristics
(1) off the mark
- From the position specified by the standard normal stream control movement (float) to (commonly known as floating)
2. Floating box does not retain the original position (the box may be standard stream placeholder)
(2) the floating element in one row
If a plurality of boxes are set floating, they will be displayed in a row, and the tip are aligned.
(3) left and right float float
** Note:**
- Floating elements together against each other (no gap), if the width of the box do not fit on the parent floating boxes, boxes extra separate line will be aligned.
- Any element can be floated within a block row having similar characteristics after setting the floating element.
- If the width of the block-level box is not provided, and the default width as wide as the parent, after addition floating, its size is determined according to the content. Floating element often used with standard flow parent
4. The first arrangement of a standard vertical position of the parent element, after the inner sub-element floating around the arrangement position of use, a first composite page layout criterion.
5. A plurality of sub-box inside the box, wherein if a floating box, then the other is also due to the floating of the box, to avoid causing problems
6. The floating box only affect the standard flow behind the floating box, does not affect the foregoing standard streams.
5. Clear float
(1) The reason
Since the parent element in many cases not to set the height, the sub-box does not take up the floating position of the last parent element height is 0, the following criteria will affect the flow box. (Parent did not affect the child's height below the floating box layout)
(2) the nature of
Eliminate the influence of the floating element.
(3) Strategy
Closed floating, floating just let influence within the parent box does not affect the parent box outside the box.
6. Clear float method
(1) additional labeling laws (partition method)
Additional standard method refers to the end of the floating element to an empty block tags.
选择器 { clear: 属性值
属性值： left right both
demo
<div style="clear:both"></div>
Advantages:
easy to understand, easy writing
disadvantages:
add a number of meaningless tag, structured poor.
(2) the parent add overflow
overflow: hidden | auto |scroll
(3) :afterPseudo element method
：after Mode is an upgraded version of the additional labeling laws. Also added to the parent element
.clearfix:afterr {
content: "";
display: block;
height: 0;
clear: bloth;
visibility: hidden;
}
.clearfix { /*IE6,7专有 */
*zoom: 1;
}
(4) Pseudo element method bis
Double pseudo-element method, is added to the parent element
.clearfix:before,clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom: 1;
}
VIII. Positioning
1. Locating and floating
1. floating block level allows multiple boxes are arranged in a row with no gap display, often used in horizontal arrangement cassette.
2. Locate the box that allows freedom of movement or a position in fixed on the screen within a box, and can suppress other boxes.
2. Positioning composition
定位 = 定位模式 + 边偏移
(1) positioning mode (position)
| value | Semantic |
|---|---|
| static | Static positioning |
| relative | Relative positioning |
| absolute | Absolute positioning |
| fixed | Fixed positioning |
(2) Edge Bias
| Attributes | Examples | description |
|---|---|---|
| top | top: 80px | Top offset |
| bottom | bottom：80px | Bottom Offset |
| left | left: 80px | LeftOffset |
| right | right: 80px | Right shift |
4. Locate classification
(1) static positioning (no positioning)
选择器 {
position: static;
}
静态定位按照标准流摆放位置，它没有边偏移
(2) located opposite (relative)
选择器 {
position: relative;
边偏移： 值；
}
Features:
- When moving the position with reference to their original position
2. Do not mark off, to retain its original position.
(3) Absolute positioning (absolute)
选择器 {
position : absolute
边偏移： 值；
}
Features:
1. If no parent or the parent element is not located, the browser places to turn positioned (Document document)
2. If a plurality of parent element, and has positioned (relative, absolute, fixed positioning), places recently a parent element to locate.
3. Absolute positioning will not occupy its original position (off label)
(4) relative to the parent sub absolute
Cause:
Parent box needs to occupy the position (relative positioning), occupies a position of the sub-boxes need not be moved inside the box in the parent, so the absolute positioning.
Note
if the parent does not need to occupy the position of the box, the father of the child absolutely must also may encounter.
(5) fixed positioning
选择器 {
position: fixed;
边偏移：值；
}
Precautions:
1. Fixed positioning is visual browser window as a reference point movement elements, and no relationship between the parent element.
2. Fixed positioning is not occupied position (subscript Torr)
(6) positioned viscosity
选择器：{
position: sticky;
边偏移： 值；
}
important point:
- Visual browser window as a reference moving element.
2. Location viscous occupies position - You must add a top right left bottom of them.
4. It will be appreciated as the positioning and adhesively bonded fixedly positioned, but poor compatibility, IE is not supported.
The positioning of the stacking order
选择器： { z-index: 1;}
Notes:
1. The value may be a positive integer, 0 or complex, the default is auto, the larger the value, the more against the upper cassette
2. If the property values are identical, the order of writing, the surpass
3. Only boxes have positioned z- index property
6. Locate the expansion
Specificity (1) located
1. Absolute positioning is positioned and fixed and floating similar:
the line 2. Add absolute or fixed element may be positioned directly height and width
3. Add absolute block elements positioned or fixed, if not to the width or height, is the default size size of the content.
(2) off the subject box does not trigger the collapse of margins
Floats, absolute positioning (fixed positioning) elements will not trigger the problem margins merger.
(3) positioning and floating
Absolute positioning (fixed positioning) completely suppress all of the contents of the standard stream below.
Floating only suppress the following box, but does not suppress the flow inside the box standard text and pictures.