CSS box model
- margin (margins) : used to control the distance between the element by element; margin most basic purpose is to control the spacing elements surrounding space, spaced apart from the purpose of the viewing angle.
- Border (Borders): around the inner and outer margins content border.
- padding (inner fill) : used to control the distance between the content and the frame;
- Content (content): the contents of the box, displaying text and images.
margin (Margin)
Shorthand:
Shorthand default left in clockwise order according to the lower right
padding (inner fill)
Shorthand:
Order: on the right lower left
Supplementary padding commonly used shorthand way:
- A, for the four sides;
- Providing two, one for the first - next, the second for left - right;
- If three provided, for the first, second for left - right, for the third;
- Providing four parameter values, will be the - Right - lower - left order to act on the four sides;
Float float
In CSS, any element can float.
Floating element generates a block-level box, regardless of what element itself.
About two characteristics of floating:
- The block floating may be moved left or right until it hit the edge of the outer frame includes a frame or the other until the floating box.
- Since the general flow of the document is not in the floating box, so the ordinary flow of documents in the block box behave like a floating box does not exist.
Are three values
left: left-floating
right: right-floating
none: default value, does not float
Floating flaw:
From the document flow, causing the collapse of the parent tag
Div class label class c1 is present as c2, c3, the div sub-label, two floating sub parent tag label not to collapse the filler
Clear float side effects:
Parent tag plus the following class
overflow overflow property
hidden: content will be trimmed, and the remaining content is not visible.
scroll: content will be trimmed, the browser will display the scroll bar to view the remaining contents
auto: content will be trimmed, the browser will display the scroll bar to view the remaining contents
Example circular Avatar
Locate
relative (relative positioning)
It is positioned opposite the original position of the element with respect to the flow of the document, i.e., to their original position as a reference
absolute（绝对定位）
定义：绝对定位是相对于父标签的位置，如果没有父标签就以body为父标签
fixed（固定定位）
fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动
z-index
设置对象的层叠顺序
- z-index 值表示谁压着谁，数值大的压盖住数值小的，
- 只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
- z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
opacity
用来定义透明效果。取值范围是0~1，0是完全透明，1是完全不透明。
