乐趣区

html面试

jiezi

HTML

行内元素有哪些？块级元素有哪些？空 (void) 元素有那些？

首先：CSS 规范规定，每个元素都有 display 属性，确定该元素的类型，每个元素都有默认的 display 值，如 div 的 display 默认值为“block”，则为“块级”元素；span 默认 display 属性值为“inline”，是“行内”元素。

（1）行内元素有：ab span img input select strong（强调的语气）

（2）块级元素有：divul ol li dl dt dd h1 h2 h3 h4…p

（3）常见的空元素：
<br><hr> <img> <input> <link><meta>

document.write 和 innerHTML 的区别

  • document.write 是直接写入到页面的内容流，如果在写之前没有调用 document.open, 浏览器会自动调用 open。每次写完关闭之后重新调用该函数，会导致页面被重写。
  • innerHTML 则是 DOM 页面元素的一个属性，代表该元素的 html 内容。你可以精确到某一个具体的元素来进行更改。如果想修改 document 的内容，则需要修改 document.documentElement.innerElement。
  • innerHTML 将内容写入某个 DOM 节点，不会导致页面全部重绘。
  • innerHTML 很多情况下都优于 document.write，其原因在于其允许更精确的控制要刷新页面的那一个部分。
  • document.write 是重写整个 document, 写入内容是字符串的 html；innerHTML 是 HTMLElement 的属性，是一个元素的内部 html 内容

如何让一个 div 上下左右居中？

方法 1：.div1{width:400px;  height:400px;  border:#CCC 1px solid;   background:#99f;  position:absolute;  left:50%;   top:50%;   transform: translate(-50%,-50%); }   <div class="div1"></div> 
方法 2：.div2{width:400px;  height:400px;  border:#CCC 1px solid;  background:#99f;  position: absolute;  left:0;  top: 0;  bottom: 0;  right: 0;  margin: auto;}  <div class="div2"></div> 
方法 3：.div3{width:400px;  height:400px;  border:#CCC 1px solid;  background:#9f9;  position: absolute;  left: 50%;  top:50%;  margin-left:-200px;  margin-top: -200px;}   <div class="div3"></div>

px/em/rem 有什么区别？为什么通常给 font-size 设置的字体为 62.5%

相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
1、em 的值并不是固定的；
2、em 会继承父级元素的字体大小。使用 rem 为元素设定字体大小时，仍然是相对大小，但相对的只是 HTML 根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。
rem 是相对于浏览器进行缩放的。1rem 默认是 16px，在响应式布局中，一个个除来转换成 rem，太麻烦，所以重置 rem
body{font-size=62.5%} 此时 1rem = 10px; 若是 12px 则是 1.2rem.

css 清除浮动有几种方式？

1、父级 div 定义 height
2、结尾处加空 div 标签 clear:both
3、父级 div 定义 伪类:after 和 zoom
4、父级 div 定义 overflow:hidden
5、父级 div 定义 overflow:auto
6、父级 div 也一起浮动
7、父级 div 定义 display:table

为什么要初始化 css 样式？

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对 CSS 初始化往往会出现浏览器之间的页面显示差异。

css3 有哪些新特性？

CSS3 实现圆角（border-radius），阴影（box-shadow），
对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);
// 旋转, 缩放, 定位, 倾斜增加了更多的 CSS 选择器 多背景 rgba 在 CSS3 中唯一引入的伪元素是::selection. 媒体查询，多栏布局 border-image

H5 有哪些新特性？

1、绘画的 canvas 元素
2、用于媒介回放的 video 和 audio 元素
3、对本地离线存储的更好的支持
4、新的特殊内容元素，比如 article、footer、header、nav、section 5、新的表单控件，比如 calendar、date、time、email、url、search

图片和文字在同一行显示?

1 在 css 中给 div 添加上“vertical-align:middle”属性。
2 分别把图片和文字放入不同的 div 中，然后用“margin”属性进行定位，就可以使他们显示在同一行。
3 把图片设置为背景图片。

退出移动版