css特殊场景下的解决方案

zhaobinglong commented 3 years ago

多个容器堆叠在一起，边框不变粗

原理上是给父元素设置左边框和上边框，然后子元素统一设置右边框和下边框

demo

.father{
    width:400px;
}
.c{
    width:99px;/*此处有改动：（99+1）*4 = 400*/
    height:100px;
    float:left;
    border:1px solid black;
    border-left:none;
    border-top:none;
}
.father:after{
    display:block; 
    content:"clear";
    height:0; 
    clear:both;
    overflow:hidden; 
    visibility:hidden;
}
/*给父元素加border-top和border-left*/
.father{
    border-top:1px solid black;
    border-left:1px solid black;
}

效果

zhaobinglong commented 3 years ago

父容器有横向滚动条，子元素宽度要等于父元素

实现父容器出现横向滚动条后，子元素自动填满剩余宽度

方案

没有实现

去回答

https://www.zhihu.com/question/54904814

zhaobinglong commented 3 years ago

宽度auto时如何实现过渡效果呢

<style>
#cont {
    display: inline-block;
    max-width: 50px; // 借助max-width
    line-height: 50px;
    background-color: green;
    color: #FFF;
    padding: 6px 10px;
    transition: all 1s;
}
</style>
<body>

<div id="cont">
    dkkdkkdncnksk
</div>
<div>
    <button onclick="test()">点击测试 </button>
</div>
</body>
<script type="text/javascript">
function test() {
    document.getElementById('cont').innerHTML='dkddkllaslslslslslkxkkkkdldldldldlldllslsl'
       // 点击后变更元素的max-width
    document.getElementById("cont").style.maxWidth = "1000px";
}
</script>

宽度固定时实现过渡

<style>
#cont {
    display: inline-block;
    width: 50px; // 设置一个固定宽度
    line-height: 50px;
    background-color: green;
    color: #FFF;
    padding: 6px 10px;
    transition: width 1s; // 设置过渡效果
}
</style>
<body>

<div id="cont">
    dkkdkkdncnksk
</div>
<div>
    <button onclick="test()">点击测试 </button>
</div>
</body>
<script type="text/javascript">
function test() {
        // 点击后设置新的宽度
    document.getElementById('cont').innerHTML='dkddkllaslslslslslkxkkkkdldldldldlldllslsl'
    document.getElementById("cont").style.width = "300px";
}
</script>

参考

https://css-tricks.com/using-css-transitions-auto-dimensions/

zhaobinglong commented 3 years ago

自动换行情况下，选择每行开头的元素

// 使用公式（an+ b）.描述：a代表一个循环的大小，N是一个计数器（从0开始），以及b是偏移量。 
.item:nth-child(4n+1) {
        padding-left: 0;
}

参考

https://www.cnblogs.com/guozh/p/10161623.html

zhaobinglong commented 3 years ago

css选择器特殊场景处理

// 选择容器中最后一个p元素
p:last-of-type {
   margin-bottom: 0;
}

zhaobinglong commented 3 years ago

阴影效果收集

box-shadow: h-shadow v-shadow blur spread color inset;

例子:生成1px的白色内边框

//参数说明 //1 //2 上下偏移 //3 box-shadow: 0 0 0px 1px #fff inset

单车公园小程序新建按钮

box-shadow: 0 2px 10px 0 rgba(0,0,0,.4)

微信公众号后台容器阴影

box-shadow: 0 1px 2px rgba(150,150,150,0.3)

小白健康MRI气泡阴影

box-shadow: 1rpx 1rpx 1rpx rgba(0,0,0,0.2),0rpx 0rpx 1rpx rgba(0,0,0,0.1)

zhaobinglong commented 3 years ago

1px边框解决: 媒体查询法

@media screen and (-webkit-min-device-pixel-ratio: 2) {
    .h5ui-card { border-bottom: 0.5px solid #999 }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
    .h5ui-card  { border-bottom: 0.333333px solid #999 }
}

1px边框解决: 缩放法

zhaobinglong commented 3 years ago

动态计算元素宽度

// 这是元素的宽度为当前容器宽度的20%再减去10px
width: calc(20% - 10px);

zhaobinglong commented 3 years ago

居中的文字底部对齐

zhaobinglong commented 3 years ago

使用伪元素扩大可点击区域

.btn {
    position: relative;
}

.btn::before {
    content: '';
    position: absolute;
    top: -20px;
    right: -20px;
    bottom: -20px;
    left: -20px;
}

zhaobinglong commented 3 years ago

flex布局最后一行左对齐

zhaobinglong commented 3 years ago

吸顶

.box { position: -webkit-sticky; position: sticky;

zhaobinglong commented 3 years ago

滚动时表格左侧固定

zhaobinglong commented 3 years ago

flex布局下高度撑满屏幕后自动出现滚动条

zhaobinglong commented 3 years ago

自定义滚动条的样式

参考

https://www.jianshu.com/p/c2addb233acd

zhaobinglong commented 3 years ago

镂空效果

code

.base-one-circle {
    width: 100px;
    height: 100px;
    position: relative;
    background: radial-gradient(circle at 0px 50px, transparent 10px, #28A4F2 0) top
  }

参考

https://www.jianshu.com/p/52103187aac6

zhaobinglong commented 3 years ago

flex布局模式下image高度被拉伸

// 在父元素没有设置高度的情况下，可以设置图片height:100%，可以解决这个问题。
height:100%

zhaobinglong commented 3 years ago

生成不规则矩形背景图

参考

https://css-tricks.com/creating-non-rectangular-headers/

zhaobinglong commented 2 years ago

伪元素添加红色必填星号

  h1::before {
    content: "*";
    color: #ff4d4f;
  }

zhaobinglong / myBlog