工作中遇到的html和css的一些问题解决（1）

最新推荐文章于 2022-03-02 20:26:35 发布

置顶牛先森家的牛奶

最新推荐文章于 2022-03-02 20:26:35 发布

阅读量831

点赞数

分类专栏： HTML 遇见问题文章标签： html css

本文链接：https://blog.csdn.net/weixin_42681295/article/details/106871470

版权

HTML 同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

遇见问题

10 篇文章 0 订阅

订阅专栏

css的一些问题解决

iconfont字体图标不能旋转

问题：字体图为内联元素，添加css3的一些2D和3D效果不起作用

解决：

转为行内块或块级元素即可（display：inline-block或者 dispaly：block）

button按钮点击时出现边框

CSS控制 button 按钮的在Chrome点击时候出现黑色边框
解决：

button{
   border:0;
   outline:none;  /* 或者 outline：0 */
  }

button 按钮位置不准确，转为块，再设置margin 值

button{
  display:block;
}

textarea和下一个元素之间间距处理问题

textarea框和下一个元素相交的地方出现边距，在google浏览器中调试出现的，但是在firebox中没有

解决：

textarea {
    display: block;   /* 重点是需要加上这一句  */
    width: 600px;
    height: 120px;
    padding: 20px 20px;
    margin-bottom: 12px;
}

和img标签一样，用display: block; 或者可以用vertical-align: middle;

当a需要设置宽高时，给a标签元素转元素类型时==>>转块级元素

解决：
在这里插入图片描述

input：checkbox 清除margin值

<input type="checkbox" name="" id=""> 
input{
  margin:0;
}

input ：text 自带背景属性颜色

在这里插入图片描述
解决如下：


input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  /* 背景颜色  */
  /* 注意：这里的272px是input长度 建议写input长度即可 */
  box-shadow: 0 0 0 272px #fff inset!important;
  background-color: #fff;
}

/* 要解决输入的时候背景色变白色 可以设置input */
input:focus {
  background: transparent
}

border边框属性double

    .box {
      height: 100px;
      width: 100px;
      border: 50px double green;
      background: #fff;
    }

在这里插入图片描述

汉字拼音写法 ruby和 rt 标签

<rp> </rp> 定义不支持ruby元素的浏览器所显示的内容。

<rt> </rt> 定义字符的解释或发音。

<ruby> </ruby> 定义ruby注释

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    ruby {
      font-size: 50px;
      color: green;
    }

    rt {
      font-size: 14px;
      color: red;
    }
  </style>
</head>
<body>
  <ruby class="ruby-text">
    牛
    <rt>niu</rt>
    先
    <rt>xian</rt>
    森
    <rt>sen</rt>
  </ruby>
</body>
</html>

在这里插入图片描述

解决多行溢出隐藏，省略号代替

解决如下：

  overflow: hidden;
  text-overflow: ellipsis;
  text-overflow: -o-ellipsis-lastline;
  display: -webkit-box;
  -webkit-line-clamp: 3; // 行数
  line-clamp: 3;
  -webkit-box-orient: vertical; // 设置对齐模式

在这里插入图片描述

浏览器私有前缀解决兼容问题

width: 380px;
height: 288px;
margin: 280px auto;
border: 1px solid black;
background: -webkit-linear-gradient(right, yellow, red);
background: -moz-linear-gradient(right, yellow, red);
background: -ms-linear-gradient(right, yellow, red) ;
background: -o-linear-gradient(right, yellow, red);
background: linear-gradient(right, yellow,red)

在这里插入图片描述

改变input框中placeholder颜色的方法

input::-webkit-input-placeholder { /* WebKit browsers 适配谷歌 */
    color: #BDCADA;
}
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 适配火狐 */
    color: #BDCADA;
}
input::-moz-placeholder { /* Mozilla Firefox 19+ 适配火狐 */
    color: #BDCADA;
}
input:-ms-input-placeholder { /* Internet Explorer 10+  适配ie*/
    color: #BDCADA;
}

select中实现placeholder效果和样式的重置

在这里插入图片描述

 <select name="" id="" class="ipt-num select-single" v-model="selectDay">
     <option value="" style="display: none">请选择投放周期</option>
     <option value="7天"  class="select-singe">7天</option>
     <option value="14天" class="select-singe">14天</option>
     <option value="21天" class="select-singe">21天</option>
     <option value="28天" class="select-singe">28天</option>
 </select>

谷歌、火狐、ie下 select 的默认下拉箭头图标差别还是比较大，一般我们都会清除默认样式，重新设计箭头图标；

/* --ie清除--*/
select::-ms-expand{ display: none; }

/* --火狐、谷歌清除--*/
select{
     appearance:none;  
    -moz-appearance:none;  
    -webkit-appearance:none;
     background: url("xxx.png") no-repeat scroll right center transparent;
     padding-right: 14px;
}
/* --箭头就用自己设计的箭头，padding 空出箭头的位置--*/

option样式的简单清除

option::-ms-expand{ display: none; }
option{
    -moz-appearance:none; /* Firefox */
    -webkit-appearance:none; /* Safari 和 Chrome */
    appearance:none;
}

