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

牛先森家的牛奶

已于 2022-02-14 15:45:04 修改

阅读量257

点赞数

分类专栏： HTML 文章标签： css html5 html

于 2021-05-13 17:58:45 首次发布

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

版权

HTML 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

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

禁止拖动鼠标选中文字（文字背景变成蓝色）

在页面中写 onselectstart="return false"

如下：

<div onselectstart="return false">这里面的文字是不能被鼠标选中的</div>

如果整个页面都不能选中，可以加到 <body> 标签中：

<body onselectstart="return false">

html中连续点击某个标签会出现蓝色的解决方法

给标签加上下面的属性，也可以把这些属性建立一个class名，谁需要的时候加上这个class名

-moz-user-select: none; /*mozilar*/
-webkit-user-select: none; /*webkit*/
-ms-user-select: none; /*IE*/
user-select: none;

HTML中input:file标签的隐藏使用

1、将其设置为透明，设置宽高覆盖到需要用的地方；
2、使用label标签绑定input:file，点击label标签时上传文件，只需要装饰label标签即可，也需要将input标签隐藏透明；

  <label for="myFile">点我上传</label>
  <input type="file" name="" id="myFile" style="display: none;">

img图片被压缩变形解决方案CSS

为了避免变形，可以使用css中object-fit属性

object-fit属性详解

语法
object-fit 属性由下列的值中的单独一个关键字来指定。

取值

contain
被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。整个对象在填充盒子的同时保留其长宽比，因此如果宽高比与框的宽高比不匹配，该对象将被添加‘黑边’

cover
被替换的内容在保持其宽高比的同时填充元素的整个内容框。如果对象的宽高比与内容框不相匹配，该对象将被剪裁以适应内容框。

fill
被替换的内容正好填充元素的内容框。整个对象将完全填充此框。如果对象的宽高比与内容框不相匹配，那么该对象将被拉伸以适应内容框。

none
被替换的内容将保持其原有的尺寸。

scale-down
内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。

css超出滚动条占高度或者宽度位置怎么办

chrome下overflow有个新的属性值overlay，这个属性简直就是为了这个问题而生，他和auto有点像，但是区别就是在触发滚动条时候并不挤压空间，说得直白点就像是移动端的悬浮滚动条，唯一的区别就是不会像手机上那样自动出现自动消失了，滚动条会遮盖住容器部分的空间。

.wrap {
    overflow-y: scroll;
    overflow-y: overlay;
}

其他解决方法可自行百度处理；

css3关于box-shadow看不到效果的问题

两个盒子贴一起，如果单纯设置

box-shadow:0px 10px 20px 5px rgba(255, 255, 255, 0.6);

不一定看到效果的，尝试在需要给阴影的盒子加z-index属性

z-index: 2021;

css的十字的样式怎么写

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .font-add {
      position: relative;
      width: 200px;
      height: 200px;
      margin-right: .14rem;
    }
    .font-add:after {
      position: absolute;
      top: 0;
      left: 50%;
      width: 10px;
      height: 200px;
      content: '';
      transform: translateX(-50%);
      background-color: #4646e6;
    }
    .font-add:before {
      position: absolute;
      top: 50%;
      bottom: 0;
      width: 200px;
      height: 10px;
      content: '';
      transform: translateY(-50%);
      background-color: #4646e6;
    }
  </style>
</head>

<body>
  <div class="font-add"></div>
</body>

</html>

在这里插入图片描述

css的三角形的样式怎么写

.triangle-right{
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-left: 6px solid #1F2240;
    border-bottom: 5px solid transparent;
  }

牛先森家的牛奶

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
工作中遇到的html和css的一些问题解决（2）

工作中遇到的html和css的一些问题解决禁止拖动鼠标选中文字（文字背景变成蓝色）禁止拖动鼠标选中文字（文字背景变成蓝色）在页面中写 onselectstart="return false"如下：<div onselectstart="return false">这里面的文字是不能被鼠标选中的</div>如果整个页面都不能选中，可以加到 <body> 标签中：<body onselectstart="return false">...
复制链接

扫一扫