css
Abelce
一个不太称职的程序员
展开
-
bfc
看到一篇文章https://blog.csdn.net/xualaleilei/article/details/50581160转载 2021-01-19 22:43:27 · 113 阅读 · 0 评论 -
使用scroll-snap实现吸附效果
1、 效果:2、代码css:.list { display: flex; flex-direction: row; overflow: auto; white-space: nowrap; scroll-snap-type: x mandatory;}.content { flex-wrap: 0; flex-shrink: 0; height: 100px; width: 300px; scroll-snap-al原创 2020-12-14 22:41:32 · 481 阅读 · 0 评论 -
css优先级
在学习工作中了解的css优先级汇总如为下面的表哥,以后有新的再补充上去选择器优先级继承或者0,0,0,0标签0,0,0,1class、伪类(:hover)、属性选择器[type=“title”]0,0,1,0id0,1,0,0行内样式1,0,0,0!important∞...原创 2020-11-01 15:00:12 · 81 阅读 · 0 评论 -
display的contents属性
一、作用display: contents使元素本身不会产生任何的边框,但是子元素和其伪元素正常显示;<!DOCTYPE html><html><head> <style> .item { display: contents; color: red; border: 2px solid blue; background-color:原创 2020-05-29 11:55:42 · 5385 阅读 · 0 评论 -
css计数器
以前写列表的时候,都是在前面手动添加序号标识是第几个。没想到用 css 计数器可以完成相应的工作了。先来一个实例:ol { counter-reset: section; list-style: none;}li::before { counter-increment: section; content: counter(section) ".";}&...原创 2020-03-21 10:19:02 · 178 阅读 · 0 评论 -
hyphens换行
使用 hyphens 进行单词换行一般换行使用 word-breakbreak-all:单词会被强行断开,不方便阅读break-word: 当空间不够时,单词会自动换行到下一行通常的英文排版都会合理应用所有空间,可以给没写完的那个单词使用“-”连接起来,hyphens可以实现这种效果。hyphens可选值:none: 单词不会换行,即使字符串中建议换行,只会在空白符处换行m...原创 2020-03-03 16:19:26 · 335 阅读 · 0 评论 -
css实现打点动画
写loading时有时需要在后面连续的出现一个点、两个点、三个点,实现方式有很多种,js、css皆有,今天分享看到的一种css实现方式。效果如下代码如下: .btn { padding: 4px 12px; border: 1px solid #ff4d4f; backgro...原创 2020-02-17 17:46:42 · 430 阅读 · 0 评论 -
css 隐藏滚动条
chrome和safari.element { // Firefox -ms-overflow-style: none; // IE 10+ overflow: -moz-scrollbars-none;}// chrome、safari.element::-webkit-scrollbar { display: none; width: 0 !important ...原创 2020-01-10 11:13:14 · 91 阅读 · 0 评论 -
css行数限制
<style>.text1 {/*单行*/ width:200px; overflow:hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis; -webkit-text-overflow:ellipsis; -moz-text-overflow:ellipsis; white-space:n...原创 2019-03-14 20:14:55 · 257 阅读 · 0 评论 -
如何使用css实现图片宽高自适应
本文主要是结合自己在学习中使用css来实现图片的宽高自适应,并给出相应的结局方案。场景给定一系列图片,图片宽高不等,每行所展示的图片数量不等,如何实现图片的自适应。实现方法聪明的你肯定会想到使用flex布局,并且设置flex-wrap: wrap。但如何做到自适应宽度呢:我们假设图片原始宽度、高度分别为width、height,首先如果没有设置任何样式,那么图片高度肯定是不一样。于是......原创 2018-12-06 22:06:00 · 10036 阅读 · 0 评论 -
css使用笔记
:focus-within这个伪类和:hover很相似,是在使用了:focus-within的元素或其子元素成为焦点时显现。比如使表格的某一行高亮,hover在使用鼠标时很好用,但是如果使用tab键获取焦点后,使当前行高亮,可以使用javascript,更简单的方式是使用:focus-within....原创 2018-08-27 22:28:52 · 93 阅读 · 0 评论