HTML和CSS重难点知识点总结

  怎么让一个不定宽高的p,垂直水平居中?
 
  使用Flex
 
  只需要在父盒子设置:display:flex;justify-content:center;align-items:center;
 
  使用CSS3transform
 
  父盒子设置:position:relative
 
  p设置:transform:translate(-50%,-50%);position:absolute;top:50%;left:50%;
 
  使用display:table-cell方法
 
  父盒子设置:display:table-cell;text-align:center;vertical-align:middle;
 
  p设置:display:inline-block;vertical-align:middle;
 
  2.position几个属性的作用
 
  position的常见四个属性值:relative,absolute,fixed,static。一般都要配合“left”、”top”、”right”以及“bottom”属性使用。
 
  static:默认位置。在一般情况下,我们不需要特别的去声明它,但有时候遇到继承的情况,我们不愿意见到元素所继承的属性影响本身,从而可以用Position:static取消继承,即还原元素定位的默认值。设置为static的元素,它始终会处于页面流给予的位置(static元素会忽略任何top、bottom、left或right声明)。一般不常用。
 
  relative:相对定位。相对定位是相对于元素默认的位置的定位,它偏移的top,right,bottom,left的值都以它原来的位置为基准偏移,而不管其他元素会怎么样。注意relative移动后的元素在原来的位置仍占据空间。
 
  absolute:绝对定位。设置为absolute的元素,如果它的父容器设置了position属性,并且position的属性值为absolute或者relative,那么就会依据父容器进行偏移。如果其父容器没有设置position属性,那么偏移是以body为依据。注意设置absolute属性的元素在标准流中不占位置。
 
  fixed:固定定位。位置被设置为fixed的元素,可定位于相对于浏览器窗口的指定坐标。不论窗口滚动与否,元素都会留在那个位置。它始终是以body为依据的。注意设置fixed属性的元素在标准流中不占位置。
 
  浮动与清除浮动
 
  3.1浮动相关知识
 
  float属性的取值:
 
  left:元素向左浮动。
 
  right:元素向右浮动。
 
  none:默认值。元素不浮动,并会显示在其在文本中出现的位置。
 
  浮动的特性:
 
  浮动元素会从普通文档流中脱离,但浮动元素影响的不仅是自己,它会影响周围的元素对齐进行环绕。
 
  不管一个元素是行内元素还是块级元素,如果被设置了浮动,那浮动元素会生成一个块级框,可以设置它的width和height,因此float常常用于制作横向配列的菜单,可以设置大小并且横向排列。
 
  浮动元素的展示在不同情况下会有不同的规则:
 
  浮动元素在浮动的时候,其margin不会超过包含块的padding。PS:如果想要元素超出,可以设置margin属性
 
  如果两个元素一个向左浮动,一个向右浮动,左浮动元素的marginRight不会和右浮动元素的marginLeft相邻。
 
  如果有多个浮动元素,浮动元素会按顺序排下来而不会发生重叠的现象。
 
  如果有多个浮动元素,后面的元素高度不会超过前面的元素,并且不会超过包含块。
 
  如果有非浮动元素和浮动元素同时存在,并且非浮动元素在前,则浮动元素不会高于非浮动元素
 
  浮动元素会尽可能地向顶端对齐、向左或向右对齐
 
  重叠问题
 
  行内元素与浮动元素发生重叠,其边框,背景和内容都会显示在浮动元素之上
 
  块级元素与浮动元素发生重叠时,边框和背景会显示在浮动元素之下,内容会显示在浮动元素之上
 
  clear属性
 
  clear属性:确保当前元素的左右两侧不会有浮动元素。clear只对元素本身的布局起作用。
 
  取值:left、right、both
 
  3.2父元素高度塌陷问题
 
  为什么要清除浮动,父元素高度塌陷
 
  解决父元素高度塌陷问题:一个块级元素如果没有设置height,其height是由子元素撑开的。对子元素使用了浮动之后,子元素会脱离标准文档流,也就是说,父级元素中没有内容可以撑开其高度,这样父级元素的height就会被忽略,这就是所谓的高度塌陷。
 
  3.3清除浮动的方法
 
  方法1:给父级p定义高度
 
  原理:给父级p定义固定高度(height),能解决父级p无法获取高度得问题。
 
  优点:代码简洁
 
  缺点:高度被固定死了,是适合内容固定不变的模块。(不推荐使用)
 
  方法二:使用空元素,如
 
  (.clear{clear:both})
 
  原理:添加一对空的p标签,利用css的clear:both属性清除浮动,让父级p能够获取高度。
 
  优点:浏览器支持好
 
  缺点:多出了很多空的p标签,如果页面中浮动模块多的话,就会出现很多的空置p了,这样感觉视乎不是太令人满意。(不推荐使用)
 
  方法三:让父级p也一并浮起来
 
  这样做可以初步解决当前的浮动问题。但是也让父级浮动起来了,又会产生新的浮动问题。不推荐使用
 
  方法四:父级p定义display:table
 
  原理:将p属性强制变成表格
 
  优点:不解
 
  缺点:会产生新的未知问题。(不推荐使用)
 
  方法五:父元素设置overflow:hidden、auto;
 
  原理:这个方法的关键在于触发了BFC。在IE6中还需要触发hasLayout(zoom:1)
 
  优点:代码简介,不存在结构和语义化问题
 
  缺点:无法显示需要溢出的元素(亦不太推荐使用)
 
  方法六:父级p定义伪类:after和zoom
 
  .clearfix:after{
 
  content:’.’;
 
  display:block;
 
  height:0;
 
  clear:both;
 
  visibility:hidden;
 
  }
 
  .clearfix{zoom:1;}
 
  原理:IE8以上和非IE浏览器才支持:after,原理和方法2有点类似,zoom(IE转有属性)可解决ie6,ie7浮动问题
 
  优点:结构和语义化完全正确,代码量也适中,可重复利用率(建议定义公共类)
 
  缺点:代码不是非常简洁(极力推荐使用)
 
  经益求精写法
 
  .clearfix:after{
 
  content:”\200B”;
 
  display:block;
 
  height:0;
 
  clear:both;
 
  }
 
  .clearfix{*zoom:1;}照顾IE6,IE7就可以了
 
  4.BFC相关知识
 
  定义:BFC(Blockformattingcontext)直译为“块级格式化上下文”。它是一个独立的渲染区域,只有Block-levelbox参与,它规定了内部的Block-levelBox如何布局,并且与这个区域外部毫不相干。
 
  BFC布局规则
 
  BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
 
  BFC这个元素的垂直方向的边距会发生重叠,垂直方向的距离由margin决定,取最大值
 
  BFC的区域不会与浮动盒子重叠(清除浮动原理)。
 
  计算BFC的高度时,浮动元素也参与计算。
 
  哪些元素会生成BFC
 
  根元素
 
  float属性不为none
 
  position为absolute或fixed
 
  display为inline-block,table-cell,table-caption,flex,inline-flex
 
  overflow不为visible
 
  5.box-sizing是什么
 
  设置CSS盒模型为标准模型或IE模型。标准模型的宽度只包括content,二IE模型包括border和padding
 
  box-sizing属性可以为三个值之一:
 
  content-box,默认值,只计算内容的宽度,border和padding不计算入width之内
 
  padding-box,padding计算入宽度内
 
  border-box,border和padding计算入宽度之内
 
  6.px,em,rem的区别
 
  px像素(Pixel)。绝对单位。像素px是相对于显示器屏幕分辨率而言的,是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI。
 
  em是相对长度单位,相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。它会继承父级元素的字体大小,因此并不是一个固定的值。
 
  rem是CSS3新增的一个相对单位(rootem,根em),使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。
 
  7.CSS引入的方式有哪些?link和@import的区别是?
 
  有四种:内联(元素上的style属性)、内嵌(style标签)、外链(link)、导入(@import)
 
  link和@import的区别:
 
  link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS。
 
  link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。
 
  link是XHTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持。
 
  link支持使用Javascript控制DOM去改变样式;而@import不支持。
 
  流式布局与响应式布局的区别
 
  流式布局
 
  使用非固定像素来定义网页内容,也就是百分比布局,通过盒子的宽度设置成百分比来根据屏幕的宽度来进
 
  行伸缩,不受固定像素的限制,内容向两侧填充。
 
  响应式开发
 
  利用CSS3中的MediaQuery(媒介查询),通过查询screen的宽度来指定某个宽度区间的网页布局。
 
  超小屏幕(移动设备)768px以下
 
  小屏设备768px-992px
 
  中等屏幕992px-1200px
 
  宽屏设备1200px以上
 
  由于响应式开发显得繁琐些,一般使用第三方响应式框架来完成,比如bootstrap来完成一部分工作,当然也可以自己写响应式。
 
  区别
 
  -
 
  流式布局
 
  响应式开发
 
  开发方式
 
  移动Web开发+PC开发
 
  响应式开发
 
  应用场景
 
  一般在已经有PC端网站,开发移动的的时候只需要单独开发移动端
 
  针对一些新建的网站,现在要求适配移动端,所以就一套页面兼容各种终端
 
  开发
 
  正对性强,开发效率高
 
  兼容各种终端,效率低
 
  适配
 
  只适配移动设备,pad上体验相对较差
 
  可以适配各种终端
 
  效率
 
  代码简洁,加载快
 
  代码相对复杂,加载慢
 
  渐进增强和优雅降级
 
  关键的区别是他们所侧重的内容,以及这种不同造成的工作流程的差异
 
  优雅降级一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。。
 
  渐进增强针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
 
  区别:
 
  优雅降级是从复杂的现状开始,并试图减少用户体验的供给
 
  渐进增强则是从一个非常基础的,能够起作用的版本开始,并不断扩充,以适应未来环境的需要
 
  降级(功能衰减)意味着往回看;而渐进增强则意味着朝前看,同时保证其根基处于安全地带
 
  10.CSS隐藏元素的几种方式及区别
 
  display:none
 
  元素在页面上将彻底消失,元素本来占有的空间就会被其他元素占有,也就是说它会导致浏览器的重排和重绘。
 
  不会触发其点击事件
 
  visibility:hidden
 
  和display:none的区别在于,元素在页面消失后,其占据的空间依旧会保留着,所以它只会导致浏览器重绘而不会重排。
 
  无法触发其点击事件
 
  适用于那些元素隐藏后不希望页面布局会发生变化的场景
 
  opacity:0
 
  将元素的透明度设置为0后,在我们用户眼中,元素也是隐藏的,这算是一种隐藏元素的方法。
 
  和visibility:hidden的一个共同点是元素隐藏后依旧占据着空间,但我们都知道,设置透明度为0后,元素只是隐身了,它依旧存在页面中。
 
  可以触发点击事件
 
  设置height,width等盒模型属性为0
 
  简单说就是将元素的margin,border,padding,height和width等影响元素盒模型的属性设置成0,如果元素内有子元素或内容,还应该设置其overflow:hidden来隐藏其子元素,这算是一种奇技淫巧。
 
  如果元素设置了border,padding等属性不为0,很显然,页面上还是能看到这个元素的,触发元素的点击事件完全没有问题。如果全部属性都设置为0,很显然,这个元素相当于消失了,即无法触发点击事件。
 
  这种方式既不实用,也可能存在着着一些问题。但平时我们用到的一些页面效果可能就是采用这种方式来完成的,比如jquery的slideUp动画,它就是设置元素的overflow:hidden后,接着通过定时器,不断地设置元素的height,margin-top,margin-bottom,border-top,border-bottom,padding-top,padding-bottom为0,从而达到slideUp的效果。
 
  其他脑洞方法
 
  设置元素的position与left,top,bottom,right等,将元素移出至屏幕外
 
  设置元素的position与z-index,将z-index设置成尽量小的负数
 
  简述一下src与href的区别
 
  href是指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,用于超链接。
 
  src是指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;在请求src资源时会将其指向的资源下载并应用到文档内,例如js脚本,img图片和frame等元素。当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等元素也如此,类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
 
  行内元素有哪些?块级元素有哪些?空(void)元素有那些?
 
  这个问题面试偶尔被问到的时候有点懵逼~~~平时没在意。。。。
 
  行内元素:a、b、span、img、input、strong、select、label、em、button、textarea
 
  块级元素:p、ul、li、dl、dt、dd、p、h1-h6、blockquote
 
  空元素:即系没有内容的HTML元素,例如:br、meta、hr、link、input、img
 
  怎么让一个不定宽高的p,垂直水平居中?
 
  使用Flex
 
  只需要在父盒子设置:display:flex;justify-content:center;align-items:center;
 
  使用CSS3transform
 
  父盒子设置:position:relative
 
  p设置:transform:translate(-50%,-50%);position:absolute;top:50%;left:50%;
 
  使用display:table-cell方法
 
  父盒子设置:display:table-cell;text-align:center;vertical-align:middle;
 
  p设置:display:inline-block;vertical-align:middle;
 
  2.position几个属性的作用
 
  position的常见四个属性值:relative,absolute,fixed,static。一般都要配合“left”、”top”、”right”以及“bottom”属性使用。
 
  static:默认位置。在一般情况下,我们不需要特别的去声明它,但有时候遇到继承的情况,我们不愿意见到元素所继承的属性影响本身,从而可以用Position:static取消继承,即还原元素定位的默认值。设置为static的元素,它始终会处于页面流给予的位置(static元素会忽略任何top、bottom、left或right声明)。一般不常用。
 
  relative:相对定位。相对定位是相对于元素默认的位置的定位,它偏移的top,right,bottom,left的值都以它原来的位置为基准偏移,而不管其他元素会怎么样。注意relative移动后的元素在原来的位置仍占据空间。
 
  absolute:绝对定位。设置为absolute的元素,如果它的父容器设置了position属性,并且position的属性值为absolute或者relative,那么就会依据父容器进行偏移。如果其父容器没有设置position属性,那么偏移是以body为依据。注意设置absolute属性的元素在标准流中不占位置。
 
  fixed:固定定位。位置被设置为fixed的元素,可定位于相对于浏览器窗口的指定坐标。不论窗口滚动与否,元素都会留在那个位置。它始终是以body为依据的。注意设置fixed属性的元素在标准流中不占位置。
 
  浮动与清除浮动
 
  3.1浮动相关知识
 
  float属性的取值:
 
  left:元素向左浮动。
 
  right:元素向右浮动。
 
  none:默认值。元素不浮动,并会显示在其在文本中出现的位置。
 
  浮动的特性:
 
  浮动元素会从普通文档流中脱离,但浮动元素影响的不仅是自己,它会影响周围的元素对齐进行环绕。
 
  不管一个元素是行内元素还是块级元素,如果被设置了浮动,那浮动元素会生成一个块级框,可以设置它的width和height,因此float常常用于制作横向配列的菜单,可以设置大小并且横向排列。
 
  浮动元素的展示在不同情况下会有不同的规则:
 
  浮动元素在浮动的时候,其margin不会超过包含块的padding。PS:如果想要元素超出,可以设置margin属性
 
  如果两个元素一个向左浮动,一个向右浮动,左浮动元素的marginRight不会和右浮动元素的marginLeft相邻。
 
  如果有多个浮动元素,浮动元素会按顺序排下来而不会发生重叠的现象。
 
  如果有多个浮动元素,后面的元素高度不会超过前面的元素,并且不会超过包含块。
 
  如果有非浮动元素和浮动元素同时存在,并且非浮动元素在前,则浮动元素不会高于非浮动元素
 
  浮动元素会尽可能地向顶端对齐、向左或向右对齐
 
  重叠问题
 
  行内元素与浮动元素发生重叠,其边框,背景和内容都会显示在浮动元素之上
 
  块级元素与浮动元素发生重叠时,边框和背景会显示在浮动元素之下,内容会显示在浮动元素之上
 
  clear属性
 
  clear属性:确保当前元素的左右两侧不会有浮动元素。clear只对元素本身的布局起作用。
 
  取值:left、right、both
 
  3.2父元素高度塌陷问题
 
  为什么要清除浮动,父元素高度塌陷
 
  解决父元素高度塌陷问题:一个块级元素如果没有设置height,其height是由子元素撑开的。对子元素使用了浮动之后,子元素会脱离标准文档流,也就是说,父级元素中没有内容可以撑开其高度,这样父级元素的height就会被忽略,这就是所谓的高度塌陷。
 
  3.3清除浮动的方法
 
  方法1:给父级p定义高度
 
  原理:给父级p定义固定高度(height),能解决父级p无法获取高度得问题。
 
  优点:代码简洁
 
  缺点:高度被固定死了,是适合内容固定不变的模块。(不推荐使用)
 
  方法二:使用空元素,如
 
  (.clear{clear:both})
 
  原理:添加一对空的p标签,利用css的clear:both属性清除浮动,让父级p能够获取高度。
 
  优点:浏览器支持好
 
  缺点:多出了很多空的p标签,如果页面中浮动模块多的话,就会出现很多的空置p了,这样感觉视乎不是太令人满意。(不推荐使用)
 
  方法三:让父级p也一并浮起来
 
  这样做可以初步解决当前的浮动问题。但是也让父级浮动起来了,又会产生新的浮动问题。不推荐使用
 
  方法四:父级p定义display:table
 
  原理:将p属性强制变成表格
 
  优点:不解
 
  缺点:会产生新的未知问题。(不推荐使用)
 
  方法五:父元素设置overflow:hidden、auto;
 
  原理:这个方法的关键在于触发了BFC。在IE6中还需要触发hasLayout(zoom:1)
 
  优点:代码简介,不存在结构和语义化问题
 
  缺点:无法显示需要溢出的元素(亦不太推荐使用)
 
  方法六:父级p定义伪类:after和zoom
 
  .clearfix:after{
 
  content:’.’;
 
  display:block;
 
  height:0;
 
  clear:both;
 
  visibility:hidden;
 
  }
 
  .clearfix{zoom:1;}
 
  原理:IE8以上和非IE浏览器才支持:after,原理和方法2有点类似,zoom(IE转有属性)可解决ie6,ie7浮动问题
 
  优点:结构和语义化完全正确,代码量也适中,可重复利用率(建议定义公共类)
 
  缺点:代码不是非常简洁(极力推荐使用)
 
  经益求精写法
 
  .clearfix:after{
 
  content:”\200B”;
 
  display:block;
 
  height:0;
 
  clear:both;
 
  }
 
  .clearfix{*zoom:1;}照顾IE6,IE7就可以了
 
  详细关于浮动的知识请参看这篇文章:
 
  http://luopq.com/2015/11/08/CSS-float/
 
  4.BFC相关知识
 
  定义:BFC(Blockformattingcontext)直译为“块级格式化上下文”。它是一个独立的渲染区域,只有Block-levelbox参与,它规定了内部的Block-levelBox如何布局,并且与这个区域外部毫不相干。
 
  BFC布局规则
 
  BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
 
  BFC这个元素的垂直方向的边距会发生重叠,垂直方向的距离由margin决定,取最大值
 
  BFC的区域不会与浮动盒子重叠(清除浮动原理)。
 
  计算BFC的高度时,浮动元素也参与计算。
 
  哪些元素会生成BFC
 
  根元素
 
  float属性不为none
 
  position为absolute或fixed
 
  display为inline-block,table-cell,table-caption,flex,inline-flex
 
  overflow不为visible
 
  5.box-sizing是什么
 
  设置CSS盒模型为标准模型或IE模型。标准模型的宽度只包括content,二IE模型包括border和padding
 
  box-sizing属性可以为三个值之一:
 
  content-box,默认值,只计算内容的宽度,border和padding不计算入width之内
 
  padding-box,padding计算入宽度内
 
  border-box,border和padding计算入宽度之内
 
  6.px,em,rem的区别
 
  px像素(Pixel)。绝对单位。像素px是相对于显示器屏幕分辨率而言的,是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI。
 
  em是相对长度单位,相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。它会继承父级元素的字体大小,因此并不是一个固定的值。
 
  rem是CSS3新增的一个相对单位(rootem,根em),使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。
 
  7.CSS引入的方式有哪些?link和@import的区别是?
 
  有四种:内联(元素上的style属性)、内嵌(style标签)、外链(link)、导入(@import)
 
  link和@import的区别:
 
  link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS。
 
  link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。
 
  link是XHTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持。
 
  link支持使用Javascript控制DOM去改变样式;而@import不支持。
 
  流式布局与响应式布局的区别
 
  流式布局
 
  使用非固定像素来定义网页内容,也就是百分比布局,通过盒子的宽度设置成百分比来根据屏幕的宽度来进
 
  行伸缩,不受固定像素的限制,内容向两侧填充。
 
  响应式开发
 
  利用CSS3中的MediaQuery(媒介查询),通过查询screen的宽度来指定某个宽度区间的网页布局。
 
  超小屏幕(移动设备)768px以下
 
  小屏设备768px-992px
 
  中等屏幕992px-1200px
 
  宽屏设备1200px以上
 
  由于响应式开发显得繁琐些,一般使用第三方响应式框架来完成,比如bootstrap来完成一部分工作,当然也可以自己写响应式。
 
  区别
 
  -
 
  流式布局
 
  响应式开发
 
  开发方式
 
  移动Web开发+PC开发
 
  响应式开发
 
  应用场景
 
  一般在已经有PC端网站,开发移动的的时候只需要单独开发移动端
 
  针对一些新建的网站,现在要求适配移动端,所以就一套页面兼容各种终端
 
  开发
 
  正对性强,开发效率高
 
  兼容各种终端,效率低
 
  适配
 
  只适配移动设备,pad上体验相对较差
 
  可以适配各种终端
 
  效率
 
  代码简洁,加载快
 
  代码相对复杂,加载慢
 
  渐进增强和优雅降级
 
  关键的区别是他们所侧重的内容,以及这种不同造成的工作流程的差异
 
  优雅降级一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。。
 
  渐进增强针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
 
  区别:
 
  优雅降级是从复杂的现状开始,并试图减少用户体验的供给
 
  渐进增强则是从一个非常基础的,能够起作用的版本开始,并不断扩充,以适应未来环境的需要
 
  降级(功能衰减)意味着往回看;而渐进增强则意味着朝前看,同时保证其根基处于安全地带
 
  10.CSS隐藏元素的几种方式及区别
 
  display:none
 
  元素在页面上将彻底消失,元素本来占有的空间就会被其他元素占有,也就是说它会导致浏览器的重排和重绘。
 
  不会触发其点击事件
 
  visibility:hidden
 
  和display:none的区别在于,元素在页面消失后,其占据的空间依旧会保留着,所以它只会导致浏览器重绘而不会重排。
 
  无法触发其点击事件
 
  适用于那些元素隐藏后不希望页面布局会发生变化的场景
 
  opacity:0
 
  将元素的透明度设置为0后,在我们用户眼中,元素也是隐藏的,这算是一种隐藏元素的方法。
 
  和visibility:hidden的一个共同点是元素隐藏后依旧占据着空间,但我们都知道,设置透明度为0后,元素只是隐身了,它依旧存在页面中。
 
  可以触发点击事件
 
  设置height,width等盒模型属性为0
 
  简单说就是将元素的margin,border,padding,height和width等影响元素盒模型的属性设置成0,如果元素内有子元素或内容,还应该设置其overflow:hidden来隐藏其子元素,这算是一种奇技淫巧。
 
  如果元素设置了border,padding等属性不为0,很显然,页面上还是能看到这个元素的,触发元素的点击事件完全没有问题。如果全部属性都设置为0,很显然,这个元素相当于消失了,即无法触发点击事件。
 
  这种方式既不实用,也可能存在着着一些问题。但平时我们用到的一些页面效果可能就是采用这种方式来完成的,比如jquery的slideUp动画,它就是设置元素的overflow:hidden后,接着通过定时器,不断地设置元素的height,margin-top,margin-bottom,border-top,border-bottom,padding-top,padding-bottom为0,从而达到slideUp的效果。
 
  其他脑洞方法
 
  设置元素的position与left,top,bottom,right等,将元素移出至屏幕外
 
  设置元素的position与z-index,将z-index设置成尽量小的负数
 
  简述一下src与href的区别
 
  href是指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,用于超链接。
 
  src是指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;在请求src资源时会将其指向的资源下载并应用到文档内,例如js脚本,img图片和frame等元素。当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等元素也如此,类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
 
  行内元素有哪些?块级元素有哪些?空(void)元素有那些?
 
  这个问题面试偶尔被问到的时候有点懵逼~~~平时没在意。。。。
 
  行内元素:a、b、span、img、input、strong、select、label、em、button、textarea
 
  块级元素:p、ul、li、dl、dt、dd、p、h1-h6、blockquote
 
  空元素:即系没有内容的HTML元素,例如:br、meta、hr、link、input、img





本文转载自中文网

 

推荐阅读