常用css

qq_37880655

已于 2023-05-10 16:16:42 修改

阅读量1.9k

点赞数

分类专栏： CSS 文章标签： css bootstrap 前端

于 2017-12-29 10:17:18 首次发布

本文链接：https://blog.csdn.net/qq_37880655/article/details/78928722

版权

CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1:适用于手机端屏幕宽度适应
例子:尺寸从大往小写

.hd-wrapper{margin-top: 5%;}
 @media screen and (max-width: 375px) {
 .hd-wrapper{margin-top: 4%;}
 }
 @media screen and (max-width: 320px) {
 .hd-wrapper{margin-top: 1%;}
 }
 #wxdesc{color: transparent;}

2:块级和行级标签(及行且块):display: inline-block;
3:高度自适应:overflow: auto;//ps:背景图高度100%不起作用是可以用100vh
4:bootstrap下input标签在苹果手机去圆角:#pay{border-radius:0px;-webkit-appearance: none;
5:bootstrap下去a签点击下划线:a, a:hover {text-decoration: none;}
6:加边框:border:1px solid #CCC;
7:超出部分隐藏:

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
	vertical-align: bottom;//加这一句就不影响位置了.因为 有overflow: hidden;和line-height: 45px;就不起作用了.所以要加这一句

8:背景图片及颜色渐变:

background:url(__PUBLIC__/images/radion2.png) no-repeat right center;background-size:25px 25px;width: 25px;height: 25px;

