首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

小智在这3年开发遇到 CSS 问题及解决方案,有大佬帮他总结好了 !

移动设备上,浏览器会显示一个水平滚动条。 ? 解决方法就是使用 flex-wrap: wrap,这样当水平空间不够时,浏览器会帮我们自动换行。...长单词和链接 当在移动屏幕上阅读一篇文章时,一个长单词或内联链接可能会导致出现水平滚动条。使用CSS word-break可以防止这种情况发生 ?...网格auto-fit和auto-fill之间差异误解 CSS grid,repeat函数可以创建响应列布局,而不需要使用媒体查询。...水平滚动条 由于元素宽度,有些元素会导致出现水平滚动条。 找到这个问题原因最简单方法就是使用 CSS outline。...压缩或拉伸图像 CSS调整图像大小时,如果宽高比与图像宽度和高度不一致,则可能会对其进行压缩或拉伸。

3.6K10

CSS总结

,左上角是0 0 ,单位是像素(0px,0px)] 背景图像依附方式 background-attachment:[scroll ,fixed]     注:背景图像,默认情况下是进行水平和垂直位置上平铺...,默认盒子左上方显示。...核心思想是把多张图片合成一张图片里,通过修改背景属性定位来控制到底显示图片中哪些部分。 [5]:CSS常见布局方式:一行一列居中、一行两列居中、两行两列、三行两列、三行三列....十、部分CSS样式详解   1.CSS溢出  功能:设置当对象内容超过其指定高度及宽度时如何显示      语法:Overflow:visible(默认值,剪切内容,也添加滚动条)              ...auto(必须时对象内容才会被裁切或显示滚动条)                 hidden(不显示超过对象尺寸内容)               scroll(总是显示滚动条)   2.Zoom

2.1K10
您找到你想要的搜索结果了吗?
是的
没有找到

前端成神之路-CSS高级技巧

元素显示与隐藏 目的 让一个元素页面消失或者显示出来 场景 类似网站广告,当我们点击关闭就不见了,但是我们重新刷新页面,会重新出现!...属性值 描述 visible 剪切内容也添加滚动条 hidden 不显示超过对象尺寸内容,超出部分隐藏掉 scroll 不管超出内容否,总是显示滚动条 auto 超出自动显示滚动条超出不显示滚动条...CSS用户界面样式 所谓界面样式, 就是更改一些用户操作样式,以便提高更好用户体验。 更改用户鼠标样式 (滚动条因为兼容性非常差,我们研究) 表单轮廓等。...通常我们使用于强制一行显示内容 white-space:normal ;默认处理方式 white-space:nowrap ; 强制一行显示所有文本,直到文本结束或者遭遇br标签对象才换行。...5.4 制作精灵图(了解) CSS 精灵其实是将网页一些背景图像整合到一张大图中(精灵图),那我们要做,就是把小图拼合成一张大图。 大部分情况下,精灵图都是网页美工做。

6.8K30

CSS】文字溢出问题 ( 强制文本一行显示 | 隐藏文本超出部分 | 使用省略号代替文本超出部分 )

