1. 怎么让一个不定宽高的 DIV, 垂直水平居中?
使用 Flex
只需要在父盒子设置: display: flex; justify-content: center;align-items: center;
使用 CSS3 transform
父盒子设置: position:relative
Div 设置: transform: translate(-50%,-50%);position: absolute;top: 50%;left: 50%;
使用 display:table-cell 方法
父盒子设置: display:table-cell; text-align:center;vertical-align:middle;
Div 设置: display:inline-block;vertical-align:middle;
2.box-sizing 是什么
设置 CSS 盒模型为标准模型或 IE 模型标准模型的宽度只包括 content, 二 IE 模型包括 border 和 padding
box-sizing 属性可以为三个值之一:
content-box, 默认值, 只计算内容的宽度, border 和 padding 不计算入 width 之内
padding-box,padding 计算入宽度内
border-box,border 和 padding 计算入宽度之内
3.px,em,rem 的区别
px 像素 (Pixel) 绝对单位像素 px 是相对于显示器屏幕分辨率而言的, 是一个虚拟长度单位, 是计算 机系统的数字化图像长度单位, 如果 px 要换算成物理长度, 需要指定精度 DPI
em 是相对长度单位, 相对于当前对象内文本的字体尺寸如当前对行内文本的字体尺寸未被人为设置, 则相对于浏览器的默认字体尺寸它会继承父级元素的字体大小, 因此并不是一个固定的值
rem 是 CSS3 新增的一个相对单位(root em, 根 em), 使用 rem 为元素设定字体大小时, 仍然是相对大小, 但相对的只是 html 根元素
4.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 不支持
5.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 设置成尽量小的负数
6. 简述一下 src 与 href 的区别
href 是指向网络资源所在位置, 建立和当前元素 (锚点) 或当前文档 (链接) 之间的链接, 用于超链接
src 是指向外部资源的位置, 指向的内容将会嵌入到文档中当前标签所在位置; 在请求 src 资源时会将其指向的资源下载并应用到文档内, 例如 js 脚本, img 图片和 frame 等元素当浏览器解析到该元素时, 会暂停其他资源的下载和处理, 直到将该资源加载编译执行完毕, 图片和框架等元素也如此, 类似于将所指向资源嵌入当前标签内这也是为什么将 js 脚本放在底部而不是头部
7. 行内元素有哪些? 块级元素有哪些? 空 (void) 元素有那些?
行内元素: abspanimginputstrongselectlabelembuttontextarea
块级元素: divullidldtddph1-h6blockquote
空元素: 即系没有内容的 HTML 元素, 例如: brmetahrlinkinputimg
来源: http://www.jianshu.com/p/94e35174398d