Css
Software攻城狮
从 "前端" 向 "大前端" 方向进发 ————
(成功人士习惯去做失败者不爱做的事。他们当然也不喜欢干这些事,但他们让这种不喜欢服从于对自己目标的追求 。。。。。。 远离舒适,不断学习,知识更新,提升竞争力)
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
css 的炫酷用法
属性用于在滚动容器内实现对齐点之间的平滑过渡。此功能可确保用户滚动浏览页面时内容部分整齐对齐,从而提供更结构化的用户体验。此scroll-snap-type属性控制沿水平轴或垂直轴的滚动,并定义如何接合对齐点。属性控制定义文本如何环绕 HTML 元素。此属性对于浮动元素特别有用。定义的形状决定了文本围绕该元素的流动,使文本能够平滑地环绕非矩形形状。属性决定元素在 3D 空间中旋转时其背面是否可见。如果背面不可见,浏览器就不会渲染它,从而提高性能。属性于强调文本块中的某些字符。原创 2025-07-11 15:10:49 · 141 阅读 · 0 评论 -
CSS+HTML实现移动端div左右滑动展示
CSS+HTML实现移动端div左右滑动展示//由于手机屏幕的宽度有限,内容太多移动导致不能放在一行,所以很多移动端网站的导航栏都有左右滑动效果<!--外部嵌套层--><div class="div"> <div class="box"> <div class="box1"></div> <div class="box1"></div> <div class原创 2022-01-11 14:48:43 · 2844 阅读 · 0 评论 -
css中如何让按钮中的文字数不确定时,居中显示
css中如何让按钮中的文字数不确定时,居中显示//html... <div class="bottom"> <div class="content"> 1+-------- 页面展示效果 页面展示效果 页面展示效果 页面 展示效果 页面展示效果 </div> </div>//css<style>... .bottom { position: fixed;原创 2021-08-06 16:09:37 · 154 阅读 · 0 评论 -
css中常用样式的设置(居中div的子元素,设置行数等)
css中常用样式的设置(居中div的子元素,设置行数等) display: -webkit-box; -webkit-box-orient: vertical; /* 指定div元素的子元素的排列方式*/ -webkit-line-clamp: 2; /* 设置文本行数 */ /* 对图片进行剪切 ,保留原比例 */ object-fit: cover; /* 属性允许你一特定原创 2021-06-25 15:28:21 · 754 阅读 · 0 评论 -
css中二倍图,三倍图的使用
css二倍图的使用参考:CSS 或 srcset 让浏览器自动切换 1X/2X/3X 图像移动端项目中 @2x 图 和 @3x 图 的使用(需要支持css3)/*默认大小*/.photo {background-image: url(image100.png);}/* 如果设备像素大于等于2,则用2倍图 */@media screen and (-webkit-min-device-pixel-ratio: 2),screen and (min--moz-device-pixel-ratio转载 2021-06-17 22:12:17 · 2513 阅读 · 0 评论 -
JS中clientHeight、scrollHeight、offsetHeight、scrollTop、offsetTop的定义
JS中clientHeight、scrollHeight、offsetHeight、scrollTop、offsetTop的定义如图所示:二、详细介绍这几个概念接着,我们来逐步了解一下这几个概念。①网页可见区域高:document.body.clientHeight;②网页正文全文高:document.body.scrollHeight;③网页可见区域高(包括边线的高):document.body.offsetHeight;④网页被卷去的高:document.body.scrollTop;转载 2021-03-11 21:44:14 · 760 阅读 · 0 评论 -
清除浮动,BFC(块格式上下文)
清除浮动,BFC(块格式上下文)块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。让浮动内容和周围的内容等高, 消除外边距合并,设置相关属性//创建一个会包含这个浮动的 BFC,通常的做法是设置父元素 overflow: auto 或者设置其他的非默认的 overflow: visible 的值。1. overflow: auto 2. display: fl原创 2020-12-20 16:29:28 · 259 阅读 · 0 评论 -
flex布局及相关属性
flex布局及相关属性Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。相关属性flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-contentflex-direction属性,决定主轴的方向(即项目的排列方向)。.box { flex-direction: row | row-reverse | column | column-reverse;}原创 2020-06-23 05:52:50 · 168 阅读 · 0 评论 -
word-break(指定如何在单词内断行)
word-break(指定如何在单词内断行)属性值:normal使用浏览器默认的换行规则。break-all允许在单词内换行。keep-all只能在半角空格或连字符处换行。break-word保持单词的完整性后,换行详情可见:https://developer.mozilla.org/zh-CN/docs/Web/CSS/word-break...原创 2020-03-21 21:43:07 · 533 阅读 · 0 评论 -
文本超出隐藏的处理(二)
文本超出隐藏的处理(二)< div style=“width: 300px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;”>如果实现单行文本的溢出,显示省略号,用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。实现方法:overflow: hidden;...原创 2020-01-26 09:08:18 · 232 阅读 · 0 评论 -
文本超出隐藏的处理(一)
Css多行文本超出隐藏:display: -webkit-box;-webkit-box-orient: vertical; //垂直方向-webkit-line-clamp: 2; //控制行数text-overflow : ellipsis ; //显示省略号overflow: hidden;...原创 2020-01-18 21:20:50 · 265 阅读 · 0 评论
分享