(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) 减少http请求次数:css spirit,data uri (2) JS,CSS源码压缩 (3) 前端模板 JS...+数据,减少由于HTML标签导致的带宽浪费,前端用变量保存AJAX请求结果,每次操作本地变量,不用请求,减少请求次数 (4) 用innerHTML代替DOM操作,减少DOM操作次数,优化javascript...DOM节点查找的结果 (10) 避免使用CSS Expression (11) 图片预载 (12) 避免在页面的主体布局中使用table,table要等其中的内容完全下载之后才会显示出来,显示比div
本篇文章的内容是js清除浏览器缓存,在这里分享给大家,也可以给有需要的朋友做一下参考,大家一起来看一看吧 一、meta方式 一开始百度后的做法,但是在360中并不适应 二、动态引入js+时间戳去除静态html
文章目录 一、清除浮动 - 使用 after 伪元素 ( 最流行写法 ) 1、额外标签法 和 overflow 样式法弊端 2、after 伪元素清除浮动简介 3、after 伪元素清除浮动核心代码...额外标签法 清除浮动 , 会 新增很多无意义标签 , 使得 HTML 标签结构混乱 ; 父级元素设置 overflow 属性 , 会 将溢出元素隐藏 , 或 生成滚动条 , 导致显示结果不理想 ; 这里提出第三种...*/ .clearfix { *zoom: 1; } 如果需要 清除某个父容器中子元素的浮动样式 , 在该父容器的 class 类型上 , 添加 clearfix 类型即可 , 如...*/ .clearfix { *zoom: 1; } HTML 标签代码 : ... 4、after 伪元素清除浮动原理分析 使用 :after 伪元素 , 会在 父容器 中 , 生成一个新标签 , 放在了
1、盒子模型位置摆放三大机制 - 普通流 / 浮动 / 定位 盒子模型位置摆放三大机制 : 普通流 : 默认的摆放样式 ; 块级元素 摆放 : 每个 块级元素 独占一行 , 排列顺序 从上到下...: 父容器 检测高度时 , 会考虑 浮动子元素 的高度 , 将浮动元素的高度 计算在父容器的总高度中 ; 2、清除浮动 语法 - 额外标签法 清除浮动语法 : CSS 选择器 { clear: 属性值..." 额外标签法 " , 在最后一个浮动元素的末尾 , 添加一个额外标签 , 如下 : 使用 其它标签 也可以 , 如 : <br class="clear...; 4、额外<em>标签</em>法 和 overflow 样式法弊端 额外<em>标签</em>法 <em>清除</em>浮动 , 会 新增很多无意义<em>标签</em> , 使得 HTML <em>标签</em>结构混乱 ; 父级元素设置 overflow 属性 , 会 将溢出元素隐藏...*/ .clearfix { *zoom: 1; } 如果需要 <em>清除</em><em>某个</em>父容器中子元素的浮动样式 , 在该父容器的 class 类型上 , 添加 clearfix 类型即可 , 如
例如: div 是标准 块级元素,独占一行,多个 div 从上到下顺序排列。...4.4 额外标签法 (隔墙法) 额外标签法:通过添加一个 clear 样式的额外标签来清除浮动效果。...一般在父元素末尾添加一个空标签: 注意:一般使用块级元素 div , p 标签也能达到对应效果 示例代码:...(多次添加额外标签,作用于某个浮动元素,该浮 动元素的“影子”也仅生效一次) 总结:额外标签法在开发中会遇到 4.5 单伪元素法 单伪元素法:为标准流的父元素添加伪元素 :after ,...利用 :after 模拟生成额外标签,来清除浮动。
直观的认识标签 对于搜索引擎的抓取有好处,用正确的标签做正确的事情! 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操作次数,
清除浮动的方法 额外标签法,在最后一个浮动元素后面添加一个空的标签代码: 使用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 // 父级添加overflow属性方法 给父级添加: overflow为 hidden|auto|scroll 都可以实现 使用
高度塌陷:浮动元素父元素高度自适应(父元素不写高度时,子元素写了浮动后,父元素会发生高度塌陷) 知道浮动和为什么要清除浮动之后我们可以开始学习如何清除浮动了,这时候我们就需要用到清除浮动的属性clear..., clear:left | right | both | none | inherit:元素的某个方向上不能有浮动元素 clear:both:在左右两侧均不允许浮动元素。...具体清楚浮动的方法主要一下几种: 1、clear清除浮动(添加空div法) # 在浮动元素下方添加空div,并给该元素写css样式: {clear:both;height:0;overflow:hidden... br 标签自带clear属性,将它设置成both其实和添加空div原理是一样的。...clear{zoom:1;} 需要注意的东西: after伪类: 元素内部末尾添加内容; :after{content"添加的内容";} IE6,7下不兼容 zoom 缩放 a、触发 IE下
:清除左侧浮动 Right :清除右侧浮动 Both :清除两侧的浮动 1.2.2.2 步骤分析: 创建一个外层的div元素 在div中创建代表每块区域div 在每块div引入需要的元素的内容 1.2.3...--清除浮动--> 1.2.4 扩展: 1.2.4.1 CSS的其他的选择器: 【CSS的其他选择器】 属性选择器 选中带有某个属性的元素: input...元素 在里面创建5个分别代表某个部分的DIV 在每个部分中完成单独内容的显示 1.3.3 代码实现: <!
线条样式: solid 实线, none 无边, double 双线 示例: 效果: 1.2 width 用于设置标签的宽度 示例: 效果: 1.3 height 用于设置标签的高度...格式: background-image : url ( "图片路径" ); 例如:某个小狗爪子图片 作为背景图片引入一个长宽 25 的 DIV 标签中, 因为图片太小,所以为了铺满背景...id="d1"> 示例 1 : 效果 1: 示例 2: 效果 2: 2.2 clear...如果要避免影响,需要使用 clear 属性进行清除浮动。...格式:选择器 { clear: 属性值 ; } 常用属性值: left :不允许该元素左侧有浮动元素(清除左侧浮动的影响) right :不允许该元素右侧有浮动元素(清除右侧浮动的影响
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样式中使用浮动。
清除溢出(超出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:...绝对定位 相对于已经定位过的父标签做一个定位(购物车展开)*** 当只给你一个父标签的属性让你做定位时,就用绝对定位 固定定位 相对于浏览器窗口,一直固定在某个位置(回到顶部)
文章目录 一、清除浮动简介 二、清除浮动语法 三、清除浮动 - 额外标签法 1、额外标签法 - 语法说明 2、问题代码示例 3、额外标签法代码示例 一、清除浮动简介 ---- 在开发页面时 , 遇到下面的情况...: 清除右侧浮动 ; both : 同时清除左右两侧浮动 ; 一般在使用的时候 , 只使用 clear: both; 一种样式 ; 三、清除浮动 - 额外标签法 ---- 1、额外标签法 - 语法说明...推荐使用 " 额外标签法 " , 在最后一个浮动元素的末尾 , 添加一个额外标签 , 如下 : 使用 其它标签 也可以 , 如 : <br class...浮动元素 , 没有指定标准流元素 , 因此默认状态下 , 其高度为 0 ; 父容器 1 的 兄弟元素 , 直接显示在了 父容器 1 的下方 , 父容器 1 只能将边框绘制出来 , 内容尺寸高度为 0... /* 清除标签默认的内外边距 */ * { padding: 0; margin: 0; } /* 清除列表默认样式 ( 主要是前面的点
文章目录 一、元素默认的外边距 1、body 标签的默认外边距 2、p 标签的默认外边距 二、清除元素默认的内外边距 1、清除方式 2、代码示例 三、行内元素边距设置 一、元素默认的外边距 ---...: block; margin: 8px; } 2、p 标签的默认外边距 在 body 中添加 p 标签 , 代码如下 : p 标签 默认外边距<...---- 1、清除方式 使用 通配符选择器 设置 清除内外边距 样式 , 将所有的标签元素 的 默认的内外边距 全部设置为 0 ; 清除标签默认的内外边距 样式 : * { /* 清除标签默认的内边距...style type="text/css"> * { /* 清除标签默认的内边距 */ padding: 0; /* 清除标签默认的外边距 */...> 行内元素 p 标签 默认外边距 显示效果 : 按下 F12 键 , 进入 调试模式 , 选中 span 行内元素
通常,我们会分两行来写,更清晰: div, #如果你这样写,千万别忘了逗号,不然就成了div下的子子孙孙里面找p标签 p { color: red; } 嵌套 多种选择器可以混合起来使用...就要学习我们下面的优先级了,首先看一下继承: 继承是CSS的一个主要特征,它是依赖于祖先-后代的关系的。继承是一种机制,它允许样式不仅可以应用于某个特定的元素,还可以应用于它的后代。...,在父标签里面加一个其他的标签 伪元素清除法 css来解决 overflow:hidden 给塌陷的父级标签设置这个属性就可以清除浮动。 ...伪元素清除法(使用较多): .clearfix:after { content: ""; display: block; clear: both; } 我们通过微元素清除法来清除一下浮动...总结一下:为什么要有浮动啊,是想做页面布局,但是浮动有副作用,父级标签塌陷,所以要想办法去掉这个副作用,使用了clear来清除浮动带来的副作用,我们当然也可以通过设置标签为inline-block来实现这种布局效果
为什么要清除浮动?...2.当我给内部两个盒子加上float属性的时候 顶部深蓝色盒子就会顶上来,然后父盒子因为没设置高度,变成一条线,big和small已经浮动了 总结一下: 当父元素不给高度的时候,内部元素不浮动时会撑开...什么是clear:both clear:both:本质就是闭合浮动, 就是让父盒子闭合出口和入口,不让子盒子出来 清除浮动的方法(最常用的4种) 1.额外标签法(在最后一个浮动标签后,新加一个标签,...class="clear">额外标签法 此时的效果为 如果我们清除了浮动...优点:通俗易懂,方便 缺点:添加无意义标签,语义化差 不建议使用。
标签中添加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
接下来赶快进入正题,总结一下第五周的打卡笔记。 第一天 1.用css实现单行文本溢出省略以及多行文本溢出省略 ?...写出3种js数组去重的方法,并求出效率最高的一种(10万条数据下的测试结果) ? 2.用css实现单行文本溢出省略以及多行文本溢出省略 ? ? 第三天 ? ? ?...为什么会出现浮动和什么时候需要清除浮动?清除浮动的方式?...当我们设置某个元素的属性float为left或者right时,会出现浮动,浮动元素不在文档流,所以文档流的物理位置表现得就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。...清除浮动的方式: 1.父级div 定义height 2.最后一个浮动元素后加空div 标签并添加样式clear:both 3.包含浮动元素的父标签添加样式overflow 为hidden 或auto
'(标签)匹配的节点 document.querySelector('div') querySelectorAll()示例 document.querySelectorAll('.item')[0...如果修改内容中包含 html 字符串会被解析成 html元素; setAttribute(name,value) 设置指定元素上的某个属性值。...--在 div 中写入 h1 标签,如果原来div中有内容会被覆盖--> document.querySelector...() { // 鼠标移出文字为黑色 this.style.color = 'black' }) 常用键盘事件 方法 说明 keydown 按下任意按键,按住可连续触发 keypress 按下按键...事件触发的键的值的字符代码,或者keydown 或 keyup 事件的键盘代码 字符代码:表示 ASCII 字符的数字 键盘代码:表示键盘上真实键的数字 方法 说明 charCode 返回 keypress 事件触发时按下的字符键的字符
领取专属 10元无门槛券
手把手带您无忧上云