在日常开发展示页面，如果一段文本的数量过长，受制于元素宽度的因素，有可能不能完全显示，为了提高用户的使用体验，这个时候就需要我们把溢出的文本显示成省略号。...：规定当文本溢出时，显示省略符号来代表被修剪的文本 white-space：设置文字在一行显示，不能换行 overflow：文字长度超出限定宽度，则隐藏超出的内容 overflow设为hidden，...基于行数截断 纯css实现也非常简单，核心的css代码如下： -webkit-line-clamp: 2：用来限制在一个块元素显示的文本的行数，为了实现该效果，它需要组合其他的WebKit属性） display...因此，CSS加载是会阻塞Dom的渲染的。 由于js可能会操作之前的Dom节点和css样式，因此浏览器会维持html中css和js的顺序。因此，样式表会在后面的js执行前先加载执行完毕。...，仍有可能阻塞HTML解析，执行时机在load事件派发之前。
最后，我们使用 CSS 类来设置侧边栏和主要内容单元格的宽度，使其按比例分配空间。...总结 只能说 HTML 表格（table）布局和其他常见的布局方式相比，如CSS布局、flex布局等，在实现不同的布局需求时，各有优缺点。...代码冗长：在一些复杂的布局情况下，使用HTML表格布局可能需要写很多的 HTML 和 CSS 代码，导致代码冗长，不易维护。...相比之下，CSS 布局和 flex 布局可以更加灵活地实现各种复杂的布局需求，而且语义化更加明确，可读性和可维护性更高。...但是，在一些特定的场景下，HTML 表格布局仍然是一个不错的选择，例如呈现表格数据时（毕竟是本职工作）。
checkbox： 复选框 file：文件上传组件,提供"浏览"按下可以选择需要上传文件. hidden：隐藏字段. 数据会发送给服务器，但浏览器不进行显示。 u reset：重置按钮。...1.2.3 CSS的概述 1.2.3.1 CSS是什么 CSS 通常称为CSS样式或层叠样式表，主要用于设置HTML页面中的文本内容（字体、大小、对其方式等）、图片的外形（高宽、边框样式、边距等）以及版面的布局等外观显示样式...1.2.3.2 CSS名词解释 CSS (Cascading Style Sheets) ：指层叠样式表 样式：给HTML标签添加需要显示的效果。...在CSS中，执行这一任务的样式规则部分被称为选择器，本小节将对CSS基础选择器进行详细地讲解，具体如下： 1.2.4.1 元素选择器 标记选择器是指用HTML标记名称作为选择器，按标记名称分类，为页面中某一类标记指定统一的...行内元素默认的display属性值） block：此元素将显为块元素（块元素默认的display属性值） none：此元素将被隐藏，不显示，也不占用页面空间。
loginbar 面包屑：breadCrumb 当前的：current 小技巧：tips 功能区：shop 文章列表：list 提示信息：msg 合作伙伴：partner 友情链接：friendlink CSS...：hidden 显示：visible 溢出：overflow 列表：list 样式 style 导航：nav 显示类型：display 广告图片：banner 页眉：header 文件命名 主要的：master...层叠样式表 javascript 语言名字(类似python/php/c…) title 标题 body 身体 head 头 div 盒子(类似收纳箱) font 字体 width 宽 height...visibility 可见度 table 表格 thead 表头 tbody 表格内容 tr (table row) 行 td/th (table data, table headline)列 rowspan 合并行 colspan...hide 隐藏 test 测试 stopProperation 阻止冒泡 preventDefault 阻止默认行为 dom document object model 文档对象模型 ajax 啊甲克斯
imageView&quality=89" alt="图片显示失败"> 图片4、超链接（跳转链接）（1）target="_self... 注：本表为样表，单位可根据制定的建筑消防设施维护保养计划表确定的保养内容分别制表。...、多选输入框时，定义相关联的值（value="男"/value="0"） 在文本、密码输入框时，表示默认值（定义初始值） 按钮，定义按钮文字⑧file：文件上传（...：默认横向布局【Flex的布局内容较多，小伙伴们可以去参考一下前面的文章有专门介绍flex布局】3、overflow：滚动条（1）hidden：溢出隐藏【常用overflow: hidden; overflow-x
鉴于时不时有童鞋翻我以前的沸点，因此，本文收集了个人目前发过的所有CSS知识点动图，以便阅读。 需要说明的是，顺序仍是按当时发布顺序罗列的，还没有系统的总结，多多包涵。...你以为自己是方的，在别人眼里你却是圆的 ? 03.【BFC应用】?BFC应用之阻止外边距合并（margin collapsing） ? 04.【BFC应用】?BFC应用之消除浮动的影响 ? 05....flex布局，当flex-grow之和小于1时，只能按比例分配部分剩余空间，而不是全部 ? 07.【input的宽度】?并不是给元素设置display:block就会自动填充父元素宽度。...css绘制彩带的原理 ? 19.【隐藏文本】?隐藏文字内容的两种办法 ? 20.【居中】?实现居中的一种简单方式 ? 21.【角向渐变】?新的渐变：角向渐变。可以用来实现饼图 ? 22....浏览器默认显示tab为8个空格，tab-size可以指定空格长度 ? 29【动画暂停】?CSS动画其实是可以暂停的 ? 30【object-fit】?
关于本文要说的这个特性，我之前也不清楚，还是遇到问题之后，阅读规范才知道的，故事是下面这样的： 某日被告知有一个bug：在网页宽度较小时，发现 Flex 容器被子元素撑大导致UI显示异常的问题，如下：...然鹅，还是不知道原因吖，搜索引擎找了一番也没找到什么有说服力的答案，于是，我决定研究一下 flex 的规范（https://www.w3.org/TR/css-flexbox-1/#min-size-auto...），看到如下一段话： 通过阅读标准，可以发现： 在非滚动容器中，主轴方向Flex Item 的最小尺寸是基于内容的最小尺寸，此时 min-width 的值是 auto。...editors=1100 当 item 的内容 child 宽度是250px时，此时也不能按照预期缩小。可能这个时候，第一反应是给 item 加 flex-shrink，然而并木有用。...因此，我们可以给它加上 overflow: hidden 或者是 min-width: 0 来阻止它撑破父容器。 最后的最后，吐槽一句，CSS真是太复杂了...
垃圾回收器一直处于工作状态，严重影响浏览器性能。 IE7中，垃圾回收器会根据内存分配量与程序占用内存的比例进行动态调整，开始回收工作。...Css2和css3的差别 在CSS2基础上新增属性，比如圆角、阴影、:last-child与:nth-last-child()伪类选择器等 Grunt，glup，webpack打包工具的比较 gulp和...为什么要初始化css样式 因为浏览器的兼容的问题，不同浏览器有些标签的默认值是不同的，如果没有CSS初始化往往会出现浏览器之间的页面显示差异。...页面来源的判断 如何防止浏览器缓存 在引用js、css、文件的url后面加上 ?...什么是单线程 单线程在程序执行时，所走的程序路径按照连续顺序排下来，前面的必须处理好，后面的才会执行。
–注释内容–> css基础 一、css概念及特点 css—层叠样式表 特点：实现了结构与表现相分离 作用：定义html元素如何在网页中显示 二、css基础语法 css由选择器和声明两大部分组成，声明又是由属性和属性值组成...标签，支持js改变dom，@import不支持（是否支持js改变dom） 四、样式表的优先级 样式表的优先级 采取就近原则，即离被设置的元素越近，优先级越高 当css属性值中出现!...hidden 内容会被裁剪，隐藏不可见 scroll 溢出部分的内容以滚动条的形式查看，如果没有溢出，显示默认的滚动条 auto 容器溢出时显示滚动条 inherit 规定从父元素继承overflow...主轴在垂直方向，起点在下沿 2.设置flex项目是单行显示还是多行显示 语法：flex-wrap:nowrap|wrap|wrap-reverse; nowrap 默认值，不换行 wrap 换行 wrap-reverse...概念—写一套css样式可以应用在多个终端设备 优点：可以同时适配多个终端，灵活性更强 缺点：工作量增加，会造成代码冗余，加载时间加长 原理：媒体查询 四、媒体查询 1.外联式媒体查询 语法： <link
通常我们再滑屏页面，会调用css的html{-ms-touch-action: none;}可以阻止默认情况的发生：阻止页面滚动MSPointerUp——当手指离开屏幕时触发 移动端click屏幕产生...什么是Retina 显示屏，带来了什么问题 retina：一种具备超高像素密度的液晶屏，同样大小的屏幕上显示的像素点由1个变为多个，如在同样带下的屏幕上，苹果设备的retina显示屏中，像素点1个变为4...个 在高清显示屏中的位图被放大，图片会变得模糊，因此移动端的视觉稿通常会设计为传统PC的2倍 那么，前端的应对方案是： 设计稿切出来的图片长宽保证为偶数，并使用backgroud-size把图片缩小为原来的...1/2，例如视觉稿40px的字体，使用样式的写法为20px .css{font-size:20px} 参考《高清显示屏原理及设计方案》 ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉 ios用户点击一个链接...保留 3D*/ -webkit-transform-style: preserve-3d; /*（设置进行转换的元素的背面在面对用户时是否可见：隐藏）*/ -webkit-backface-visibility
（或者把其中一个margin改为padding） 解决高度塌陷 阻止元素被浮动元素覆盖 5....visibilty:hidden //隐藏对应元素，在文档中仍保留位置 opacity：0 //隐藏元素，占位置，可添加事件 9. css中的overflow属性 scroll //必会出现滚动条...auto //子元素内容大于父元素，显示滚动条，超出显示，不超出不显示 visible //溢出内容出现在父元素之外 hidden //溢出隐藏 10....溢出文字的省略显示 单行文本 white-space: nowrap //(强制一行显示) overflow: hidden //(溢出隐藏) text-overflow: ellipsis //(显示省略标记...为什么要初始化css 因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没有初始化CSS，往往会导致页面在不同浏览器之间出现差异。
在许多情况下，添加或删除一个单词会改变 UI 的外观，更糟的是，它可能会破坏原有的设计，使其无法访问。在我学习 CSS 的早期，我低估了添加或删除一个单词的作用。...image.png 名字的长度可以变化，特别是如果你是在一个多语言网站工作。在上面的示例中，随着名称变长，它被包装到第二行。这里有一些问题 应该把这段文字截短吗 应该换成多行吗？...长内容 在，大家已经对问题有所了解，我们接着深入研究CSS 技巧，这些技巧可为处理长内容提供解决方案。...image.png Hyphens CSS 属性 hyphens 告知浏览器在换行时如何使用连字符连接单词。可以完全阻止使用连字符，也可以控制浏览器什么时候使用，或者让浏览器决定什么时候使用。...image.png 没有text-truncation属性或其他属性，但是它混合了一些CSS属性，可以为我们完成工作。
7、隐藏元素的方法有哪些？ 8、图片间隙问题如何解决 9、项目中你是如何做图片优化的？ 10、简述rem布局原理 11、解释下浮动和它的工作原理？清除浮动有哪些方式？ 12、什么是 BFC？...前言 CSS 是层叠样式表（Cascading Style Sheets）的简写，它是一种用于定义网页和网页应用程序外观的标准格式语言。...等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。...1、@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。...1、在css样式表中书写时，id选择符前缀应加"#“，class选择符前缀应加”." 2、id属性在一个页面中书写时只能使用一次，而class可以反复使用 3、id作为元素标签用于区分不同结构和内容
避免在CSS文件中使用@import。 @import，根据它的工作原理，很慢。 对于Start Render性能来说真的非常糟糕。...这绝对是WebKit / Blink中的一个错误 - 缺少引号不应该隐藏Preload Scanner中的@imported样式表。...为了解决这个问题，我提出了以下问题并从那里开始工作： 如果： 在CSSOM构造上阻止CSS后定义的同步JS; 同步JS阻止DOM构造 那么 - 假设没有相互依赖 - 哪个更快/更喜欢？...entry（1）是计划在其他文件到达和/或执行时执行某些JavaScript的HTML; entry（2）执行它到达的那一刻; entry（3）是CSS，所以不执行任何JavaScript; 在CSS...在DOM需要时加载CSS，这将取消阻止“开始渲染”并允许渐进式渲染 我上面概述的所有内容都遵循规范或已知/预期的行为，但是，一如既往，自己测试一切。
（版本信息：IOS11，5.6.2） 这个最省心，支持media query，支持display:flex，在QQ手机邮箱的基础上针对原生客户端又做了一些体验优化。...我们这个需求最大的功能点就是在大于900宽度的屏幕上封面图按260宽渲染，在小于900宽度下铺满屏幕。...只好祭出ghost table，把用于其他客户端的那个正常的图片隐藏了，然后显示一个专门用于outlook的图。 <!...6 转发问题 通过上面的工作，系统发的邮件虽然可以适配了，但是转发的时候就还是会有问题，因为用户转发的是经过客户端处理过的邮件，要么是css不全，要么是ghost table没了。.../email/base/mso 3 不同邮件服务商读取 HTML 邮件已知问题一览表： http://app1.studiocloud.com/support/index.php?
对于现代浏览器来说，css中指定的width就是content width。 对于IE5.x和6来说，在怪异模式中width等于content、左右padding和左右border。...值 描述 flex 设置弹性容器 block 此元素将显示为块级元素，此元素前后会带有换行符。 inline 默认。此元素会被显示为内联元素，元素前后没有换行符。...（CSS2.1 新增的值） none 此元素不会被显示。 list-item 此元素会作为列表显示。...display:node：把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删掉。 如何画一个三角形 左右边框设置为透明，长度为底部边框的一半。...，使下面的子div都处在父div的同一个BFC区域之内 4.分属于不同的BFC时，可以阻止margin重叠 CSS3特性 vh和vw vh 相对于视窗的高度，视窗高度是100vh vw 相对于视窗的宽度
你是否经常希望有一个CSS特性可以轻松创建一个可滚动的容器? CSS scroll snap 可以做到这一点。在早期的前端开发中，我依靠 JS 插件来创建滑块组件。...接着，我们来看看如何使用CSS scroll snap。 CSS Scroll Snap 简介 要在容器上使用scroll snap，它的子项目应该内联显示，这可以用我上面解释的方法之一来实现。...为了更容易理解，下面是它的工作原理。 image.png 假设我们在滚动容器上有一块磁铁，这将有助于我们控制捕捉点。 如果scroll-snap-type是垂直的，则对齐对齐将是垂直的。...这样做的目的是提供额外的空间，以便box-shadow可以按预期显示。 image.png 头像列表 对于此用例，我感兴趣的是将center作为scroll-snap-align的值。...这是滚动对齐的一种不好用法，它阻止用户自由滚动内容以读取内容。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
