前端开发面试题之HTML、CSS

HTML

• 五大浏览器及内核?
  ie (trident)
  谷歌 (webkit/blink)
  火狐 (gecko)
  safari (webkit)
  欧朋 (presto)

• label的作用是什么？
  for 属性表示Label标签要绑定的HTML 元素，你点击这个标签的时候，所绑定的元素将获取焦点。

    用户名 : 
    

• 说一下行内和块级元素?
  常用行内元素：span、a、img、input、select、label、textarea、button等
  块级元素：div、h1、ol、ul、li、p、header、footer等

• 简述一下对HTML语义化的理解
  1.去掉或丢失样式的时候能够让页面呈现出清晰的结构。
  2.有利于SEO和搜索引擎建立良好沟通，有助于爬虫抓取更多的信息，爬虫依赖于标签来确定上下文和各个关键字的权重。
  3.方便其它设备解析。
  4.便于团队开发和维护，语义化根据可读性。

• DOCTYPE有什么作用？标准模式与混杂模式如何区分？它们有何意义?
  作用：告诉浏览器使用哪个版本的HTML规范来渲染文档。DOCTYPE不存在或形式不正确会导致HTML文档以混杂模式呈现。
  标准模式（Standards mode）以浏览器支持的最高标准运行；
  混杂模式（Quirks mode）中页面是一种比较宽松的向后兼容的方式显示。

CSS

• 页面导入样式时，使用link和@import有什么区别
  link属于html标签，而@import是css提供的
  页面加载时，link会同时被加载，而@import引用的css会等到页面加载结束后加载
  link是html标签，因此没有兼容性，而@import只有IE5以上才能识别
  link除了引用样式文件，还可以引用图片等资源文件，而@import只引用样式文件
  link支持使用Javascript控制DOM去改变样式；而@import不支持。

• 怎么让Chrome支持小于12px 的文字？

-webkit-text-size-adjust:none;  //但这个属性在高版本的 Chrome 中已经被废除。
transform: scale();

• px,em,rem的区别
  px：像素,是相对于显示器屏幕分辨率而言的固定的值。
  em：值并不是固定的 , 会继承父级元素的字体大小。
  rem：只是相对于html根元素字体大小

• 详解
  px：绝对度量单位，就是像素
  em：相对度量单位，但是计算起来实在费劲。em指的是相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。换句话说，如果当前div的字体大小是12像素，那么1em就是12像素，如果div字体大小是24像素，1em就是24像素。
  rem：也是和字体相关的相对度量单位，但是，rem是相对于根元素的字体大小进行设置的，如果html元素中的字体大小设置为24px，那么针对任意html内的元素设置1rem，均表示的是24px，大大节省了我们计算字体大小的时间。

• calc, support, media各自的含义及用法？
  @support主要是用于检测浏览器是否支持CSS的某个属性，其实就是条件判断，如果支持某个属性，你可以写一套样式，如果不支持某个属性，你也可以提供另外一套样式作为替补。

 @supports (display: flex) { div { display: flex; }}
 @supports not (display: flex) { div { float: right; }}

calc()函数用于动态计算长度值。 calc()函数支持 "+", "-", "*", "/" 运算；

width:calc(100% - 30px) / 4;  //注意:符号前后都需要加空格

• @media查询，你可以针对不同的媒体类型定义不同的样式。特别是如果你需要设置设计响应式的页面，@media 是非常有用的。

@media screen and (min-width:960px){ 
    body{background:orange;}
 }

css水平、垂直居中的写法，请至少写出4种？
水平居中

text-align: center;  /* 行内元素*/
margin: 0 auto;  /* 块级元素*/
position:absolute;left:50%;transform:translateX(-50%);
display:flex; justify-content: center;

垂直居中

height: 100px;line-height: 100px;
position：absolute;top:50%;transform:translateY(-50%);
display:flex; align-items: center;
display:table+display:table-cell; vertical-align: middle;

• 画一条0.5px的直线？

height: 1px;transform: scaleY(0.5);

• 说一下盒模型？
  盒模型的组成，由里向外content,padding,border,margin;
  在IE盒子模型中，width表示content+padding+border这三个部分的宽度。
  在标准的盒子模型中，width指content部分的宽度。
  box-sizing(默认值:content-box)的使用。

box-sizing: content-box;  /* 是W3C盒子模型。*/
box-sizing: border-box;  /* 是IE盒子模型。*/

• 浏览器是怎样解析CSS选择器的?
  CSS选择器的解析是从右向左解析的。

• display的值及其作用?
  inline：（默认值）：表示指定对象为内联元素。
  none： 表示隐藏对象，与visibility属性的hidden值不同，display：none不为被隐藏的对象保留物理空间 ，然visibility：hidden就保留。
  block： 指定对象为块元素。
  list-item： 指定对象为列表项目。
  inline-block： 指定对象为内联块元素。
  table： 指定对象作为块元素级的表格。
  inline-table： 指定对象作为内联元素级的表格。
  flex： 将对象设置为弹性布局。

• 说一下你理解的hack?
  CSS hack的目的就是使你的CSS代码兼容不同的浏览器。

• CSS继承性?
  不是所有的属性都可以继承, 只有以color/font-/text-/line-开头的属性才可以继承。
  所有元素可继承:visibility和cursor。
  标签的文字颜色和下划线是不能继承的。
  标签的文字大小是不能继承的。

• 定位流

position: relative;  /* 相对定位就是相对于原来在标准流中的位置进行移动。*/
position: absolute;  /* 默认情况下是以body为参考点,如果祖先元素中有一个元素也是定位流(相对定位、绝对定位、固定定位),那么就是以这个元素为参考点。*/

• 实现移动端1px边框

1、viewport + rem 实现
同时通过设置对应viewport的rem基准值，这种方式就可以像以前一样轻松愉快的写1px了。
在devicePixelRatio = 2 时，输出viewport：

在devicePixelRatio = 3 时，输出viewport：

2、box-shadow模拟边框，利用css 对阴影处理的方式实现0.5px的效果

box-shadow: inset 0px -1px 1px -1px #c8c7cc;

3、transform实现

  transform: scaleY(.5);  //横线

• CSS3新特性有那些
  颜色：新增rgba()
  文字阴影：text-shadow: ;
  边框：圆角border-radius: ;边框阴影box-shadow: ;
  盒子模型：box-sizing: ;
  背景：bacground-size: ;设置图片的尺寸
  background-origin: ;设置图片的原点
  background-clip: ;设置背景图片的剪裁区域
  渐变：linear-gradient radial-gradient

例：
  background:linear-gradient(red, blue);

过度：transition: ;可以实现动画
自定义动画：@keyframes
唯一引入的伪元素：::selection
媒体查询：@media

例：
@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}

边框图像：border-image

例：
  border-image:url(border.png) 30 round;