/* --背景色字体颜色--*/
option:hover{
    color:#fff;
    background-color:#1E90FF;
}

input中的radio样式


input[type=radio]选中的样式变化

input[type=radio]:hover{
border: 1px solid #ccc;
}

input[type=radio]:focus{
border: 1px solid #ccc;
}

 

1、默认属性，input{样式}
2、鼠标悬浮：input:hover{样式}
3、点击属性：input:focus{样式}

type不同设置也不同，比如radio还要设置input:checked的样式，用tab切换表单使radio获得焦点和点击是两种样式！

清除样式

input{
	-webkit-appearance:none;
	border-radius: 0;
}

input{outline:none}

input中 radio空心写法

在这里插入图片描述

<input type="radio" id="interval" class="radio mr-23" name="way" value="间隔播放" v-model="selectWay">
<label for="interval" class="mr-60">间隔播放</label>
<input type="radio" id="continuous" class="radio mr-23" name="way" value="连续播放" v-model="selectWay">
<label for="continuous">连续播放</label>

记得先清除默认的样式

// 清除样式后自己添加的
.radio{
    width: 0.3rem;
    height: 0.3rem;
    border: 0.01rem solid #ddd;
    border-radius: 50%;
}
// 聚焦时样式
input[type=radio]:focus{
    width: 0.3rem;
    height: 0.3rem;
    background: #ffffff;
    border-radius: 0.09;
    border: 0.09rem solid #FEBA00;
} 
// 选中样式
input[type=radio]:checked{
    width: 0.3rem;
    height: 0.3rem;
    background: #ffffff;
    border-radius: 0.09;
    border: 0.09rem solid #FEBA00;
}

解决横向滚动子元素撑开父元素（未知子元素多少个，不能设置父元素的宽）

// 这部分是小标签
// 下面两个wrapper 一个是判断定位的，不影响最终效果
.selected-wrapper{
    position: absolute;
    left: 0;
    top: -0.55rem;
    width: 7.08rem;
    height: 0.41rem;
    overflow: hidden;
}
.show-wrapper{
    width: 7.08rem;
    overflow: hidden;
    margin-top: 0.18rem;
}
.selected-box{
    white-space: nowrap;
    overflow: auto;
    // 隐藏滚动条
    &::-webkit-scrollbar{
        display: none;
    }
}
.selected-item{
    display: inline-block;
    margin-right: 0.08rem;
    background: #fff;
    color: #666677;
    height: 0.41rem;
    line-height: 0.41rem;
    border-radius: 0.07rem;
    padding: 0 0.17rem 0 0.18rem;
}
.close-sel{
    color:#DDDDDD;
    font-size:0.3rem;
    margin-left:0.08rem;
}

在这里插入图片描述
还有一种写法如下

	<div class="seckill-start ml-24 w702">
            <div class="wrapper">
                <div class="wrapper-item flex-column-center">
                    <div class="fs-24 color-A2A"><span>12日</span><span>10:00</span></div>
                    <div class="fs-20 color-A2A mt-5">已开抢</div>
                </div>
                <div class="wrapper-item flex-column-center">
                    <div class="fs-30 color-333"><span>13日</span><span>12:00</span></div>
                    <div class="fs-00 color-333 rushing">抢购中</div>
                </div>
                <div class="wrapper-item flex-column-center">
                    <div class="fs-24 color-A2A"><span>14日</span><span>14:00</span></div>
                    <div class="fs-20 color-A2A  mt-5">即将开抢</div>
                </div>
                <div class="wrapper-item flex-column-center">
                    <div class="fs-24 color-A2A"><span>15日</span><span>16:00</span></div>
                    <div class="fs-20 color-A2A  mt-5">即将开抢</div>
                </div>
                <div class="wrapper-item flex-column-center">
                    <div class="fs-24 color-A2A"><span>15日</span><span>16:00</span></div>
                    <div class="fs-20 color-A2A  mt-5">即将开抢</div>
                </div>
            </div>
 	</div>
 
.seckill-start{
    width: 7.02rem;
    height: 1.03rem;
    ::-webkit-scrollbar {
        display: none;
    }
    .wrapper{
        width: 100%;
        overflow: auto;
        display: flex;
    }
    .wrapper-item{
        flex: none;
        width: 1.74rem;
        height: 1.03rem;
        text-align: center;
    }
    .rushing{
        width: 1.44rem;
        height: .32rem;
        text-align: center;
        line-height: .32rem;
        color: #fff;
        border-radius: .16rem;
        background: $main-color;
    }
}

在这里插入图片描述

隐藏滚动条方法

具体看上个案例

.selected-box{
    white-space: nowrap;
    overflow: auto;
    // 隐藏滚动条
    &::-webkit-scrollbar{
        display: none;
    }
}

