CSS-- cassette positioning, centered with floating
HTML of each element is a box
browser to parse HTML documents, arrange them according to the attributes of the box. Each element defaults to the standard document flow positioning
Standard document flow : refers to elements arranged in a standard way after the browser reads the HTML content. Browser HTML elements are arranged according to the read tag sequence, in the arrangement from left to right, top to bottom. Inline elements arranged from left to right, top to bottom alignment block-level elements.
It may be the element row by block-level way to show the display attributes, and can set the width and height. Also the block-level element row may be displayed.
display argument can: Block , inline , inline-Block and none .
给元素加上 display:none; 属性，元素不但会隐藏还会隐藏它的物理空间。
给行内元素加上 display:block; 属性，行内元素就会具有块级元素的属性。
给块级元素加上 display:inline; 属性，行内元素就会具有行内元素的属性。
给行内元素加上 display:inline-block; 属性，仍为行内元素，但是可以设置width及height属性称为行内块元素。CSS Positioning
Generalized "targeting" means an element placed in a certain position, the positioning is achieved by the HTML attribute position.
Positioned in a position values are divided into the following four categories:
position:static; 静态定位（默认定位）
position:relative; 相对定位
position:absolute; 绝对定位
position:fixed; 固定定位1, static positioning
When the position of the value of static when, that is, static positioning .
The default value is the position, using static positioning of the label will be arranged on the page in accordance with the organization's standard document flow. General positioning elements are all static positioning.
2, the relative positioning of
When the position property relative time, that is, the relative positioning (reference position of the element itself) .
Page arrangement is provided for the relative positioning of the elements according to the rules of standard document stream, the relative positioning element may be provided which is left, right, top and bottom offset properties.
When the reference standard document offset from the original position in the flow element, the offset appears only after a change in display coordinates, but its position in the standard flow of the document without any change, i.e. without departing from the standard document flow .
<head>
<style type="text/css">
#box1,#box2,#box3{
width: 150px;
height: 150px;
float: left;
background-color:yellow;
}
#box2{
background-color:red;
position:relative; /*相对定位（参照元素本身的位置）*/
left:50px;
top:50px;
}
</style>
</head>
<body>
<!-- 相对定位 -->
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
</body>Demonstration effect diagram:
3, absolute positioning
When the position of the value is set to absolute time, that is, absolute positioning , absolutely positioned elements will be out of standard document flow , unrestricted standard document flow.
Elements can be provided by left, right, top, and bottom page attributes and is offset with reference to absolute positioning elements which do not take up space in the flow of the document the standard, the standard does not affect the flow of the document element.
1, box2 is absolute positioning, the default is the top left corner of the body tag as a reference when setting left and top. (Almost do not!)
2, if the targeting its container layer [fathers element (id as Box]) is set to relative, the second layer [child generation element (class of BOX2)] will be the top and left [parents element (id to box)] moves the reference layer (i.e., in the top left corner as the reference box id box), referred to as a reference layer comprising a block. ( Develop common ! Follows :)
<head>
<style type="text/css">
#box{
position: relative; /* 相对定位 */
}
.box1,.box2,.box3{
width: 150px;
height: 150px;
float: left;
}
.box1{
background-color: yellow;
}
.box2{
background-color:red;
position:absolute; /* 绝对定位（参照父辈元素左上角的位置）*/
left:50px;
top:50px;
}
.box3{
background-color: blue;
}
</style>
</head>
<body>
<!-- 绝对定位 -->
<div id="box"> <!-- 父辈元素 -->
<div class="box1"></div>
<div class="box2"></div> <!-- 子辈元素 -->
<div class="box3"></div>
</div>
</body>Demonstration effect diagram:
4, fixed positioning
When the position value of fixed time, namely fixed positioning , fixed positioning and absolute positioning similar, will out of the standard document flow .
With reference to different absolute positioning, with reference to the fixed positioning Windows browser or other display device, as the user drags the scroll bar of the browser window, the holding element fixedly positioned with respect to the same position of the browser window.
<head>
<meta charset="UTF-8">
<style type="text/css">
#box1{
position: fixed; /*固定定位*/
width: 150px;
height: 150px;
border: 2px solid red;
background-color: yellow;
margin-top: 10%;
margin-left: 10%;
}
</style>
</head>
<body>
<!-- 固定定位 -->
<div id="box1">固定定位</div>
<div id="box2">
li{测试元素 $}*50
</div>
</body>Demonstration effect diagram:
Floating box
在HTML中，可以通过float属性将块级元素向左或向右浮动，直至其外边缘碰到包含它的元素或另一个浮动元素的边框为止。
多个浮动的元素可以显示在同一行内，浮动元素会脱离标准文档流，不占标准文档流中的位置。
盒子的浮动实际是通过设置元素的float属性来完成的，其属性主要取值有none、left和right。
当float为none时，不浮动，此时元素会按照默认的标准文档流的方式来处理。
当float为left时，向左浮动，此时元素会脱离标准文档流，不占文档流中的位置空间。
当float为right时，向右浮动，此时元素也会脱离标准文档流。
浮动塌陷:
如果父元素只包含浮动元素，且父元素未设置高度和宽度的时候。那么它的高度就会塌缩为零。
处理浮动塌陷:
1、给父级元素设置高度
2、设置空div，利用clear属性:both，left，right不占文档流中的位置空间。
3、使用overflow:hidden;属性
3.1、清除浮动
3.2、将超出父级盒子多余的部分给隐藏掉
4、使用伪元素
<head>
<style>
.content {
height: 200px;
background-color: pink;
}
.box {
padding:10px 50px;
background-color: yellow;
/*设置浮动*/
float: left;
}
/*清除浮动
伪元素：
::after <!--在元素之后添加内容-->
::before <!--在元素之前添加内容-->
::first-line <!--向文本的首行添加特殊样式-->
::first-letter <!--向文本的第一个字母添加特殊样式-->
*/
.clearfix::after {
content: "."; /*在伪元素中content属性必不可缺，建议向清除浮动的伪元素内容内添加“.”*/
/*清除浮动（both:清除左右浮动）*/
clear: both;
/*把行内元素转化为块级元素*/
display: block;
/*优化操作*/
line-height: 0;
font-size: 0;
opacity: 0;
height: 0;
}
</style>
</head>
<body>
<div class="nav clearfix">
<div class="box">1</div>
<div class="box" style="background-color:red;">2</div>
<div class="box">3</div>
<!-- 此处【伪元素】清除浮动 -->
</div>
<div class="content">
<!-- 内容区 -->
</div>
</body>演示效果图：
盒子居中
元素上下居中：
margin:0 auto; /* 元素上下居中 */The properties of auto with margin requirements achieve about :
1, need to be centered sub-block level box element.
2, sub-box need to set the center width of the content area.
3, need not be separated from the center of the sub-box document flow.
Elements up and down the middle:
<head>
<style>
.parent {
width: 200px;
height: 200px;
background-color: teal;
position: relative;
}
.child {
width: 100px;
height: 100px;
background-color: pink;
/*第一步：让子盒子的左上角为父盒子的中心点*/
position: absolute; /* 绝对定位*/
top: 50%; /*往下移动父盒子高度的一半*/
left: 50%; /*往右移动父盒子宽度的一半*/
/*第二步：让子盒子的中心点处于父盒子的中心点*/
margin-top: -50px; /*子盒子向上移动子盒子高度的一半*/
margin-left: -50px; /*子盒子向左移动子盒子宽度的一半*/
}
/* 圣杯布局和双飞燕布局 */
</style>
</head>
<body>
<div class="parent">
我是父盒子
<div class="child">我是子盒子</div>
</div>
</body>Demonstration effect diagram:
