HTML和CSS重难点见识点总结

本文主要和大家分享HTML和CSS重难点知识点总结，但愿能帮忙到大家。

1. 如何让一个不定宽高的 p，垂直水平居中?
   使用 Flex

只需要在父盒子设定：display: flex; justify-content: center;align-items: center;

使用 CSS3 transform

父盒子设定: 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 属性的元素在标准流中不占位置。

1. 浮动与清除浮动
   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(Block formatting context) 直译为 “块级格局化上下文”。它是一个独立的渲染区域，只要 Block-level box 参 与， 它规定了内部的 Block-level Box 怎样规划，并且与这个区域外部毫不相关。
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 新增的一个相对单位 (root em，根 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 不支撑。

1. 流式规划与响应式规划的不同
   流式规划
   使用非牢固像从来定义网页内容，也就是百分比规划，通过盒子的宽度设定成百分比来按照屏幕的宽度来进
   行伸缩，不受牢固像素的限制，内容向两侧填充。
   响应式开发
   利用 CSS3 中的 Media Query(媒介查询)，通过查询 screen 的宽度来指定某个宽度区间的网页规划。

超小屏幕 (移动设备) 768px 以下
小屏设备 768px-992px
中等屏幕 992px-1200px
宽屏设备 1200px 以上

由于响应式开发显得繁琐些，一样使用第三方响应式框架来完成，比方 bootstrap 来完成一部分工作，当然也 可以本人写响应式。
不同

-
流式规划
响应式开发

开发方式
移动 Web 开发 + PC 开发
响应式开发

利用场景
一样在已经有 PC 端网站，开发移动的的时候只需要独自开发移动端
针对一些创建的网站，此刻要求适配移动端，所以就一套页面兼容各种终端

开发
正对性强，开发效力高
兼容各种终端，效力低

适配
只适配移动设备，pad 上体验相对较差
可以适配各种终端

效力
代码简约，加载快
代码相对复杂，加载慢

1. 渐进增强和文雅落级
   关键的不同是他们所侧重的内容，乃至这种不一样造成的工作流程的差别

文雅落级一开端就构建完全的功效，然后再针对低版本阅读器停止兼容。。
渐进增强针对低版本阅读器停止构建页面，包管最根本的功效，然后再针对高级阅读器停止结果、交互等改善和追加功效到达更好的会员体验。

不同：

文雅落级是从复杂的近况开端，并试图减少会员体验的供应
渐进增强则是从一个非常根基的，能够起作用的版本开端，并不竭扩大，以顺应将来环境的需要
落级（功效衰减）意味着往回看；而渐进增强则意味着朝前看，同时包管其基本处于平安地带

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 设定成尽量小的负数

1. 简述一下 src 与 href 的不同
   href 是指向网络资源所在位置，创立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。
   src 是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在恳求 src 资源时会将其指向的资源下载并利用到文档内，例如 js 足本，img 图片和 frame 等元素。当阅读器解析到该元素时，会暂停其他资源的下载和处置，直到将该资源加载、编译、施行完毕，图片和框架等元素也如此，相似于将所指向资源嵌入当前标签内。这也是为什么将 js 足本放在底部而不是头部。

2. 行内元素是什么？块级元素是什么？ 空 (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

1. 如何让一个不定宽高的 p，垂直水平居中?
   使用 Flex

只需要在父盒子设定：display: flex; justify-content: center;align-items: center;

使用 CSS3 transform

父盒子设定: 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 属性的元素在标准流中不占位置。

1. 浮动与清除浮动
   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(Block formatting context) 直译为 “块级格局化上下文”。它是一个独立的渲染区域，只要 Block-level box 参 与， 它规定了内部的 Block-level Box 怎样规划，并且与这个区域外部毫不相关。
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 新增的一个相对单位 (root em，根 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 不支撑。

1. 流式规划与响应式规划的不同
   流式规划
   使用非牢固像从来定义网页内容，也就是百分比规划，通过盒子的宽度设定成百分比来按照屏幕的宽度来进
   行伸缩，不受牢固像素的限制，内容向两侧填充。
   响应式开发
   利用 CSS3 中的 Media Query(媒介查询)，通过查询 screen 的宽度来指定某个宽度区间的网页规划。

超小屏幕 (移动设备) 768px 以下
小屏设备 768px-992px
中等屏幕 992px-1200px
宽屏设备 1200px 以上

由于响应式开发显得繁琐些，一样使用第三方响应式框架来完成，比方 bootstrap 来完成一部分工作，当然也 可以本人写响应式。
不同

-
流式规划
响应式开发

开发方式
移动 Web 开发 + PC 开发
响应式开发

利用场景
一样在已经有 PC 端网站，开发移动的的时候只需要独自开发移动端
针对一些创建的网站，此刻要求适配移动端，所以就一套页面兼容各种终端

开发
正对性强，开发效力高
兼容各种终端，效力低

适配
只适配移动设备，pad 上体验相对较差
可以适配各种终端

效力
代码简约，加载快
代码相对复杂，加载慢

1. 渐进增强和文雅落级
   关键的不同是他们所侧重的内容，乃至这种不一样造成的工作流程的差别

文雅落级一开端就构建完全的功效，然后再针对低版本阅读器停止兼容。。
渐进增强针对低版本阅读器停止构建页面，包管最根本的功效，然后再针对高级阅读器停止结果、交互等改善和追加功效到达更好的会员体验。

不同：

文雅落级是从复杂的近况开端，并试图减少会员体验的供应
渐进增强则是从一个非常根基的，能够起作用的版本开端，并不竭扩大，以顺应将来环境的需要
落级（功效衰减）意味着往回看；而渐进增强则意味着朝前看，同时包管其基本处于平安地带

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 设定成尽量小的负数

1. 简述一下 src 与 href 的不同
   href 是指向网络资源所在位置，创立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。
   src 是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在恳求 src 资源时会将其指向的资源下载并利用到文档内，例如 js 足本，img 图片和 frame 等元素。当阅读器解析到该元素时，会暂停其他资源的下载和处置，直到将该资源加载、编译、施行完毕，图片和框架等元素也如此，相似于将所指向资源嵌入当前标签内。这也是为什么将 js 足本放在底部而不是头部。

2. 行内元素是什么？块级元素是什么？ 空 (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

相关引荐：

总结8个关于html、css链接样式的实例代码

分享一个超全面的HTML、CSS知识点总结

在html、css和js代码中有关注释标准用途小结

以上就是HTML和CSS重难点知识点总结的具体内容，更多请关注百分百源码网其它相关文章！