css
关注
分享
扫一扫
css
WorkAndDebugger
My-Program-Life-And-Debugger/(you can call me).
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
网页滚动条样式设置css
【代码】网页滚动条样式设置。原创 2024-01-15 16:15:29 · 456 阅读 · 0 评论 -
box-sizing属性
<div class="box"></div> .box { box-sizing: border-box; /* width=content+border-left+border-right+padding */ /* 元素在设置内边距和边框是在已经设定好的宽度和高度之内进行绘制 */ /* box-sizing: content-box; */ /* 就是content的长宽 */ width: 50px; hei..原创 2021-12-20 17:11:34 · 175 阅读 · 0 评论 -
background属性
background-size : contain; background-size : cover; // 图像随屏幕拉伸background-origin背景图片应根据盒模型的哪个区域进行定位。当值为border-box时，背景图片的位置根据边框区域定位为padding-box时其位置根据边距区域定位为content-box时其位置根据内容区域定位。background-attachmentfixed意味着背景图片固定在视口并且不会移动，即使用户正沿着视口滚动。local意味.原创 2022-04-14 11:05:45 · 449 阅读 · 0 评论 -
css transition属性
如果想实现一些效果：比如一个div容器宽高拉伸效果，或者一些好看的有过渡的效果可以使用transition 属性是一个简写属性，用于设置四个过渡属性：把鼠标指针放到 div 元素上，其宽度会从 100px 逐渐变为 300px：CSS 语法transition: property duration timing-function delay;默认值： all 0 ease 0继承性： noJavaScript 语法： object.style.transition=“width 2s”表格中的数字原创 2023-08-31 16:09:07 · 510 阅读 · 2 评论 -
css选择器+/~的使用
<body> <div class="box">a</div> <p class="one">1</p> <span class="two">2</span> <p class="three">3</p> <p class="three">3</p> <span class="four">4</span></body&g.原创 2021-12-20 16:56:06 · 148 阅读 · 0 评论 -
字体包引入以及使用
【代码】字体包引入以及使用。原创 2023-12-18 11:52:42 · 832 阅读 · 0 评论 -
SASS-css预编辑器
一、什么是SASSSASS是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。本文总结了SASS的主要用法。我的目标是，有了这篇文章，日常的一般使用就不需要去看官方文档了。二、安装和使用2.1 安装SASS是Ruby语言写的，但是两者的语法没有关系。不懂Ruby，照样使用。只是必须先安装Ruby，然后再安装SASS。假定你已经安装好了Ruby，接着在命令行输入下面的命令：gem install sass然后，就可以使用了。2.2 使用原创 2021-05-31 20:24:29 · 192 阅读 · 0 评论 -
浮动引起的问题and清除浮动
浮动元素引起的问题：父元素的高度无法撑开，会影响与父元素同级的元素与浮动元素同级的非浮动元素会跟其后如果不是第一个元素浮动，那么这个需要浮动元素之前的元素也需要浮动，否则会影响页面显示的结构解决方法1. 在标签尾部添加空块级标签，设置样式属性为：clear：both；缺点：增加很多空div，不利于页面的优化。2. 父级定义伪类after和zoom，.box:after{display:block; clear:both; content:"";} .box{ zoom: 1 }3. 简单原创 2021-12-20 17:45:57 · 119 阅读 · 0 评论 -
css定位使子元素水平垂直居中
<body> <div class="father"> <span>123</span> <div class="son">456</div> </div> <div>789</div></body>- 定位属性（position）配合位移属性（transform） - 父元素设置：position:relative， - 子元素设置：posit.原创 2021-12-20 16:33:24 · 112 阅读 · 0 评论 -
css解决字母数字过长无法换行问题
white-space:normal;word-break:break-all;word-wrap: break-word;原创 2021-11-25 16:55:28 · 369 阅读 · 0 评论 -
nth-of-type和nth-child的区别是什么？
nth-of-type：该css伪类是针对具有一组兄弟节点的标签, 用 n 来筛选出在一组兄弟节点的位置。nth-child：该css伪类首先是找到所有当前元素的兄弟元素，, 用 n 来筛选出在当前元素的兄弟元素节点的位置。总的来说就是，nth-of-type 它是当前元素的兄弟元素的第n个而nth-child 是当前元素的兄弟节点的第n个当前元素 且中间不能隔元素例： <p>第一个</p> <p>第二个</p> &原创 2021-12-20 17:59:02 · 244 阅读 · 0 评论 -
手机端上图片长时间点击会选中图片，如何处理？
**img{ pointer-events:none }**，禁止事件，但会把整个标签的事件都禁用掉，不建议使用**img{ -webkit-user-select:none }**，用户选中状态推荐： img{ -webkit-touch-callout: none; //触摸 -webkit-user-select: none; -moz-user-select: none; -ms-user原创 2021-12-21 09:46:14 · 561 阅读 · 0 评论