Today, the two main learning label display and position: Chinese name is displayed and the location of these two elements is very important in front of the study, because css layout which will often use these two elements.
There are some remaining tags Example: margin, padding, border, line-height, overflow, z-index.
display：
Learn about several common attributes, inline, block, inline-block display in.
inline: the element becomes inline elements, with properties inline elements can be other inline elements in a row, they do not own line, can not change the height and width, can use all the elements in the padding, the only use left in the margin where and right.
block: block elements may be used, they can own line, if it is not set the width and height, it can automatically fill the width of the parent element, can change the width and height, can be used in any attribute element in the padding and margin.
inline-block: combines some of the features block and inline, both the inline elements can in a row in a row, there has been a block can modify the width and height, but also to use all the properties of the elements padding and margin.
Summary: the inline display line, block elements displayed at block, inline-block within the block row display.
position：
Learn about the most common position some of its properties: position-absolute, position-resative, position-fixed.
position-absolute: generating absolute positioning elements, the positioning element relative to the static element other than the parent, any element may be used to adjust the properties of any of the left and right down.
position-resative: generating a relative positioning element for positioning with respect to other normal place, and he will have a negative pixel movement: Example, as follows
position-fixed: to generate a fixed positioning element positioned relative to the browser window can be predetermined by the top, bottom, left, right, element attributes element.
Write more this word is not subject to the impact block elements and inline elements are.
css
} .div_1{ position: relative; left: 20px; } .div_2{ position: relative; left: -20px;
html
<div class="div_1">2033333333333</div>
<div class="div_2">卧室555555555555</div>
The remaining code to build a project can achieve its effect.
margin：
With my own language to understand it, the official language is too difficult to understand, the word is that it is intended to set margins, and margins there are four attributes are:
margin-top: on the margins
margin-right: Right Margin
margin-bottom: bottom margin
margin-left: Left Margin
It can be calculated margins browser can pixel, cm, percentages, inherit parent element, this element is also unaffected by the row and the elements of the block elements.
padding：
This is set within the margins, it has four attributes, it has the following four attributes to adjust the distance of the padded, padding it does not allow a negative value, and he does not support the use of block elements and the inner row elements.
padding-top: the padding
padding-right: right inner margin
padding-bottom: the bottom margin
padding-left: the left margin
line-height：
Setting the distance between the main line (line height), when used, it is a high percentage of the line, it is directly on the instance:
css
.small{ line-height: 90%; } .big{ line-height: 900% }
HTML
< The p- > it is to have a high standard line of the paragraph. In most browsers default row height is about 110% to 120%. </ P > < P class = "Small" > This is a paragraph with high standard line. In most browsers default row height is about 110% to 120%. </ P > < P class = "Big" > This is a paragraph with high standard line. In most browsers default row height is about 110% to 120%. </ P >
Renderings
Possible effect is not so intuitive, under a lot of understanding.
booths:
Is set the border edges of the width, color, dashed and solid lines, and the like css style, it padding, margin as attribute element has a predetermined, left, top, right, button, their difference is that it has a color, and edges the width of the actual situation as well as the size of the case, this element is an element belonging to the block, the block can be used substantially div element.
boder main attributes: boder-width (width), boder-color (color), boder-style (style)
overflow：
规定内容溢出元素框时发生的事情，以及其它的属性，下面例：
visible：内容不会被修剪，会呈现在元素框之外。
hidden：内容会被修剪，并且其余内容是不可见的。
scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit:规定应该从父元素继承 overflow 属性的值。
z-index:
属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面,简单的就是在图片上效果特别明显图片可以在字的后面。元素：
auto：堆叠顺序与父元素相等。
number：设置元素的堆叠顺序。
inherit：规定应该从父元素继承z-index的属性值。
代码：
css
img { position:absolute; left:0px; top:0px; z-index:-1; }
html
<h1>This is a heading</h1> <img src="/i/eg_smile.gif" /> <p>sssds登记数据库数据后即可</p>
总结：我是觉得前段的知识有很多，需要记得属性也有很多，所以对于我这样的小白来说也希望自己写的东西对于刚刚接触前端的知识的小白也有一定的帮助。