一、文字溢出问题 ---- 元素对象内部显示文字 , 如果文本过长 , 则会出现文本溢出问题 ; 下面的示例 , 150x25 像素盒子 , 显示 骐骥一跃,不能十步;驽马十驾,功不舍;...一段话 , 明显盒子太小 , 默认显示效果如下 : 文字溢出代码示例 : <!...; 显示效果 : 二、文字溢出处理方案 ---- 文字溢出处理方案 : 首先 , 强制文本一行显示 ; white-space: nowrap...文本显示方式 : 默认方式 : 显示多行 ; white-space: normal; 显示一行 : 强行将盒子文本显示一行 ; white-space: nowrap; text-overflow...title> div { width: 150px; height: 25px; border: 1px solid red; /* 首先 强制文本一行显示

3.9K10

防御式CSS是什么?这几点属性重点防御!

这是另一回事,但尽量使用 flex-wrap 来避免意外布局行为(我们例子,是水平滚动)。 2.间距 我们开发者需要考虑不同内容长度。这意味着,间距应该添加到组件,即使它看起来不需要。...防止图像被拉伸或压缩 无法控制图片高宽比情况下,如果用户上传图片与高宽比不符,最好提前考虑并提供解决方案。 在下面的例子,我们有一个带有照片的卡片组件。它看起来不错。...CSS变量回退 CSS变量在网页设计得到了越来越多应用。我们可以应用一种方法,CSS变量值因某种原因为空情况下,以一种破坏体验方式使用它们。 通过 JS 输入CSS变量值时特别有用。...这个背景只有图片加载失败时才会显示出来。 12.小心CSS网格固定值 假设我们有一个包含aside和main网格。...我们可以控制显示滚动条或不只是在有很长内容情况下。

4.3K30

CSS——06扩展:高级

元素显示与隐藏 目的 让一个元素页面消失或者显示出来 场景 类似网站广告,当我们点击关闭就不见了,但是我们重新刷新页面,会重新出现!...属性值 描述 visible 剪切内容也添加滚动条 hidden 不显示超过对象尺寸内容,超出部分隐藏掉 scroll 不管超出内容否,总是显示滚动条 auto 超出自动显示滚动条超出不显示滚动条...CSS用户界面样式 所谓界面样式, 就是更改一些用户操作样式,以便提高更好用户体验。 更改用户鼠标样式 (滚动条因为兼容性非常差,我们研究) 表单轮廓等。...通常我们使用于强制一行显示内容 white-space:normal ;默认处理方式 white-space:nowrap ; 强制一行显示所有文本,直到文本结束或者遭遇br标签对象才换行。...然而,一个网页往往会应用很多小背景图像作为修饰,当网页图像过多时,服务器就会频繁地接受和发送请求,这将大大降低页面的加载速度。

4.7K40

如何使用 CSS 设置和自定义水平和垂直滚动条

例如,您可以定制滚动条样式以匹配网站外观和感觉。本文中,我们将讨论何时设置水平和垂直滚动条,如何设置它们以及如何使用CSS自定义它们外观。...下面的截图显示了我们即将创建侧边栏:侧边栏要创建上面的侧边栏,我们将在CSS中进行以下更改:将导航栏显示更改为flex,并将方向设置为column为侧边栏设置背景颜色为导航链接添加底部边框增加导航链接字体大小和字体粗细为侧边栏设置固定宽度增加...使用滚动条管理内容溢出防止导航项目显示侧边栏之外非常简单。只需使用一行CSS代码即可完成此操作,该行代码使用overflow-y属性。...一次性样式所有滚动条大多数情况下,您可能希望整个网站所有垂直和水平滚动条上保持一致样式。...为了实现所有滚动条统一定制,我们可以按如下方式应用样式:选择任何特定元素、标签或类名情况下应用滚动条样式在网站同时具有水平和垂直滚动条情况下,为两个属性height和width同时赋值。

61100

「译」前端项目中常见 CSS 问题

macOS 下 Chrome ,这看起来不错,但是 Windows 下 Chrome 滚动条始终存在(即使内容很短)。这是因为 scroll-y 会无视内容,一直显示滚动条。...移动端下,浏览器将会出现水平滚动条。 image.png 左边:出现水平滚动条,并且项目没有换行。右边:项目换行,呈两行显示 解决方法很简单。wrapper 应该在空间不足时让项目换行。...CSS 网格布局关于 auto-fit 和 auto-fill 差异误解 CSS 网格布局,repeat 函数可以不使用媒体查询情况创建响应式列布局。...水平滚动条 有些元素宽度可能会导致出现一个水平滚动条。 要找到问题根源,最简单方法就是使用 CSS outline。Addy Osmani 写了一个方便脚本 。...一些图片必须在裁剪或者不调整大小情况显示,并且某些平台会强制用户以特定尺寸裁剪或上传图片。例如,Dribbble 规定上传缩略图尺寸为 800 x 600 像素。 18.

2.1K10

CSS vw让overflow:auto页面滚动条出现时不跳动

一、水平居中布局与滚动条跳动千年难题 当前web届,绝大多数页面间布局都是水平居中布局,主体定个宽度,然后margin: 0 auto节奏~ 例如,妇女之友大淘宝首页: ?...开始只有头部一些信息加载,此时页面高度有限,没有滚动条;然后,更多内容显示滚动条出现,占据可用宽度,margin: 0 auto主体元素自然会做偏移——跳动产生。...阿弥陀佛,骚年,请看我手中这盏灯…… 二、CSS3计算calc和vw单位巧妙实现滚动条出现页面不跳动 很简单,只要一行代码就搞定了: .wrap-outer { margin-left: calc...首先,.wrap-outer指的是居中定宽主体父级,如果没有,创建一个(使用主体也是可以实现类似效果,不过本着宽度分离原则,推荐); 然后,calc是CSS3计算,IE10+浏览器支持,IE9...您可以狠狠地点击这里(IE10+):页面出现滚动条时候没有跳动demo demo页面,标题和下面的妹子都是居中效果。

4.2K20

js怎么让指定方法先后顺序_jquery固定table表头

添加到滚动条容器   container.appendChild(bak);   // 将拷贝得到表格删除数据行后添加到创建div   bak.appendChild(tb2);   ...// 设置创建divposition属性为absolute,即绝对定于滚动条容器(滚动条容器position属性必须为relative)   bak.style.position = “absolute...block,即显示div(貌似也不是必须,但如果你希望总是显示拷贝得来表头,这个属性还是有用处)   bak.style.display = “block”;   // 设置创建divleft...= “0px”;   bak.style.width = “100%”;   // 给滚动条容器绑定滚动条滚动事件,滚动条滚动事件发生时,调整拷贝得来表头top值,保持其可视范围内,且滚动条容器顶端...,覆盖住后面几列数据滑动到第一列下面的情况       //如果有必要也可以设置一个z-index属性       (this).children().eq(0).css({ “position”: “

7.2K20

前端知识点总结(html+css)(上)

文章分为上(html,css(js)下(vue)三部分。 html篇 html应该是前端中最简单知识点了,标签用着用着就熟记于心,面试过程对html提问更是少之又少,话不多说,上干货。...(如div下可包含div) 行内元素(常见行内元素a,span.img) 一行显示多个 宽度为内容宽度 不可以设置高度和宽度 标签内一般包含标签(如a标签内包含a标签) 行内块元素 行内块元素包含块级元素和行内元素特征...6px solid red 8. display:none、visibilty:hidden和opacity:0区别 display:none //不显示对应元素,文档不占位置...visibilty:hidden //隐藏对应元素,文档仍保留位置 opacity:0 //隐藏元素,占位置,可添加事件 9. cssoverflow属性 scroll //必会出现滚动条...auto //子元素内容大于父元素,显示滚动条,超出显示超出不显示 visible //溢出内容出现在父元素之外 hidden //溢出隐藏 10.

25210

CSS入门?一篇就够了!

尽量使用系统默认字体,保证在任何用户浏览器中都能正确显示CSS Unicode字体 CSS 设置字体名称,直接写中文是可以。...行内元素特点: (1)和相邻行内元素一行上。 (2)高、宽无效,但水平方向padding和margin可以设置,垂直方向无效。 (3)默认宽度就是它本身内容宽度。...(停职留薪) overflow 溢出 检索或设置当对象内容超过其指定高度及宽度时如何管理内容。 visible :  剪切内容也添加滚动条。...auto :   超出自动显示滚动条超出不显示滚动条 hidden :  不显示超过对象尺寸内容,超出部分隐藏掉 scroll :  不管超出内容否,总是显示滚动条 CSS高级技巧 CSS用户界面样式...通常我们使用于强制一行显示内容 normal :  默认处理方式 nowrap :  强制一行显示所有文本,直到文本结束或者遭遇br标签对象才换行。

5K20

html外边距如何归零,盒子模型overflow属性,border属性,padding与margin属性

2.页面所有元素都可以看成一个盒子,占据着一定页面空间。...:显示滚动条 ⑶auto:如有超出部分,显示滚动条(浏览器自动判断) ㈢border属性 ⑴border-width:px(像素),thin(细),medium(中等),thick(粗) ⑵border-style...; ⑸用border属性作出水平分割线 ㈣padding与margin属性 1.对浏览器默认设置清零,采取全局声明 注意:属性取值,只有当它取值为零时候,才可以省略它单位,其他情况是不可以...★用margin属性来进行盒子设定时候注意两点: ⑴div标签做盒子时候,有一个特点,每一个div标签做出来盒子,有一个换行效果,就是它会独占一行。 ⑵显示结果这个上下边距是什么样?...图片在添加时会发现默认每两个图片之间有一定空白距离,它不是margin属性设定出来距离,而是这个图像框里面默认情况下,会有一个文字浏览器默认设定空白距离,这个距离如何去掉?

1.3K20

CSS 关于 Overflow ,你需要了解这些知识点!

作者:Ahmad shaded 译者:前端小智 来源:sitepoint CSS,当一个元素内容太大而无法容纳时,我们可以对其进行控制。...在上面的模型,我们有水平放置的卡片,还有一个滚动条,可以滚动并显示更多内容。...为此,我们需要执行以下操作: 将卡片显示一行,为此使用flexbox 向容器添加overflow-x .wrapper { display: flex; overflow-x:...下图是使用基于动量滚动效果。 ? 内联块元素 根据CSS规范: 将对象呈递为内联对象,但是对象内容作为块对象呈递。旁边内联对象会被呈一行内,允许空格。...水平滚动问题 通常,我们会遇到水平滚动问题,当原因未知时,滚动滚动会变得更加困难。 本节,我将列出水平滚动一些常见原因,以便大家以后构建布局时可以想到到它们。

3.8K20

「学习笔记」CSS基础

「学习笔记」CSS基础 CSS构造块 「1. HTML局限性」 HTML满足不了设计者需求,可以将网页结构与样式相分离,这样就可以更改网页结构前提下,更换网站样式。...行内块元素特点 和相邻行内元素(行内块)一行上,但是之间会有空白风险。一行可以显示多个 默认宽度就是它本身内容宽度。 高度,行高,外边距以及内边距都可以控制。...浮动 让盒子从普通流浮起来,主要作用让多个块级盒子一行显示。 C. 定位 将盒子定在浏览器某一个位置——CSS 离不开定位,特别是后面的 js 特效。 「2....---- CSS高级技巧 元素显示与隐藏 **目的:**让一个元素页面消失或者显示出来 **场景:**类似网站广告,当我们点击关闭就不见了,但是我们重新刷新页面,会重新出现!...属性值 描述 visible 剪切内容也添加滚动条 hidden 不显示超过对象尺寸内容,超出部分隐藏掉 scroll 不管超出内容否,总是显示滚动条 auto 超出自动显示滚动条超出不显示滚动条

3.2K30

前端学习(7)~css学习(一):字体属性和文本属性

本文重要内容 CSS单位 字体属性 文本属性 定位属性:position、float、overflow等 CSS单位 html单位只有一种,那就是像素px,所以单位是可以省略,但是CSS不一样...上面这几个属性可以连写,但是有一个要求,font属性连写至少要有字号和字体,否则连写是生效(相当于没有这一行代码)。...参阅:list-style-position 可能值。 list-style-image 使用图像来替换列表项标记。参阅:list-style-image 可能值。...overflow属性:超出范围内容要怎么处理 overflow属性属性值可以是: visible:默认值。多余内容剪切也添加滚动条,会全部显示出来。...hidden:不显示超过对象尺寸内容。 auto:如果内容超出,则不显示滚动条;如果内容超出,则显示滚动条。 scroll:Windows 平台下,无论内容是否超出,总是显示滚动条

1.8K20

【适配】425- 彻底搞懂移动Web开发viewport与跨屏适配

视口范围内图像会以剪切形式,投影到到世界坐标窗口中,完成图像可视化展示。 Web 浏览器,视口是整个文档可见部分。如果文档大于视口,则用户可以通过滚动来移动视口。...白话描述一下: ●计算机把图像渲染到显示过程,会先把图像画在一个逻辑层画布上,然后从这个画布框选一部分,将其投影到显示层。 ●这个选框就是视口,显示层就是窗口。...●浏览器,我们可以通过滚动条来移动视口以看到更多网页内容。 更形象视口解释: ?...如果浏览器和针对 PC 制作网页都不做任何处理,那么窄屏设备上加载网页,我们看到效果便是默认显示网页左上角部分,然后通过水平和竖直方向滚动来浏览网页其他部分。...按照 2.1 里 viewport 解释,如此设计,会把逻辑层画布 980px 图像投影显示到 320px 屏幕上,看到效果便是一个挤在一起看不清楚细节缩小版页面。 ?

2.8K30

学前端到了CSS阶段,你一定要掌握这9大防御式开发技能

我们CSS布局时,是按照设计师效果来开发,但是实际网页内容是动态,网页上内容是可以改变,如:文字数量,图片尺寸、窗口大小等,再加上用户一些意想不到行为和运行环境,从而造成CSS布局效果并没有按照我们预期效果显示...三、9个具有防御式CSS代码① :场景一:单行文本过长我们设计时理想效果是标题文字超过8个字,正好显示完整。但实际应用时,有可能标题内容过长造成换行显示。... 5、场景五:必要时显示滚动条在内容比较长情况下,可以通过设置 overflow-y控制滚动条是否展示。...--以防万一,子项个数不够,最后一排出现两端对齐,达不到预期效果--> 9、场景九:grid网格响应式断行效果处理当我们想尽可能多一行显示子项个数时...,有可能会出现子项个数不满一行情况

1.7K00

每个前端开发需要了解10个强大CSS属性

Box Reflect Box Reflect 能够组件下方创建其反射效果。对于这个演示,我使用了一个SVG波浪图像,我是通过这个网站获取。...是否支持特定属性 要检查特定属性CSS是否受支持,可以使用 @supports 规则。...如果支持,将执行第一个规则块样式规则;如果不支持,则执行第二个规则块备用样式规则。 这种方式可以用来检查任何CSS属性支持情况,以便根据支持情况应用不同样式规则。...Masks 可以CSS中使用图像遮罩。...Filter 我们可以使用CSS图像添加惊人滤镜效果。滤镜效果是我们每个照片分享应用程序中都会看到功能,现在让我们看看它们有多容易实现。

24120

彻底搞懂移动Web开发viewport与跨屏适配

视口范围内图像会以剪切形式,投影到到世界坐标窗口中,完成图像可视化展示。 Web 浏览器,视口是整个文档可见部分。如果文档大于视口,则用户可以通过滚动来移动视口。...白话描述一下: ●计算机把图像渲染到显示过程,会先把图像画在一个逻辑层画布上,然后从这个画布框选一部分,将其投影到显示层。 ●这个选框就是视口,显示层就是窗口。...●浏览器,我们可以通过滚动条来移动视口以看到更多网页内容。 更形象视口解释: ?...如果浏览器和针对 PC 制作网页都不做任何处理,那么窄屏设备上加载网页,我们看到效果便是默认显示网页左上角部分,然后通过水平和竖直方向滚动来浏览网页其他部分。...按照 2.1 里 viewport 解释,如此设计,会把逻辑层画布 980px 图像投影显示到 320px 屏幕上,看到效果便是一个挤在一起看不清楚细节缩小版页面。 ?

3.1K20
领券