![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css3
刺心疯
一名北飘的技术爱好者,欢迎大家评论一起学习分享新技术~
展开
-
CSS超出部分隐藏,显示滚动条详解(附源码)
固定一个高度,可以上下滑动出滚动条。固定一个宽度,可以左右滑动出滚动条。原创 2023-02-24 15:13:45 · 2376 阅读 · 0 评论 -
移动端canvas绘制时,页面会滑动并且坐标出现偏差(已解决)
错误案例:没解决问题之前,网上搜索一大堆都是给body加fixed定位,这种方式,页面是不滑动了,但是页面下面的遮罩层还是会滑动,canvas坐标也依然会出现偏差。所以正确的结局方案只需一步:touch-action: none;给canvas设置这个样式即可!详解:CSS touch-action 属性:指定某个给定的区域是否允许用户操作,以及如何响应用户操作 (比如浏览器自带的划动、缩放等)。touch-action 属性可以被指定为:1、任何一个关键字 auto、no原创 2022-03-21 15:37:24 · 2120 阅读 · 0 评论 -
css媒体查询详解(自测可用)
CSS3的媒体查询@media通过@media可以针对不同屏幕大小定义不同样式的网页,页面会根据浏览器长宽来渲染页面。语法:@media mediaType and|not|only (media feature) { /*CSS-Code;*/}and|not|only:and放在mediaType后,连接属性,代表将多个media feature结合在一起;not否定,放在@media后,代表对该条信息取反;only代表仅仅,一般放在@media后,例如:@media o原创 2022-03-14 20:13:00 · 4193 阅读 · 0 评论 -
CSS垂直水平居中
列出两种写法:1.父元素规定子元素内容垂直居中display: flex;align-items: center;justify-content: center;2.子元素自己垂直水平居中position:relative;left: 50%;top: 50%;transform:translate(-50%,-50%);原创 2021-05-07 17:56:21 · 101 阅读 · 0 评论 -
移动端阻止长按文字出现拷贝、粘贴等选中效果
//在需要禁止选中的文字所在位置加上以下css样式.class { -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;}原创 2020-10-12 17:09:29 · 717 阅读 · 0 评论 -
html+css写三角形(2)
首先我们来看下面一段代码在页面中的效果图:<!doctype html><html> <head> <meta charset="utf-8"> <title>三角形</title> <style> .triangle{ width: 0; height: 0; ...原创 2019-06-24 11:40:59 · 826 阅读 · 0 评论