CSS/CSS3
文章平均质量分 63
清颖~
前端程序媛一枚。越努力越幸运~
展开
-
前端基础知识回顾——行内元素与块级元素
默认情况下,行内元素不会以新行开始,而块级元素会新起一行。一般情况下,行内元素只能包含数据和其他行内元素;而块级元素可以包含行内元素和其他块级元素。原创 2022-01-18 14:37:14 · 1247 阅读 · 1 评论 -
CSS实践调研,行业流行的CSS代码风格
继上一篇博客,补充一些行业内的CSS书写案例。原创 2024-02-06 13:24:06 · 150 阅读 · 0 评论 -
前端开发中需要注意的CSS命名规则以及书写顺序
CSS命名一般是用 BEM 规则命名的。它背后的想法是将用户界面划分为独立的块。`BEM`的意思就是`B模块(block)`、`E元素(element)`、`M修饰符(modifier)`,即:`[block]__[element]--[modifier]`。关于CSS属性的书写顺序建议:一般来说,要先定义好布局,即先写位置、再写大小边距,再写文字样式、背景色,最后写其他属性。原创 2024-01-12 11:06:42 · 2576 阅读 · 0 评论 -
前端必知:如何判断元素出现在视口内
要检测一个元素是否可见或者两个元素是否相交的需求场景有这些: - 图片懒加载——当图片滚动到可见时才进行加载- 内容无限滚动——也就是用户滚动到接近内容底部时直接加载更多,而无需用户操作翻页,给用户一种网页可以无限滚动的错觉- 检测广告的曝光情况——为了计算广告收益,需要知道广告元素的曝光情况 - 在用户看见某个区域时执行任务或播放动画原创 2023-01-30 22:33:40 · 2478 阅读 · 0 评论 -
如何实现全网置灰?CSS3来解决
小伙伴发现:“怎么某APP是灰的?不会是手机出问题了吗?” 然后再打开其他APP,发现:“都是灰的啊!明白了,看来是有大事发生……赶紧打开新闻看看”。对于前端开发来说,什么效果不是用代码可以实现的呢?下面我们就灰色主题如何设置来研究一番。原创 2022-12-30 19:01:29 · 3617 阅读 · 0 评论 -
前端如何优雅的实现跨终端开发(PC端+移动端)
仅仅依靠 CSS媒体查询,只是让 PC端 的页面在 Mobile端 可用,远远达不到原生 Mobile端 的效果。CabloyJS优先适配Mobile端,再把 Mobile端 的交互体验和开发模式无缝带入 PC端。这样可以达到期望的效果但是同样的业务逻辑需要开发两套代码,增加了时间成本和人力成本。只需要一套代码,同时兼容Mobile端和PC端,并且Mobile端达到原生交互体验。原创 2022-12-24 17:59:35 · 4599 阅读 · 0 评论 -
CSS隐藏滚动条
亲测有效,css实现隐藏滚动条。网上一搜就是3种方法实现隐藏滚动条,实际试了我这边没起作用。真正实现方法请看正文。原创 2022-09-01 20:00:30 · 7051 阅读 · 2 评论 -
前端CSS必知:BFC及其触发条件
文章目录1. bfc的理解(块级格式化上下文)2. 触发bfc的方式:3. bfc解决的问题:外边距合并,检测浮动高度,制作右侧自适应盒子4. bfc布局规则特性:5. 两栏布局6. 补充:7. 块元素高度不设或宽度不设的情况。将本人好久之前的 云笔记 搬到博客上来,统一维护。1. bfc的理解(块级格式化上下文)可以看作是隔离了的独立容器,内部元素的布局,不会影响外部元素。可通过css属性触发。浮动元素产生了浮动流,块级元素看不到;文本类属性的元素(inline),文本元素和产生了bfc的元原创 2021-08-08 23:33:27 · 6185 阅读 · 5 评论 -
Flex弹性布局详解
Flex是弹性布局,也叫“弹性盒子”,前端开发常用布局,必备知识。本文详细介绍网页制作中常用的flex属性。原创 2021-07-16 16:06:13 · 551 阅读 · 12 评论 -
超链接中的锚点详解,各大网页中的回顶部按钮,url中的hash #
#(井号)的含义#代表网页中的一个位置,#右边的字符就是该位置的标识符。我们经常看可以看到大部分网页都有“回顶部”的按钮,其实就是通过锚点设置hash值来做的。设置方法:step1: 在页面顶部的div加一个id=“top”,例如:<div id="top">顶部</div>step2: 在合适的位置定位一个回顶部的按钮,设置href="#top",例如...原创 2019-07-10 18:21:05 · 639 阅读 · 0 评论 -
纯CSS设置元素垂直水平居中的几种方法
body中代码都类似:外部div与内部div<body> <span>1</span> <div class="f1"> <div class="box1"></div> </div> <span>2</span> <div class="f2"> <...原创 2019-04-01 11:13:37 · 351 阅读 · 0 评论 -
css使溢出的文字显示为省略号...
html代码: <div class="box1"> 单行显示:autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。 当用户在自动完成域中开始输入时,浏览器应该在该域中显示填写的选项。 </div> <div class="box2"> 多行显示:autocomplete 属性规定 form 或 input 域...原创 2019-04-21 17:08:35 · 322 阅读 · 0 评论