饥人谷-CSDN博客

HTML押题

1. （必考）你是如何理解 HTML 语义化的？

根据内容的结构或者内容选择合适的标签，有利于开发者阅读和写出优雅的代码，同时浏览器的爬虫更好解析。e.g. h1~h6 ul li等

2.meta viewport 是做什么用的，怎么写？

meta viewport是专为移动设备下显示所设计的.只有检测到在移动设备上使用包含meta的文档时, meta标签才会起作用.

 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">复制代码

name为viewport表示供移动设备使用. content定义了viewport的属性. width表示移动设设备下显示的宽度为设备宽度(device-width) height表示移动设设备下显示的宽度为设备宽度. user-scalable表示用户缩放能力, no表示不允许. initial-scale表示设备与视口的缩放比率 maximum和minimum分别表示缩放的最大最小值, 要注意的是, maximum必须必minimum大. 上面的meta标签就是告诉浏览器, 不要在移动端显示的时候缩放.

3. canvas 元素是干什么的

该元素标签强大之处在于可以直接在HTML上进行图形操作，使用 JavaScript 在网页上绘制图像。主要用在游戏等。

css押题

1.（必考）说说盒模型

一个盒子中主要的属性就5个：width、height、padding、border、margin。

盒模型的问题：

（1）浏览器的默认样式，body标签有8个像素的外间距
*{ margin:0; padding:0; }
（2）margin可以设置负值，padding不可以设置负值
（3）行内标签不能设置上下外边距，可以设置左右外边距
（4）盒子的真实宽高
（5）当重复设置同一区域时，显示较大的值
给上边盒子设置下边距，给左边盒子设置右边距
（6）margin-top的BUG（同时满足五个条件）
（1）是父元素的第一个子元素
（2）父元素没有内填充
（3）父元素没有边框
（4）父元素没有浮动
（5）子元素没有浮动
bug描述：给子元素设置的margin-top,好像作用在父元素上了。
解决bug的办法：1.用父元素的padding-top代替子元素的margin-topp;2.给父元素加一个overflower:hidden;

2.Normalize.css只是一个很小的css文件，但它在磨人的HTML元素样式上提供了跨浏览器的高度一致性。

3. （必考）如何居中？

（1）定位 left:0; right:0; margin-left:auto; margin-right:auto;

（2）margin width:*px; margin:0 auto;

（3）text-algin:center;

（4）display:flex; justify-contentL:center;

4. 选择器优先级如何确定？