html面试

45次阅读

共计 2253 个字符,预计需要花费 6 分钟才能阅读完成。

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 把图片设置为背景图片。

正文完
 0