table of Contents
css layout basis
1, the layout related tags
<div></div>Partition or section defines the document<span></span>This is an inline element, it does not make sense<header></header>HTML5 new definitions section or page header<footer></footer>HTML5 new definitions section or page footer<main></main>HTML5 new labeling requirements for the main content of the document.<main>Content elements to the document, it should be unique. It should not contain duplicate content appears in the document, such as the sidebar, navigation, copyright information, stop signs or search form. IE is not identified<nav></nav>New HTML5 represents the links in the navigation section in the document if there is "before and after" button, you should put it in the elements<section></section>HTML5 new definition of the document section is generally not recommended content that does not use the title of the section<article></article>HTML5 new definition of articles forum posts newspaper articles blog entry user reviews<aside></aside>HTML5 new content, related auxiliary information, such as the sidebar
2, box model
2-1 What is the box model
All HTML elements can be considered as box in CSS, "box model" is the term used for design and layout.
Is a box package surrounding HTML elements on the nature of the CSS box model, comprising: margin, border, padding, and the actual content.
Cartridge model allows us the space between the other elements and the elements are placed around the element border.
- Margin (margins) to clear the area outside the border is transparent from the outside.
- Border (border) around the inner and outer margins content border.
- Padding (padding) to clear the area around the content, padding is transparent.
- Content (content) the contents of the box to display text and images.
2-2 Block-level elements and inline elements (inline element)
Block-level elements
- Always start on a new line, to occupy an entire row ;
- Height, line height and margins and padding can be controlled;
- The default is 100% of the width of a container, a width setting unless
- It can accommodate inline elements and other block elements.
Inline elements
- And other elements on one line ;
- High, high, and margin line and padding portion can be changed;
- Only the width and content-related;
- Inline elements can only contain text or other inline elements.
- Only the outer boundary of the left and right to work, all play a role in the margins
Conversion block-level elements and inline elements
display: block | inline | inline-blockThe relationship between the 2-3 box model
document tree
Child element of the parent element descendant elements of ancestor elements siblings
Standard document flow
- Inline element does not occupy a separate space, attached block elements, inline elements without their own area. It is also a node in the DOM tree, in this block elements and upstream elements is no difference.
- Block elements are always shown in the form of a block out sequentially and vertically arranged blocks with the same level of sibling about autostretch until inclusive of its elements, not side by side in the horizontal direction.
Positioning a standard cassette principle in stream
- Horizontal margin between inline elements
- Vertical margin between block elements (collapse margin)
- Nested margin between the box (the child of the parent element combined margin)
- The margin is set to a negative value
Relevant CSS box model attributes
Layout Properties
display
| 值 | 描述 | | ------------ | ---------------------------------------------------- | | none | 此元素不会被显示。 | | block | 此元素将显示为块级元素，此元素前后会带有换行符。 | | inline | 默认。此元素会被显示为内联元素，元素前后没有换行符。 | | inline-block | 行内块元素。（CSS2.1 新增的值） |float
| 值 | 描述 | | ------- | ---------------------------------------------------- | | left | 元素向左浮动。 | | right | 元素向右浮动。 | | none | 默认值。元素不浮动，并会显示在其在文本中出现的位置。 | | inherit | 规定应该从父元素继承 float 属性的值。 |clear
| 值 | 描述 | | ------- | ------------------------------------- | | left | 在左侧不允许浮动元素。 | | right | 在右侧不允许浮动元素。 | | both | 在左右两侧均不允许浮动元素。 | | none | 默认值。允许浮动元素出现在两侧。 | | inherit | 规定应该从父元素继承 clear 属性的值。 |visibility
| 值 | 描述 | | -------- | ------------------------------------------------------------ | | visible | 默认值。元素是可见的。 | | hidden | 元素是不可见的。 | | collapse | 当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。 | | inherit | 规定应该从父元素继承 visibility 属性的值。 |overflow
| 值 | 描述 | | ------- | -------------------------------------------------------- | | visible | 默认值。内容不会被修剪，会呈现在元素框之外。 | | hidden | 内容会被修剪，并且其余内容是不可见的。 | | scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 | | auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 | | inherit | 规定应该从父元素继承 overflow 属性的值。 |overflow-x
overflow-y
size
- width / max-width / min-width
- height / max-height / min-height
Inner padding
- padding / padding-left / padding-right / padding-top / padding-bottom
Margin
- margin
- margin-left
- margin-right
- margin-top
- margin-bottom
3, float
What is a floating 3-1
- The CSS Float (floating), other elements around the element can be pushed to the left or right
- Set floating out of the ordinary document flow
- Floating elements are block-level elements becomes
- If you do not set the width will narrow as possible
- Elements after the floating element will focus on the elements before it floated elements will not be affected.
3-2 disposed Floating
.item {
float:left
}
.item {
float:right
}
/*float 属性的默认值是 none 表示没有浮动*/3-3 Clear float
Floating box next row block is shortened, thus leaving room to the floating frame, floating line box around the block.
Therefore, creating a floating box to make the text around the image:
To prevent line box around the floating box, the box needs to apply the clear property. Clear attribute values may be left, right, both, or none, which indicates that the border should not float next frame.
clear: both
clear: left
clear: right3-4 floating experiment
Achieved following implementation
A first floating div
Providing a second floating div
Provided with a third floating div
The third direction changing floating
A second floating direction change
All left floating, the first increase in height
Affect the use of clear property clear float
Extended box height (the height of the elements and the floating elements)
The first letter of a paragraph float
Pictures float
Simple floating layout
3-5 CSS float property related summary
- float value: none (Default) / left / right
- clear value: none (default) / both / left / right
3-6 small floating layout Case
4, positioning
4-1 Relative positioning
- Using relative positioning of the box will be relative to its original position, by shifting a specified distance, to reach the new location
- Using relative positioning of the box, is still the standard stream has no effect on the parent block box brothers
.box {
position: relative;
top: 10px;
left: 20px;
}4-2 absolute positioning
- Use absolute positioning a box with its "recent" and "has been located," the "ancestor" offset basis. If you do not already positioned "ancestor", then the browser window will be positioned as a benchmark
- Absolute positioning frame out from the standard flow, which means that they locate their box after the brothers had no effect, other box if the box does not exist
.box {
position: absolute;
top: 10px;
left: 20px
}4-3 fixed positioning
A reference to the browser window
when scrolling window, position remains unchanged
.box {
position: fixed;
top: 10px;
left: 20px;
}4-4 spatial location
- Use css property
z-indexset stacking order of elements. Has a higher stacking order of the elements will always be in front of the lower stacking order of the elements. - z-index is only effective in the positioning element
4-5 locate the relevant CSS properties summary
- position static (default value) / relative / position / fixed
- top
- left
- right
- bottom
- z-index auto (default value) / Digital