一些css杂项笔记
div[class*="col-"]{
background-color: gold;
border: 1px solid #ccc;
}
//给class开头等于col-的div添加样式;
<div class="col-lg-5 col-md-5 hidden-sm hidden-xs">
<img src="images/perion.png" class="img-responsive">
</div>
//bootstrap的hidden-sm hidden-xs:在sm、xs的尺寸下隐藏;
.list-item{
height: 112px;
padding-left: 138px;
background: url(../images/icons.png) left top no-repeat;
margin-bottom: 39px;
overflow: hidden;
}
//这里用overflow:hidden来消除margin-top的塌陷??
//有没有碰到过margin-top的塌陷问题?
//原理是怎么的?
.case-list .col-lg-3 .mask{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #ccc;
color: #fff;
padding: 10px;
display: none;
}
.case-list .col-lg-3:hover .mask{
display: block;
}
//展示在图片上遮罩; 绝对定位,相对父级100%; 平时不显示;鼠标放在父级上显示这个遮罩;
<div class="container-fluid">
<div class="container">
</div>
</div>
//container被包在container-fluid里面;外面包裹宽度是100%;里面是固定宽度;
css相邻兄弟选择器:
可选择紧接在另一元素后的元素,且二者有相同的父元素;
如果需要选择紧接在另一个元素后的元素, 而且二者有相同的父元素,可以使用相邻兄弟选择器,例如,如果要增加紧接在 h1 元素后出现的段落的上边距,可以这样写:
h1 + p {
margin-top: 5px;
}