移动端1px问题（使用伪类+transform实现）

		.top:after{
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			-webkit-transform: scale(1, 0.5);
			transform: scale(1, 0.5);
			border-top: 1px solid #DDDDDD;
		}
		.bottom:after{
			content: '';
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			-webkit-transform: scale(1, 0.5);
			transform: scale(1, 0.5);
			border-bottom: 1px solid #DDDDDD;;
		}
		.left:after{
		  content: '';
		  display: block;
		  position: absolute;
		  top: 0;
		  bottom: 0;
		  left: 0;
		  -webkit-transform: scale(0.5, 1);
		  transform: scale(0.5, 1);
		  border-left: 1px solid #DDDDDD;
		}
		.right:after{
          content: '';
          display: block;
          position: absolute;
          top: 0;
          bottom: 0;
          right: 0;
          -webkit-transform: scale(0.5, 1);
          transform: scale(0.5, 1);
          border-right: 1px solid #DDDDDD;
		}

引用：移动端1px误差的原因以及解决方案
在这里插入图片描述

三角形加弧度的实现

看图先
在这里插入图片描述

  <div class="selectTick"></div>
  
 .selectTick{
        position: absolute;
        top: 2.69rem;
        left: 2.79rem;
        width: 0;
        height: 0;
        border-bottom-right-radius: 0.18rem;
        border-left: 0.3rem solid transparent;
        border-top: 0.3rem solid transparent;
        border-bottom:0.3rem solid #FECB00;
        border-right:0.3rem solid #FECB00;
        // 对勾图标
        &:after {
            position: absolute;
            content: "\e625";
            font-family: "iconfont" !important;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            right: -0.26rem;
            color: #fff;
            font-size: 0.24rem;
            top: -0.05rem;
        }
    }

视频上下留白问题

<style>
	video {
		object-fit:fill;
		width:700px;
		height:320px;
	}
</style>

<video src="xxx.mp4" controls autoplay loop></video>

vue中背景色和渐变同时存在

  :style="{
            'background-size': '7.5rem 4rem',
            'background-position-y': '0.88rem',
            'background-image': 'linear-gradient(rgba(255,255,255,0.75) 5%, rgba(0,0,0,0.3) 45%, rgba(0,0,0) 75%), url(' + hotPackageData.picUrlView + ')',
            'background-repeat': 'no-repeat',
            'background-color':'#000',
   }"

在这里插入图片描述

底部样式居中

在这里插入图片描述

.activeName{
    font-size: .36rem;
    color: #000;
    font-weight: bold;
    position: relative;
    &::after{
        content: '';
        width: .96rem;
        height: .04rem;
        background: $main-color;
        display: block;
        position: absolute;
        bottom: -0.2rem;
        left: 50%;
        right: 50%;
        transform: translateX(-50%);
    }
}

input标签添加上disable属性在ios端字体颜色和placeholder颜色不兼容的问题

因工作是嵌入H页面，导致在安卓上没问题，但是ISO各种浮出水面，慢慢改吧，处理兼容问题；

input[disabled],input:disabled,input.disabled{  
    color: #333333;  
    -webkit-text-fill-color: #333333;  
    -webkit-opacity:1;  
    opacity: 1;  
}

input::-webkit-input-placeholder{
  color: #cccccc;
  -webkit-text-fill-color: #ccc;
  opacity: 1;
  -webkit-opacity:1;
}
input:disabled{
  background: none;
  color: #333;
  -webkit-text-fill-color: #333;
  opacity: 1;
  -webkit-opacity:1;
}
input:disabled::-webkit-input-placeholder{
  color: #cccccc;
  -webkit-text-fill-color: #ccc;
  opacity: 1;
  -webkit-opacity:1;
}

position：sticky粘性定位的使用

注意：移动端可以使用，但是适配IE有兼容问题

.tab-control{
    position: sticky;
    top:0rem;
}

stylus写法

$green = #02a774;
$yellow = #F5A100;
$bc = #f4f4f4;

// 一像素下边框
bottom-border-1px($color)
  position relative
  border none
  &:after
    content ''
    position absolute
    left 0
    bottom 0
    width 100%
    height 1px
    background-color $color
    transform scaleY(0.5)

// 一像素上边框
top-border-1px($color)
  position relative
  &::before
    content ''
    position absolute
    z-index 200
    left 0
    top 0
    width 100%
    height 1px
    background-color $color

//根据像素比缩放1px像素边框
@media only screen and (-webkit-device-pixel-ratio: 2 )
  .border-1px
    &::before
      transform scaleY(.5)

@media only screen and (-webkit-device-pixel-ratio: 3 )
  .border-1px
    &::before
      transform scaleY(.333333)

//根据像素比来使用 2x图 / 3x图 
bg-image($url)
  background-image: url($url + "@2x.png")
  @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
    background-image: url($url + "@3x.png")

//清除浮动
clearFix()
  *zoom 1
  &::after
    content ''
    display block
    clear both

去除浏览器自带的滚动条

在这里插入图片描述
在vue中设置app

<style lang="scss" scoped>
#app{
  width: 100%;
  height: 100%;
  @include clearfix;
  // 去除浏览器自带滚动条
  ::-webkit-scrollbar {
    display:none;
  }
}
</style>