z-index和透明度
div {
z-index: 999;/*此div显示在其他元素的上层*/
opacity: 0.5;/*背景透明度*/
}
/*由于文字基线问题导致的元素上下不对齐解决办法使用vertical-align: top;*/
/*input和button需要对齐*/
/*button>background-repeat:背景重复*/
/*button>background-position: 28px 6px;设置背景图位置*/
.header .search input {
width: 508px;
height: 34px;
border: 1px solid #DD302D;
}
.header .search button {
width: 80px;
height: 36px;
background-color: #DD302D;
vertical-align: top;
background-image: url("../images/serch_icon.png");
background-repeat: no-repeat;
background-position: 28px 6px;
}
input,button标签字体大小有默认值,不受父级元素font-size影响
一行或一列文字通常使用ul li
一行文字距离通常用margin或padding隔开
一列文字距离通常用行高隔开
继承自父级的样式优先级小于本身的样式,不会覆盖本身的样式
定位可以越过padding
padding占据容器宽高,margin不占据宽高
margin-top可能会被父元素抢走(父元素塌陷),在父元素加上overflow: hidden;
margin: 0 auto;居中的前提是该子元素需要有明确的宽度(元素有浮动时无法使用,此时可以使用text-align: center;,见下面介绍)
text-align: center;可以使文字或者行内块或者行居中,父元素加上text-align: center;,子元素加上display: inline-block;成为行内块,这样子元素就能相对于父元素水平居中(此方式不需要子元素有明确的宽度)