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;
    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+支持

css开发知识技巧总结

猜你喜欢