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

知识整理之CSS篇

解决方案:在float的标签样式中设置 #demo { display: inline } 当标签的高度设置小于10px,在IE6、IE7中会超出自己设置的高度 问题症状:IE6、7和遨游里这个标签的高度不受控制...图片默认有间距 问题症状:几个img标签放在一起的时候,有些浏览器会有默认的间距,加了问题一中提到的通配符也不起作用。...可能原因: 使用import方法导入样式表 将样式表放在页面底部 有几个样式表,放在html结构的不同位置 原理:当样式表晚于结构性html加载,当加载到此样式表时,页面将停止之前的渲染。...原理:当设置了zoom的值之后,所设置的元素就会就会扩大或者缩小,高度宽度就会重新计算了,这里一旦改变zoom值时其实也会发生重新渲染,运用这个原理,也就解决了ie下子元素浮动时候父元素不随着自动扩大的问题...加载顺序区别 加载页面时,link标签引入的CSS能被并行加载;@import引入的CSS将在页面加载完毕后才加载。

1.6K20

【前端】Web前端学习笔记【2】

常见的浏览器端的存储技术 ---- 有时需要将网页中的一些数据保存在浏览器端,这样做的好处是,当下次访问页面时,不需要再次向服务器请求数据,直接就可以从本地读取数据。...sessionStorage 使用于Firefox2+的火狐浏览器,用这种方式存储的数据仅窗口级别有效,同一个窗口(或者Tab)页面刷新或者跳转,都能获取到本地存储的数据,当新开窗口或者页面时,原来的数据就失效了...解释下浮动和它的工作原理?清除浮动的技巧 ---- 浮动元素脱离文档流,不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。 使用空标签清除浮动。...这种方法是在每一个浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增加了无意义标签。...,直到请求被处理,然后才接收一个回应。

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

    css笔记 - 张鑫旭css课程笔记之 overflow 篇

    兼容性: 长得不一样 宽度设定机制差异 overflow属性起作用的条件: display非inline 对应方位的尺寸限制,有width/height/max-width/max-height/absolute...拉伸 对于单元格td等,还需要table为table-layout:fixed;状态才行 overflow妙用 IE7浏览器下,文字越多,按钮两侧的padding留白就越大。...新建一个空白页面,body标签有一个0.5em的默认margin值。...(形成bfc结界,与外界隔绝) 仅支持ie7+及现代浏览器 避免margin穿透/重叠问题(形成bfc结界,与外界隔绝) 两栏自适应布局 overflow与absolute 隐藏失效 即overflow...当元素设置position:absolute;绝对定位且无方位值(left、right、bottom、top)设置。

    2.9K10

    59道CSS面试题(附答案)

    块级元素的前后都会自动换行。默认情况下,块级元素会独占一行。例如都是块级元素,当显示这些元素中间的文本时,都将从新行中开始显示,其后的内容也将在新行中显示。...虽然浮动元素已不在文档流中,但是它浮动后所处的位置依然在浮动之前的水平方向上。 因为浮动元素不在文档流中,所以文档流中的块元素表现得就像浮动元素不存在一样,下面的元素会填补原来的位置。...有些元素会在浮动元素的下方,但是这些元素的内容并不一定会被浮动的元素遮盖。当定位内联元素时,要考虑浮动元素的边界,围绕浮动元素放置内联元素。...(1)当两个相邻的外边距都是正数时,折叠的结果是它们两者中较大的值 (2)当两个相邻的外边距都是负数时,折叠的结果是两者中绝对值较大的值。 (3)当两个外边距一正一负时,折叠的结果是两者相加的和。...IE6双边距Bug是指在块属性标签float后又有横行的 margin时,在IE6中显示的margin比设置的大浮动IE产生的双倍距离(IE6的双边距问题是指在IE6下,如果对元素设置了浮动,同时又设置了

    5K50

    HTML元素分类:inline、inline-block、block

    display属性值:inline、inline-block、block inline textarea、span、a、img、input、select  行内元素特征:(1)设置宽高无效 (2)对margin仅设置左右方向有效...盒模型中 padding, border 与块级元素并无差异,都是标准的盒模型,但是 margin 却只有水平方向的值,垂直方向并没有起作用...(1)能够识别宽高 (2)margin和padding的上下左右均对其有效 (3)可以自动换行 (4)多个块状元素标签写在一起,默认排列方式为从上至下 补充说明: 在HTML5中,程序员可以自定义标签,...在任意定义标签中,加入display:block;即可,当然也可以是行内或行内块状。...如果你的html中一系列元素每个元素之间都换行了,当你对这些元素设置inline-block时,这些元素之间就会出现空白。而浮动元素会忽略空白节点,互相紧贴.

    1.5K40

    第213天:12个HTML和CSS必须知道的重点难点问题

    如果有非浮动元素和浮动元素同时存在,并且非浮动元素在前,则浮动元素不会高于非浮动元素 浮动元素会尽可能地向顶端对齐、向左或向右对齐 重叠问题 行内元素与浮动元素发生重叠,其边框,背景和内容都会显示在浮动元素之上...块级元素与浮动元素发生重叠时,边框和背景会显示在浮动元素之下,内容会显示在浮动元素之上 clear属性 clear属性:确保当前元素的左右两侧不会有浮动元素。...clear只对元素本身的布局起作用。...link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。 link是XHTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持。...当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等元素也如此,类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

    2.3K20

    前端Demo|页面布局|适合学习前端一个月的同学

    固定定位 固定定位比较类似于绝对定位,当页面长度超出浏览器窗口时,此时会出现滚动条。...浮动层可以将所定义的页面内容放置在页面的左边或者右边,通常放入图像时使用这种方法会很方便。...一月一日 领导者必须正直 组织的精神是自上而下树立起来的 摘自:彼得.德鲁克 《管理:任务、责任与务实》 当考察管理者是否诚信时...,人们必定会非常重视他的人品是否正直,这一点必定首先会在管理者的人事任用上体现出来,因为领导者正是通过其正直 的人品,才能够实现其领导,领导者也正是通过其正直的人品,才树立了别人效仿的榜样...此外,如果不需要浮动层的左右存在页面内容,可以使用alear 属性求清除页面的其他的内容。

    80210

    脱离文档流分析(转)

    由于浮动框不在文档的普通流中,所以文档的普通流中的浮动框之后的块框表现得就像浮动框不存在一样。...允许两边都可以有浮动对象 left : 不允许左边有浮动对象 right : 不允许右边有浮动对象 both : 不允许有浮动对象 但是需要注意的是:clear属性只会对自身起作用,而不会影响其他元素...例如:下图例3 box1向右侧浮动,box2不设置clear属性时的示意图;例4中box1向右侧浮动,box2设置clear:right,表示右侧不允许出现浮动元素,则box2自动下移一行。 ?...分别分析一下position的几个值 (1)static 默认值,无定位,不能当作绝对定位的参照物,并且设置标签对象的left、top等值是不起作用的的。 (2)relative 相对定位。...注意,即使不设置值同样起到了相对定位作用,其子孙级别标签使用position:absolute;时同样会起到定位效果,position:relative的另一个主要用法:方便绝对定位元素找到参照物。

    1.3K20

    浪费了8个小时的摸鱼时间解决z-index不生效问题

    9999 ,发现竟然不生效,然后浪费了一天摸鱼时间才解决,记录下z-index的一些好玩的问题。...2、问题复现当遇到这种问题上来肯定F12来看下z-index层级;第一步,查看下层:标签页 PageTagDiv的z-index的大小,发现为:3第二步,查看popup的 z-index的大小,发现为:...当z-index不起作用时,可能是由于以下几个原因:没有指定元素的定位属性:z-index属性只对定位元素(position属性值为relative、absolute或fixed)起作用。...html标签中的一切都被置于这个默认的层叠上下文的一个层叠层上(body)。当一个元素创建一个层叠上下文时,它的所有子元素都会受到父元素的层叠顺序影响。...网页中展示最重要的是内容,因此内容的层叠顺序比较高,当发生层叠时,重要的文字和图片等内容优先暴露在屏幕上(如下图)。

    27700

    web前端开发初学者十问集锦(4)

    而body是子节点,要访问到body标签,在脚本中应该写:document.body。 3.为什么浮动元素可以撑开父级容器?...小结: JS并不是等待所有的JS代码加载完成之后才开始解析的,而是加载完一个JS代码块之后便对该代码块进行解析。...但是JS引擎在解析JS代码时,需要等待一个完整的JS代码块加载完成。 (4)JS代码块加载完成之后JS引擎才开始预处理吗,可以加载完一句JS代码就预处理一句呢?...答:这个目前还没有查阅到可信的资料,在这里我们姑且简单的认为是JS代码块加载完成之后JS引擎才开始预处理与执行。我上面也是按照这个观点讲解的。如果有知道的网友请留言告知,万分感谢。...局部变量,它在所属的方法,或者说是它在自己属于的对象里面才存在,这个对象或者方法被使用过了,如果变量不再被引用,那么它离开作用域时会被JS引擎来销毁。

    1.3K20

    精选前端面试题之HTML5CSS3

    当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等元素也如此,类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。...当有消息返回时系统会通知进程进行处理,这样可以提高执行的效率。 11、你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?...渐进增强则是从一个非常基础的,能够起作用的版本开始,并不断扩充,以适应未来环境的需要 c....display:none 隐藏对应的元素,在文档布局中不再给它分配空间,它各边的元素会合拢, 就当他从来不存在。...1.使用空标签清除浮动。 这种方法是在所有浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增加了无意义标签。 2.使用overflow。

    1.2K10

    近一年web前端经典面试题整理

    清除浮动的方法 浮动元素脱离文档流,不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。   1.使用空标签清除浮动。   ...这种方法是在所有浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增加了无意义标签。   2.使用after伪对象清除浮动  该方法只适用于非IE浏览器。具体写法可参照以下示例。...六、CSS隐藏元素的几种方法(至少说出三种) Opacity:元素本身依然占据它自己的位置并对网页的布局起作用。..., 页面产生回流(当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等,页面重新构建, 此时就是回流。...(1)、window.onload方法是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行的。

    1.4K20

    面试必备 css面试必考点

    清除浮动的方式? 浮动元素碰到包含它的边框或者浮动元素的边框停留。由于浮动元素不在文档流中,所以文档流的块框表现得就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。...清除浮动的方式: 父级div定义height 最后一个浮动元素后加空div标签 并添加样式clear:both。 包含浮动元素的父标签添加样式overflow为hidden或auto。...} 22设置元素浮动后,该元素的display值是多少? 自动变成display:block 23 移动端的布局用过媒体查询吗?...等,当按百分比设定它们时,依据的也是父容器的宽度,而不是高度。...写在body标签后由于浏览器以逐行方式对HTML文档进行解析,当解析到写在尾部的样式表(外联或写在style标签)会导致浏览器停止之前的渲染,等待加载且解析样式表完成之后重新渲染,在windows的IE

    1.1K10

    57道CSS常问面试题及答案汇总

    清除浮动的方式? 浮动元素碰到包含它的边框或者浮动元素的边框停留。由于浮动元素不在文档流中,所以文档流的块框表现得就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。...清除浮动的方式: 父级div定义height 最后一个浮动元素后加空div标签 并添加样式clear:both。 包含浮动元素的父标签添加样式overflow为hidden或auto。...父级div定义zoom 17、设置元素浮动后,该元素的display值是多少? 自动变成display:block 18、使用 CSS 预处理器吗?...写在body标签后由于浏览器以逐行方式对HTML文档进行解析,当解析到写在尾部的样式表(外联或写在style标签)会导致浏览器停止之前的渲染,等待加载且解析样式表完成之后重新渲染,在windows的IE...缺点是它是对TABLE标签的不正规使用,一直以来被大家所诟病。当需要内容高度不一致时并不适应。 grid布局优点,是第一个基于二维方向的布局模块。它是第一个基于网格的原生布局系统。

    2K10

    57道常被问的CSS面试题及答案汇总,帮你查漏补缺

    清除浮动的方式? 浮动元素碰到包含它的边框或者浮动元素的边框停留。由于浮动元素不在文档流中,所以文档流的块框表现得就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。...清除浮动的方式: 父级div定义height 最后一个浮动元素后加空div标签 并添加样式clear:both。 包含浮动元素的父标签添加样式overflow为hidden或auto。...父级div定义zoom 17、设置元素浮动后,该元素的display值是多少? 自动变成display:block 18、使用 CSS 预处理器吗?...写在body标签后由于浏览器以逐行方式对HTML文档进行解析,当解析到写在尾部的样式表(外联或写在style标签)会导致浏览器停止之前的渲染,等待加载且解析样式表完成之后重新渲染,在windows的IE...缺点是它是对TABLE标签的不正规使用,一直以来被大家所诟病。当需要内容高度不一致时并不适应。 grid布局优点,是第一个基于二维方向的布局模块。它是第一个基于网格的原生布局系统。

    2.7K31

    校招前端必会面试题_2023-03-01

    当指定的时间低于该时间时,浏览器会用最小允许的时间作为setTimeout的时间间隔,也就是说即使我们把setTimeout的延迟时间设置为0,实际上可能为 4毫秒后才事件推入任务队列。...而javascript引擎对这个问题的解决是:当使用setInterval()时,仅当没有该定时器的任何其他代码实例时,才将定时器代码添加到队列中。...此外,使用这个API,一旦页面不处于浏览器的当前标签,就会自动停止刷新。这就节省了CPU、GPU和电力。 requestAnimationFrame 是在主线程上完成。...并且构建 CSSOM 树是一个十分消耗性能的过程,所以应该尽量保证层级扁平,减少过度层叠,越是具体的 CSS 选择器,执行速度越慢 当 HTML 解析到 script 标签时,会暂停构建 DOM,完成后才会从暂停的地方重新开始...比如对于 video标签,浏览器会自动将该节点变为图层。

    1.1K20

    「资深前端工程师总结」前端面试知识点大全—CSS篇

    类似于优先级机制:position:absolute/fixed优先级最高,有他们在时,float浮动不起作用,display值需要调整。...浮动元素引起的问题: (1)在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或 right)的元素,在这种情况下,容器的高度不能自动伸长撑开以适应内容的高度...来龙去脉大概如下: 当设置了zoom的值之后,所设置的元素就会就会扩大或者缩小,高度宽度就会重新计算了,这里一旦改变zoom值时其实也会发生重新渲染,运用这个原理,也就解决了ie下子元素浮动时候父元素不随着自动扩大的问题...2)、使用js实现;存在一个问题是使用js方法会导致提交表单的时候无法将value值传过去。 3)、使用form标签上的关闭自动填充功能:autocomplete="off"。...当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等元素也如此,类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

    1.6K30

    前端面试题-每日练习(3)

    label标签来定义表单控制间的关系,当用户选择该标签时,浏览器会自动将焦点转到和标签相关的表单控件上。...容器的高度为300px;当内容高度大于这个值时,容器高度被撑高,而不是出现滚动条。这时候我们就会面临这个兼容性问题。...IE浏览器才支持:after,原理和方法2有点类似,zoom(IE专有属性)可解决ie6,ie7浮动问题 优点:浏览器支持好、不容易出现怪问题(目前:大型网站都有使用,如:腾讯,网易,新浪等等)...(4)、父级div定义 overflow:hidden 原理:必须定义width或zoom:1,同时不能定义height,使用overflow:hidden时,浏览器会自动检查浮动区域的高度 优点...(5)、父级div定义 overflow:auto 原理:必须定义width或zoom:1,同时不能定义height,使用overflow:auto时,浏览器会自动检查浮动区域的高度 优点:简单

    15420

    【愚公系列】2023年03月 其他-Web前端基础面试题(CSS_42道)

    当设置为box-sizing:content-box时,将采用标准模式解析计算; 当设置为box-sizing:border-box时,将采用怪异模式解析计算。...等,当按百分比设定它们时,依据的也是父容器的宽度,而不是高度。...3、link标签作为HTML元素,不存在兼容性问题,而@import是CSS2.1才有的语法,故老版本浏览器(IE5之前)不能识别。...(1)当两个相邻的外边距都是正数时,折叠的结果是它们两者中较大的值 (2)当两个相邻的外边距都是负数时,折叠的结果是两者中绝对值较大的值。...3.js写在尾部,主要是因为js主要扮演事件处理的功能,一方面很多操作是在页面渲染后才执行的。

    3.1K20
    领券