![](https://img-blog.csdnimg.cn/20210111203141674.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
CSS问题
前端CSS问题
IamSmaLLR.
这个作者很懒,什么都没留下…
展开
-
什么是图片懒加载
当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径(这样就只需请求一次),当图片出现在浏览器的可视区域内时,才设置图片真正的路径,让图片显示出来。这就是图片懒加载。 通俗一点: 1、就是创建一个自定义属性data-src存放真正需要显示的图片路径,而img自带的src放一张大小为1 * 1px的图片路径。 2、当页面滚动直至此图片出现在可视区域时,用js取到该图片的data-src的值赋给src。 ps:自定义属性可以取任何名字 <img src="xx原创 2021-02-19 00:46:15 · 471 阅读 · 0 评论 -
重排(回流,重构)和重绘
重绘(repaint或redraw):当盒子的位置、大小以及其他属性,例如颜色、字体大小等都确定下来之后,浏览器便把这些原色都按照各自的特性绘制一遍,将内容呈现在页面上。重绘是指一个元素外观的改变所触发的浏览器行为,浏览器会根据元素的新属性重新绘制,使元素呈现新的外观。触发重绘的条件:改变元素外观属性。如:color,background-color等。 注意:table及其内部元素可能需要多次...原创 2020-09-23 11:16:59 · 682 阅读 · 0 评论 -
多行文字垂直居中的方法
方法一:父元素使用display:table和子元素使用display:table-cell属性来模拟表格,子元素设置vertical-align:middle和text-align:center即可垂直居中。 .div1{ height:300px; width: 300px; background-color: cadetblue; display: tabl...原创 2020-09-22 01:11:01 · 846 阅读 · 0 评论 -
display:none;opacity:0;visibilty:hidden;区别与联系
共同点:他们都会让元素隐藏;区别: 结构 display:none会让元素完全从渲染树中消失,渲染时不再占据任何空间,不能点击;visibilty:hidden不会让元素从渲染树上消失,渲染元素继续占据空间,只是内容不可见,不能点击;opacity:0不会让元素在渲染树中消失,渲染元素继续占据空间,只是内容不可见,可以点击;继承 display:none和opacity:0:是非继承属性,子孙节...原创 2021-01-08 02:40:24 · 266 阅读 · 1 评论 -
flex:1指什么?
https://www.cnblogs.com/LangZ-/p/12703858.html原创 2021-01-08 18:20:55 · 1303 阅读 · 0 评论 -
BFC的理解。
BFC(Block Formatting Context)即格式化上下文,既不是一个CSS属性,也不是一段代码,是CSS2.1规范中的一个概念。 决定元素的内容如何渲染以及与其他元素的关系和交互。 BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。 BFC五条规则: 1.BFC有隔离作用,内部元素不会受外部元素的影响。 2.一个元素只能存在于BFC中。 3.BFC内元素按正常流排列,元素之间的间隙由元素的外边距控制。 4.BFC中的内容不会与外面浮动的元素重叠。 5.计算BFC的高原创 2021-01-10 14:33:42 · 110 阅读 · 0 评论 -
CSS问题
● link标签和import标签的区别参考回答:link属于html标签,而@import是css提供的页面被加载时,link会同时被加载,而@import引用的css会等到页面加载结束后加载。link是html标签,因此没有兼容性,而@import只有IE5以上才能识别。link方式样式的权重高于@import的。 ● transition和animation的区别参考回答:Animatio...原创 2020-09-20 06:13:35 · 75 阅读 · 0 评论 -
(4)CSS属性常见笔试题
<style> div{ float:left; width:80px; height:80px; background:#FFCC00; } p{ clear:both; margin-top:15px; } </style> <sect...原创 2020-08-09 05:30:12 · 171 阅读 · 0 评论 -
(3) CSS基础常见笔试题
1.什么是CSS预处理器 答案:CSS预处理器(CSS Preprocessor)为CSS增加编程特性,通过编译器将使用新语法的文件输出为一个普通的CSS文件,解决CSS难以服用、代码冗余、可维护性低的问题。 常用的预处理器由Less,Sass和Stylus. 2.CSS预处理器有哪些优缺点? 优点: (1)用变量存储多次引用的信息(如颜色值、字体、边距等),只...原创 2020-08-06 21:35:21 · 360 阅读 · 0 评论 -
(5)CSS应用常见笔试题
1.执行下面代码,在IE6,IE7,IE8+,Firefox中的情况()【单选】 div { width:20px; *width:15px!important; *width:10px; } A.Firefox和IE8+的宽度为20px;IE7的宽度为15px;IE6的宽度为10px B.Firefox和IE8+的宽度为20px;IE7和IE6的宽度为...原创 2020-08-09 08:23:21 · 132 阅读 · 0 评论 -
CSS中可以继承和不可以继承的属性
一、无继承性的属性 1、display:规定元素应该生成的框的类型 2、文本属性: vertical-align:垂直文本对齐 text-decoration:规定添加到文本的装饰 text-shadow:文本阴影效果 white-space:空白符的处理 unicode-bidi:设置文本的方向 3、盒子模型的属性:width、height、margin 、margin-top、margin-...原创 2020-10-21 18:29:03 · 154 阅读 · 0 评论 -
CSS百分比参照问题
CSS 百分比参照问题参照父元素宽度的元素:padding margin width text-indent 参照父元素高度的元素:height 参照父元素属性:font-size line-height 特殊:相对定位的时候,top(bottom) left(right)参照的是父元素的内容区域的高度与宽度,而绝对定位的时候参照的是最近的定位元素包含padding的高度与宽度 ...原创 2020-10-19 11:20:35 · 69 阅读 · 0 评论