css开发知识技巧总结

1 padding与图片响应式

需求：页面宽度变化时图片保持缩放比例

方法：用padding-top或者padding-bottom撑开盒子 计算公式：高度/宽度*100%

代码：

<ul>
<li><a href="#"><img src=""></a></li>
<li><a href="#"><img src=""></a></li>
<li><a href="#"><img src=""></a></li>
<li><a href="#"><img src=""></a></li>
</ul>
<style>
*{
margin: 0;
padding: 0;
}
ul{
display: flex;
flex-wrap: wrap;
max-width: 1200px;
margin: 0 auto;
}
li{
list-style: none;
flex:0 0 30%;
margin-right: 5%;
margin-bottom: 20px;
}
li:nth-child(3n+0){
margin-right: 0;
}
a{
display: block;
position: relative;
padding-top: calc(9 / 16 * 100%);//这里计算图片比例
}
img{
max-width: 100%;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>

注意事项：padding是根据父元素的宽度来计算，如果直接

<li><img src=""></li>

要通过li的:before和:after来撑开

2 filter: drop-shadow与PNG格式小图标赋色

需求：hover时触发图片变色但又不想加载两个不同颜色的图标

方法：filter: drop-shadow(x偏移, y偏移, 模糊大小, 色值);

代码：

<span class="hovericon">
<span class="icon"></span>
</span>
<style>
*{
margin: 0;
padding: 0;
}
.hovericon{
width: 34px;
height: 50px;
display: block;
overflow: hidden;
margin: 50px auto;
}
.hovericon .icon{
display: block;
height: 100%;
position: relative;
background-repeat: no-repeat;
background-position: 0 center;
background-image: url(icon01.png);
background-size: 24px 24px;
}
.hovericon .icon:hover{
width: 68px;  //宽度父盒子刘备
left: -34px; //偏移量等于父盒子的宽度
top: 0;
<
b62e
span class="hljs-rule">filter: drop-shadow(34px 0px #00923f);//x偏移量等于父盒子的宽度
}
</style>

注意事项：兼容性

扩展：实现手机端的箭头阴影

3 :checked和+选择器与label和单选按钮

需求：不通过js，使用纯css实现单选按钮选中的样式切换

方法：:checked和+选择器和label标签配合

代码：

<form>
<ul>
<li>
<input class="my-input" type="radio" id="kind1" name="kind" value="0">
<label class="my-label" for="kind1">住宅</label>
</li>
<li>
<input class="my-input" type="radio" id="kind2" name="kind" value="1">
<label class="my-label" for="kind2">公寓</label>
</li>
</ul>
</form>
<style>
*{
margin: 0;
padding: 0;
}
.my-input {
display: none;
}
.my-label {
//单选按钮的样式
}
.my-input:checked + label {
//选中的样式
}
</style>

4 tabel-cell与多行文本垂直居中

需求：多行文本垂直居中

方法：利用tabel-cell

代码：

<div class="wrapper">
<div class="content">
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
</div>
</div>
<style>
.wrapper{
display: table;
height: 500px;
width: 200px;
}
.wrapper .content{
display: table-cell;
vertical-align: middle;
}
</style>

5 background-position定位

需求：背景图片右底定位

方法：background-position:right 10px bottom 10px

注意事项：IE9+支持