CSS 杂项

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;成为行内块,这样子元素就能相对于父元素水平居中(此方式不需要子元素有明确的宽度)

上一篇
下一篇