background: linear-gradient(#000000 60%, #4F4F4F); /* 背景色从上到下渐变 */

PS:如果调大小修改后面的数字

9:focus 选择器选择获得焦点的输入字段，并设置其样式：

input:focus{ background-color:yellow;}

10:最大最小宽度与高度

最小宽度min-width与最大宽度max-width
最小高度min-height 最大高度  max-height

css图块背景色渐变
方块三角对半显示等

<div class="striped"></div>
.striped {
   background: linear-gradient(to bottom left, red 50%, cyan 50%);
  width:50px;
  height:50px
}

在这里插入图片描述

css背景图加载太慢怎么办,CSS实现background背景图优化，快速加载图片

background: url("img/beijing.webp") no-repeat center,url("img/beijing.png") no-repeat center;

background: url('/static/image/index/bg.jpg') no-repeat, #0043E2;

算是HTML的签确定取消

<a href="javascript:if(confirm('确定要取消吗?'))location='xxx/xxxx/xxx'" class="sp_right" style="color:#8a6d3b;">取消</a>

ul li 去点

list-style-type:none;

字间距&文字均匀分布

 letter-spacing:2px;//字间距
 text-align-last:justify;

弹性盒子折行

flex-wrap: wrap;

字体的缩放
在pc端浏览器有默认最小字体如12px等等
可以用

transform:scale(0.5);

相当于12px的50%
参考链接

CSS 选择器分组
CSS 选择器分组参考地址

示例:
body, h2, p, table, th, td, pre, strong, em {color:gray;}

【CSS】CSS隐藏元素的五种方法
原地址(参考链接)

1、opacity:0
2、visibility:hidden
3、diaplay:none
4、position:absolute

自定义滚动条
原地址(参考链接)

滚动条样式	支持情况	支持浏览器版本	可否继承	描述
scrollbar-3dlight-color	IE特有属性	IE5.5+	y	设置滚动框的和滚动条箭头左上边缘的颜色
scrollbar-highlight-color	IE特有属性	IE5.5+	y	设置滚动框的和滚动条箭头左上边缘的颜色
scrollbar-face-color	IE特有属性	IE5.5+	y	设置滚动框和滚动条箭头的颜色
scrollbar-arrow-color	IE特有属性	IE5.5+	y	设置滚动条箭头的颜色
scrollbar-shadow-color	IE特有属性	IE5.5+	y	设置滚动框的和滚动条箭头右下边缘的颜色
scrollbar-dark-shadow-color	IE特有属性	IE5.5+	y	设置滚动条槽的颜色
scrollbar-base-color	IE特有属性	IE5.5+	y	设置滚动条主要构成部分的颜色
scrollbar-track-color	IE特有属性	IE5.5+	y	设置滚动条轨迹组成部分的颜色

CSS ul 横向导航条滑动并超出屏幕可滑动
在这里插入图片描述
.g-cate{overflow-x: auto;white-space:nowrap; width: auto; }
.g-cate::-webkit-scrollbar{display: none; }/隐藏滚动条/
先介绍一下上面的重要的css中的属性作用，大家也可以去w3scholl去参考学习。
overflow-x
这只是在x轴上的滑动有一个相对的是overflow-y 只在y轴上滑动

visible 不裁剪内容，可能会显示在内容框之外。
hidden 裁剪内容 - 不提供滚动机制。（和正常的overflow:hidden效果一样）
scroll 裁剪内容 - 提供滚动机制。（不管超过屏幕一直有滚动条）
auto 如果溢出框，则应该提供滚动机制。（只有超出屏幕才会有滚动条）
no-display 如果内容不适合内容框，则删除整个框。这两个还没有用过
no-content 如果内容不适合内容框，则隐藏整个内容。

width
width是我们最常用的属性，但是我常用的为lenght和% 忽略了auto这个属性我们大可不惜自己去计算宽度，使用auto可以自适应宽度。

如果pc端也想类似手机端用手指拖拽

<div class="container">
  <div class="content">
    <!-- 这里放置您的内容 -->
  </div>
</div>
.container {
  overflow-x: auto;
  white-space: nowrap;
}

.content {
  display: inline-block;
}

function makeDraggable(containerSelector) {
  var container = document.querySelector(containerSelector);
  var isDown = false;
  var startX;
  var scrollLeft;

  container.addEventListener('mousedown', function(e) {
    isDown = true;
    startX = e.pageX - container.offsetLeft;
    scrollLeft = container.scrollLeft;
  });

  container.addEventListener('mouseleave', function() {
    isDown = false;
  });

  container.addEventListener('mouseup', function() {
    isDown = false;
  });

  container.addEventListener('mousemove', function(e) {
    if (!isDown) return;
    e.preventDefault();
    var x = e.pageX - container.offsetLeft;
    var walk = (x - startX) * 3;
    container.scrollLeft = scrollLeft - walk;
  });
}
makeDraggable('.my-container');

这段代码将允许您在容器内拖动内容。当鼠标按下时，它将记录鼠标的位置和容器的滚动位置。当鼠标移动时，它将计算鼠标的移动距离，并将容器的滚动位置设置为原始滚动位置减去移动距离的三倍。这将创建一个平滑的拖动效果。

auto 默认值。浏览器可计算出实际的宽度。
length 使用 px、cm 等单位定义宽度。 (用的比较多)
% 定义基于包含块（父元素）宽度的百分比宽度。(用的比较多)
inherit 规定应该从父元素继承 width 属性的值。

css隔n行变背景色 nth-of-type
使用公式 (an + b)。描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。

在这里，我们指定了下标是 3 的倍数的所有 p 元素的背景色：

p:nth-of-type(4n+1){background: #02c6b0;}
p:nth-of-type(4n+2){background: #f1d357;}
p:nth-of-type(4n+3){background: #ea7d60;}
p:nth-of-type(4n+4){background: #2caad0;}

Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）。

在这里，我们为奇数和偶数 p 元素指定两种不同的背景色：

p:nth-of-type(odd)
{
background:#ff0000;
}
p:nth-of-type(even)
{
background:#0000ff;
}

字体加粗

font-weight: bold;

css实现移动端tab标签滑动效果

	Box {
		overflow-x: auto; /* 横向溢出滚动 */
		white-space: nowrap; /* 溢出不换行 */
	}
	Box::-webkit-scrollbar {
		Display:none; /* 隐藏滚动条,webkit内核浏览器中有效(Chrome,Safari)*/
	}

css加背景水印

h1 {
    position: relative;
    margin: 0;
    font-weight: bold;
    letter-spacing: -0.05rem;
    line-height: 1;
    text-transform: uppercase;
    z-index: 10;
}

h1:before {
    content: "2015/05/05";
    font-family: monospace;
    font-size: 10rem;
    position: absolute;
    top: 2rem;
    left: -2rem;
    z-index: 0;
    line-height: 1;
    color: rgba(50, 25, 0, 0.1);
}

css3教程链接

css制作多边形的方法
如上三角

#triangle-up { 
width: 0; 
height: 0; 
border-left: 50px solid transparent; 
border-right: 50px solid transparent; 
border-bottom: 100px solid red; 
}

在这里插入图片描述
shape-outside 多边形文字环绕

//圆形
shape-outside: circle(50%);
//椭圆
shape-outside: ellipse(60px 80px);
//多边形：
//最少3个值，也就是说，至少要3个点组成一个三角形，每个点有x，y方向移动的两个值（均从左上方开始移动）。
shape-outside: polygon(0 0,100% 100%,0 100%);（三角形）
shape-outside: polygon(100px 0,200px 60px,200px 120px,100px 200px,0 120px,0 60px);（六边形）

在这里插入图片描述