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