文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

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

(1)浏览器兼容问题一：不同浏览器的标签默认的外补丁和内补丁不同 问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。...，float布局最常见的浏览器兼容问题） 解决方案：在float的标签样式控制中加入 display:inline;将其转化为行内属性 备注：我们最常用的就是div+CSS布局了，而div就是一个典型的块属性标签...clear:both 原理：添加一个空div，利用css提供的clear:both清除浮动，让父级div能自动获取到高度 优点：简单、代码少、浏览器支持好、不容易出现怪问题 缺点：不少初学者不理解原理...；如果页面浮动布局多，就要增加很多空div，让人感觉很不好 建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法 (3)、父级div定义 伪类:after 和 zoom 原理：IE8以上和非...（2）、前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数 （3）、用innerHTML代替DOM操作，减少DOM操作次数

1.5K20
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    【CSS】清除浮动 ③ ( 清除浮动 - 使用 after 伪元素 | 语法简介 | 兼容低版本浏览器 | 原理分析 )

    文章目录 一、清除浮动 - 使用 after 伪元素 ( 最流行写法 ) 1、额外标签法 和 overflow 样式法弊端 2、after 伪元素清除浮动简介 3、after 伪元素清除浮动核心代码...额外标签法 清除浮动 , 会 新增很多无意义标签 , 使得 HTML 标签结构混乱 ; 父级元素设置 overflow 属性 , 会 将溢出元素隐藏 , 或 生成滚动条 , 导致显示结果不理想 ; 这里提出第三种...*/ .clearfix { *zoom: 1; } 如果需要 清除某个父容器中子元素的浮动样式 , 在该父容器的 class 类型上 , 添加 clearfix 类型即可 , 如...*/ .clearfix { *zoom: 1; } HTML 标签代码 : div class="father1 clearfix"> div class="son1">...div> div class="son2">div> div> 4、after 伪元素清除浮动原理分析 使用 :after 伪元素 , 会在 父容器 中 , 生成一个新标签 , 放在了

    1.7K20

    【CSS】CSS 总结 ⑥ ( 盒子模型摆放机制 - 普通流 浮动 定位 | 浮动 - 脱离标准流 | 清除浮动语法 | 额外标签法 | after 伪元素清除浮动 ) ★

    1、盒子模型位置摆放三大机制 - 普通流 / 浮动 / 定位 盒子模型位置摆放三大机制 : 普通流 : 默认的摆放样式 ; 块级元素 摆放 : 每个 块级元素 独占一行 , 排列顺序 从上到下...: 父容器 检测高度时 , 会考虑 浮动子元素 的高度 , 将浮动元素的高度 计算在父容器的总高度中 ; 2、清除浮动 语法 - 额外标签法 清除浮动语法 : CSS 选择器 { clear: 属性值..." 额外标签法 " , 在最后一个浮动元素的末尾 , 添加一个额外标签 , 如下 : div class="clear">div> 使用 其它标签 也可以 , 如 : <br class="clear...; 4、额外标签法 和 overflow 样式法弊端 额外标签法 清除浮动 , 会 新增很多无意义标签 , 使得 HTML 标签结构混乱 ; 父级元素设置 overflow 属性 , 会 将溢出元素隐藏...*/ .clearfix { *zoom: 1; } 如果需要 清除某个父容器中子元素的浮动样式 , 在该父容器的 class 类型上 , 添加 clearfix 类型即可 , 如

    1.3K10

    年薪30万的前端面试题，你能答对几道？|附答案

    直观的认识标签 对于搜索引擎的抓取有好处，用正确的标签做正确的事情！ html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析； 在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的。...： IE8/IE7/IE6支持通过document.createElement方法产生的标签， 可以利用这一特性让这些浏览器支持HTML5新标签， 浏览器支持新标签后，还需要添加标签默认的样式： 8.请描述一下...引用的CSS会等到页面被加载完再加载; import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题; 9.介绍一下CSS的盒子模型？...id选择器（ # myid） 类选择器（.myclassname） 标签选择器（div, h1, p） 相邻选择器（h1 + p） 子选择器（ul > li） 后代选择器（li a） 通配符选择器（ *...（2）前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数 （3） 用innerHTML代替DOM操作，减少DOM操作次数，

    6.6K60

    Day7:html和css

    清除浮动的方法 额外标签法,在最后一个浮动元素后面添加一个空的标签代码: div style="clear: both">div> 使用after伪元素进行清除浮动. .clearfix:after...// dispaly: block显示 // dispaly: none; 隐藏 /*visibility: visible; 显示某个元素...margin-top:上外边距 margin-right:右外边距 margin-bottom:下外边距 margin-left:上外边距 margin:上外边距 右外边距 下外边距 左外边 外边距实现盒子居中...效果 选择器{clear:属性值;} clear 清除 属性值 描述 left 清除左侧浮动的影响 right 清除右侧浮动的影响 both 同时清除左右两侧浮动的影响 额外标签法 clear:...both div style=”clear:both”>div> // 父级添加overflow属性方法 给父级添加： overflow为 hidden|auto|scroll 都可以实现 使用

    3.2K30

    前端学习笔记之css清除浮动float的七种常用方法总结和兼容性处理

    高度塌陷：浮动元素父元素高度自适应（父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷） 知道浮动和为什么要清除浮动之后我们可以开始学习如何清除浮动了，这时候我们就需要用到清除浮动的属性clear..., clear:left | right | both | none | inherit：元素的某个方向上不能有浮动元素 clear:both：在左右两侧均不允许浮动元素。...具体清楚浮动的方法主要一下几种： 1、clear清除浮动（添加空div法） # 在浮动元素下方添加空div,并给该元素写css样式： {clear:both;height:0;overflow:hidden...div class="top">div> div> br 标签自带clear属性，将它设置成both其实和添加空div原理是一样的。...clear{zoom:1;} 需要注意的东西： after伪类： 元素内部末尾添加内容； :after{content"添加的内容";} IE6，7下不兼容 zoom 缩放 a、触发 IE下

    1.2K30

    CSS

    a:active(在链接上按下鼠标时的状态)，用于表现鼠标按下时的链接状态。...2·父子div  if  父级div中没有 border，padding，inline content，子级div的margin会一直向上找，直到找到某个标签包括border，padding，inline...无论多么复杂的布局，其基本出发点均是：“如何在一行显示多个div元素”。浮动可以理解为让某个div元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次。 　　 ...就拿上边的例子来说，我们是想让div2移动，但我们却是在div1元素的CSS样式中使用了清除浮动，试图通过清除div1右边的浮动元素(clear:right;)来强迫div2下移，这是不可行的，因为这个清除浮动是在...根据小菜定论，要想让div2下移，就必须在div2的CSS样式中使用浮动。

    3.1K30

    【网页前端】CSS的基本样式边框、布局、字体

    线条样式： solid 实线， none 无边， double 双线 示例： 效果： 1.2 width 用于设置标签的宽度 示例： 效果： 1.3 height 用于设置标签的高度...格式： background-image : url ( "图片路径" ); 例如：某个小狗爪子图片 作为背景图片引入一个长宽 25 的 DIV 标签中， 因为图片太小，所以为了铺满背景...id="d1">div> div id="d2">div> div id="d3">div> 示例 1 ： 效果 1： 示例 2： 效果 2： 2.2 clear...如果要避免影响，需要使用 clear 属性进行清除浮动。...格式：选择器 { clear: 属性值 ; } 常用属性值： left ：不允许该元素左侧有浮动元素（清除左侧浮动的影响） right ：不允许该元素右侧有浮动元素（清除右侧浮动的影响

    2.8K30

    【前端开发之CSS】（二）CSS 选择器终极指南：从基础到进阶，精准拿捏页面元素！

    无论是给所有段落改颜色，还是给某个特定按钮加特效，都离不开选择器的 “指引”。...2.1.3 核心特点 优点：简单直接，书写方便，能快速选中同一类型的所有元素，适合批量设置样式； 缺点：无法差异化选择 —— 比如想让某个标签文字为蓝色，其他标签为红色，标签选择器就做不到；...例如： div> 嵌套在div中的p标签 div> 嵌套在两层div中的p标签 div> div> 上面两个标签都会被p...就像身份证号码，每个人只有一个，通过身份证号码能精准找到某个人。...hover：鼠标指针悬停在链接上的状态； a:active：链接被鼠标按下但未弹起的状态（活动状态）。

    1.7K10

    前端-CSS-更改标签样式-长宽字体-背景-边框-显示方式-定位-透明度-扩展点-02

    清除溢出（超出div大小的部分） position 定位 对文档流的影响 z-index 层级 opacity 标签整体透明度 去掉li 前面的标识 文本垂直居中 单行文本居中 作业案例 关于自适应（....c1{ float: left; 浮动之后就相当于浮起来了，脱离了文档流，有多大就多大 } div{ # clear 清除浮动带来的父标签塌陷, clear: left...; clear left 左边不能有浮动元素，如果有，另起一行（变向撑大父标签） } 清除浮动的终极写法（要想用的地方加上这个class即可 --> class="clearfix"）...overflow 清除溢出（超出div大小的部分） div{ overflow: hidden; overflow: auto; 自适应，有个滚动条可以看 overflow:...绝对定位 ​ 相对于已经定位过的父标签做一个定位（购物车展开）*** ​ 当只给你一个父标签的属性让你做定位时，就用绝对定位 固定定位 ​ 相对于浏览器窗口，一直固定在某个位置（回到顶部）

    2.4K20

    【CSS】清除浮动 ① ( 清除浮动简介 | 清除浮动语法 | 清除浮动 - 额外标签法 )

    文章目录 一、清除浮动简介 二、清除浮动语法 三、清除浮动 - 额外标签法 1、额外标签法 - 语法说明 2、问题代码示例 3、额外标签法代码示例 一、清除浮动简介 ---- 在开发页面时 , 遇到下面的情况...: 清除右侧浮动 ; both : 同时清除左右两侧浮动 ; 一般在使用的时候 , 只使用 clear: both; 一种样式 ; 三、清除浮动 - 额外标签法 ---- 1、额外标签法 - 语法说明...推荐使用 " 额外标签法 " , 在最后一个浮动元素的末尾 , 添加一个额外标签 , 如下 : div class="clear">div> 使用 其它标签 也可以 , 如 : 下 , 其高度为 0 ; 父容器 1 的 兄弟元素 , 直接显示在了 父容器 1 的下方 , 父容器 1 只能将边框绘制出来 , 内容尺寸高度为 0... /* 清除标签默认的内外边距 */ * { padding: 0; margin: 0; } /* 清除列表默认样式 ( 主要是前面的点

    8.1K40

    CSS

    通常，我们会分两行来写，更清晰: div, #如果你这样写，千万别忘了逗号，不然就成了div下的子子孙孙里面找p标签 p { color: red; } 嵌套 　　　　　　多种选择器可以混合起来使用...就要学习我们下面的优先级了，首先看一下继承： 　　　　　　继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。...，在父标签里面加一个其他的标签 伪元素清除法 css来解决 overflow:hidden 给塌陷的父级标签设置这个属性就可以清除浮动。 　　　　...伪元素清除法（使用较多）： .clearfix:after { content: ""; display: block; clear: both; } 　　我们通过微元素清除法来清除一下浮动...总结一下：为什么要有浮动啊，是想做页面布局，但是浮动有副作用，父级标签塌陷，所以要想办法去掉这个副作用，使用了clear来清除浮动带来的副作用，我们当然也可以通过设置标签为inline-block来实现这种布局效果

    2.6K10

    【CSS】盒子模型外边距 ④ ( 元素默认的外边距 | 清除元素默认的内外边距 | 行内元素边距设置 )

    文章目录 一、元素默认的外边距 1、body 标签的默认外边距 2、p 标签的默认外边距 二、清除元素默认的内外边距 1、清除方式 2、代码示例 三、行内元素边距设置 一、元素默认的外边距 ---...: block; margin: 8px; } 2、p 标签的默认外边距 在 body 中添加 p 标签 , 代码如下 : div>div> p 标签 默认外边距<...---- 1、清除方式 使用 通配符选择器 设置 清除内外边距 样式 , 将所有的标签元素 的 默认的内外边距 全部设置为 0 ; 清除标签默认的内外边距 样式 : * { /* 清除标签默认的内边距...style type="text/css"> * { /* 清除标签默认的内边距 */ padding: 0; /* 清除标签默认的外边距 */...> 行内元素 div> p 标签 默认外边距 显示效果 : 按下 F12 键 , 进入 调试模式 , 选中 span 行内元素

    4.3K10

    前端进阶第5周打卡题目汇总

    接下来赶快进入正题，总结一下第五周的打卡笔记。 第一天 1.用css实现单行文本溢出省略以及多行文本溢出省略 ?...写出3种js数组去重的方法,并求出效率最高的一种(10万条数据下的测试结果） ? 2.用css实现单行文本溢出省略以及多行文本溢出省略 ? ? 第三天 ? ? ?...为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式？...当我们设置某个元素的属性float为left或者right时，会出现浮动，浮动元素不在文档流，所以文档流的物理位置表现得就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。...清除浮动的方式： 1.父级div 定义height 2.最后一个浮动元素后加空div 标签并添加样式clear:both 3.包含浮动元素的父标签添加样式overflow 为hidden 或auto

    89920

    css基础

    标签中添加style标签对，标签对中定义css样式 1)选择器{ 样式； 样式； ... } 2)选择器：选中某一个|某些元素...掌握基础选择器：重点 #id选择器： 根据元素的id属性选中某个元素 .class： 根据元素的class属性值选中一组元素，可以添加多个元素名，选择其一即可 元素选择器： 根据元素名选择一组元素...* -- 通配符： 选中当前中的所有元素（常用来清除浏览器的默认样式） /*清除浏览器的默认样式，如p标签的内外边距等*/ *{ padding:0; margin:0; } 基础选择器的优先级...，如p标签的内外边距等*/ *{ padding:0; margin:0; } /*id选择器*/ #div1{ color:goldenrod...与右边相同 4个值 上 右 下 左 padding-left/top/bottom/right border: 三元素 border: 大小 样式 颜色； border

    2K30

    JS快速入门（二）

    '（标签）匹配的节点 document.querySelector('div') querySelectorAll()示例 document.querySelectorAll('.item')[0...如果修改内容中包含 html 字符串会被解析成 html元素； setAttribute(name,value) 设置指定元素上的某个属性值。...--在 div 中写入 h1 标签,如果原来div中有内容会被覆盖--> div>div> document.querySelector...() { // 鼠标移出文字为黑色 this.style.color = 'black' }) 常用键盘事件 方法 说明 keydown 按下任意按键，按住可连续触发 keypress 按下按键...事件触发的键的值的字符代码，或者keydown 或 keyup 事件的键盘代码 字符代码：表示 ASCII 字符的数字 键盘代码：表示键盘上真实键的数字 方法 说明 charCode 返回 keypress 事件触发时按下的字符键的字符

    8.1K30

    详解 清除浮动 的多种方式（clearfix）

    这个属性原本不是用来布局的，而是用来做文字环绕的，但是后来人们发现做布局也不错，就一直这么用了，甚至有些时候都忘了用他做文字环绕 3、相对定位 relative 元素会相对于它原来的位置偏移某个距离...容易掌握 简单易懂 弊端：会添加许多无意义的空标签，有违结构与表现的分离，不便于后期的维护 方案3 设置父元素浮动 优势：简单，代码量少，没有结构和语义化问题 弊端：对后续元素会有影响...> div class="top">上div> div> div class="bottom">下div> ?...class="cf"> div class="top">上div> div> div class="bottom">下div> ?...6，如果大家还有什么巧妙的方式，可以留言，分享一下！

    2.4K60
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券