intouch负值显示0_17、定位的盒子居中显示

盒子居中显示

margin: 0 auto; 只能让标准流的盒子居中对齐，脱标的盒子无法居中；

定位的盒子居中：先向右走父级盒子的一半50%，然后再向左走子盒子的一半(margin-left:负值)；

body {

margin: 0;

padding: 0;

}

.box {

height: 500px;

background-color: #aaa;

position: relative;

}

.nav {

width: 960px;

height: 60px;

background-color: #666;

position: absolute;

bottom: 0;

/*首先走到父盒子的一半*/

left: 50%;

/*然后使用负数，往回走，走子盒子的一半*/

margin-left: -480px;

}

顺风盒子居中

body,ul {

margin: 0;

padding: 0;

}

.banner {

width: 1259px;

height: 472px;

margin: 0 auto;

position: relative;

}

.search {

width: 960px;

height: 60px;

background-color: #666;

position: absolute;

bottom: 0;

left: 50%;

margin-left: -480px;

}

.search ul li {

list-style: none;

}

.search ul li {

float: left;

}

.search ul li a {

display: inline-block;

width: 160px;

height: 60px;

line-height: 60px;

text-align: center;

color: #fff;

text-decoration: none;

}

.search ul li a:hover {

background-color: #fff;

color: #000;

}

.search ul li a.one:hover {

background-color: #333;

color: #fff;

}

.login {

position: absolute;

left: 149px;

bottom: 56px;

}

.sj {

position: absolute;

left: 223px;

bottom: 48px;

z-index: 1;

}

• 运单查询
• 运费查询
• 时效查询
• 收送查询
• 客户查询
• 客户查询

注意

标签包含规范：

div可以包含所有标签；

p标签不能包含div、h1等标签；

h1可以包含p，div等标签；

行内元素尽量包含行内元素，行内元素不要包含块元素；

规避脱标流

尽量使用标准流。

标准流解决不了的使用浮动。

浮动解决不了的使用定位。

margin-left: auto:意思就是左边自动往右边冲，直至冲不动了，所以使用该样式的会在父盒子的最右边；

body,ul {

margin: 0;

padding: 0;

}

.box {

width: 200px;

height: 200px;

background-color: red;

margin: 0 auto;

}

.nav {

width: 50px;

height: 30px;

background-color: aliceblue;

margin-left: auto;

}