2019年底前端面试及答案-html/css

7,403 阅读12分钟

第一天先更新html/css,还有后续JavaScript、vue、es6会持续更新
(看前先点赞,养成好习惯哈哈哈 )
css盒模型、BFC、css浮动、css经典布局、css兼容、css hack、html/ css基础

  • JavaScrip面试题地址(超用心)

  • es6面试题地址

  • vue面试题地址

  • css盒模型

    css盒模型基本概念?

    1. margin、border、padding、content。在网页中,一个元素占有空间的大小由几个部分构成,其中包括元素的内容(content),元素的内边距(padding),元素的边框(border)元素的外边距(margin)四个部分。这四个部分占有的空间中,有的部分可以显示相应的内容,而有的部分只用来分隔相邻的区域。4个部分一起构成了css中元素的盒模型。
    2. 分类:标准模型、IE模型

    标准模型和IE模型的区别:计算高度和宽度的不同,怎么不同,高度宽度是怎么计算的?

    1. 标准模型
    div宽度 = 内容宽度+border宽度+padding宽度 //改变border宽度,div宽度会变化
    box-sizing:content-box;  /*设置标准盒子*/
    
    1. 怪异模型|IE模型
    div宽度(定死) = 内容宽度+border宽度+padding宽度 //改变border宽度,div宽度不会变化
    box-sizing:border-box; /*IE模型*/
    
  • BFC(边距重叠解决方案)

BFC的基本概念?

BFC(Block Formatting Context ):块级格式化上下文
IFC(CSS2.1):Inline Formating Contexts,内联元素格式化上下文  
GFC(CSS3):GridLayout Formating Contexts,网格布局格式化上下文  
FFC(CSS3):Flex Formatting Contexts,自适应格式化上下文

BFC原理/ BFC渲染规则?

1、BFC元素垂直方向的边距会发生重叠
2、BFC的区域不会与浮动元素的box重叠(可用于清除浮动)
3、BFC为一个独立的元素,外面的元素不会影响里面的元素,里面的元素也不会影响外面的元素。
4、计算BFC高度的时候,浮动元素也会参与计算。

如何创建BFC?

1、float值不为none,即为left, right
2、position的值不为static(默认值),relative,即为absolute,fixed
3、display为inline-block, flex, inline-flex, table-cell,table-caption
4、overflow不为visible,overflow为auto,hidden,scroll ;
5、使用fieldset元素(可以给表单元素设置环绕边框的html元素)

BFC的使用场景?

1、BFC垂直方向边距重叠
2、BFC不与float重叠
3、清除浮动:子元素是浮动元素的时候,把外层元素设置成BFC的时候,子元素的浮动元素也会参与到父级元素的高度计算上来。
  • css浮动

浮动元素引起的问题?

1、父元素的高度无法被撑开,影响与父元素同级的元素
2、与浮动元素同级的非浮动元素(内联元素)会跟随其后
3、若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示的结构

css清除浮动的方法?

1、使用空标签
给所有浮动标签后面添加一个空标签,定义CSS clear:both.
但是这种方法会增加一个无意义的标签。
2、设置父级元素为BFC元素
3、使用after伪元素清除浮动
这个方法只适用于非IE浏览器。该方法必须为需要清除浮动元素的伪对象中设置height:0,不然该元素会比实际元素高出若干像素。
#parent:after{
    content:".";
    height:0;
    visibility:hidden;
    display:block;
    clear:both;
}
  • css经典布局

三栏布局:左右各300px,中间自适应?

  1. 浮动float
<style>
   html * {
     padding:0;
     margin:0;
   }
   .layout{
     margin-top:20px;
   }
   .layout article div{
     min-height:100px;
   }
 </style>
</head>
<body>
<!--浮动解决方案-->
<section class="layout float">
 <style media="screen">
   .layout.float .left{
     float:left;
     width:300px;
     background:red;
   }
   .layout.float .right{
     float:right;
     width:300px;
     background:blue;
   }
   .layout.float .center{ /*块元素自动撑开*/
     background:yellow;
   }
 </style>
 <article class="left-right-center">
   <div class="left"></div>
   <div class="right"></div>
   <div class="center">
     <h1>浮动解决方案</h1>
     1.这是三蓝布局中间部分
     2.这是三蓝布局中间部分
   </div>
 </article>
</section>
  1. 绝对定位position:absolute
<!--绝对定位解决方案-->
<section class="layout absolute">
  <style>
    .layout.absolute .left-center-right>div{
      position:absolute;
    }
    .layout.absolute .left{
      left:0;
      width:300px;
      background:red;
    }
    .layout.absolute .center{
      left:300px;
      right:300px;
      background:yellow;
    }
    .layout.absolute .right{
      right:0;
      width:300px;
      background:blue;
    }
  </style>
  <article class="left-center-right">
    <div class="left"></div>
    <div class="center">
      <h2>绝对定位解决方案</h2>
      1.这是三蓝布局中间部分
      2.这是三蓝布局中间部分
    </div>
    <div class="right"></div>
  </article>
</section>
  1. flex布局
<!--flexbox解决方案-->
<section class="layout flexbox">
 <style>
   .layout.flexbox{
     margin-top:140px;
   }
   .layout.flexbox .left-center-right{
     display:flex;
   }
   .layout.flexbox .left{
     width:300px;
     background:red;
   }
   .layout.flexbox .center{
     flex:1; /*中间自适应原理*/
     background:yellow;
   }
   .layout.flexbox .right{
     width:300px;
     background:blue;
   }
 </style>
 <article class="left-center-right">
   <div class="left"></div>
   <div class="center">
     <h2>flexbox解决方案</h2>
     1.这是三蓝布局中间部分
     2.这是三蓝布局中间部分
   </div>
   <div class="right"></div>
 </article>
</section>
  1. 表格布局table-cell
<!--表格布局解决方案-->
<section class="layout table">
  <style>
    .layout.table .left-center-right{
      width:100%;
      display:table;
      height:100px;
    }
    .layout.table .left-center-right>div{
      display:table-cell;
    }
    .layout.table .left{
      width:300px;
      background:red;
    }
    .layout.table .center{
      background:yellow;
    }
    .layout.table .right{
      width:300px;
      background:blue;
    }
  </style>
  <article class="left-center-right">
    <div class="left"></div>
    <div class="center">
      <h2>表格布局解决方案</h2>
      1.这是三蓝布局中间部分
      2.这是三蓝布局中间部分
    </div>
    <div class="right"></div>
  </article>
  </article>
</section>
  1. 网格布局grid
<!--网格布局解决方案-->
<section class="layout grid">
  <style media="screen">
    .layout.grid .left-center-right{
      display:grid;
      width:100%;
      grid-template-rows:100px;
      grid-template-columns:300px auto 300px;
    }
    .layout.grid .left{
      background:red;
    }
    .layout.grid .center{
      background:yellow;
    }
    .layout.grid .right{
      background:blue;
    }
  </style>
  <article class="left-center-right">
    <div class="left"></div>
    <div class="center">
      <h2>网格布局解决方案</h2>
      1.这是三蓝布局中间部分
      2.这是三蓝布局中间部分
    </div>
    <div class="right"></div>
  </article>
</section>
  1. 延伸
    这5种方案的优缺点
    ①浮动:清除浮动,兼容性比较好。
    ②绝对定位:快捷,布局已经脱离了文档流,导致下面的元素也要脱离文档流,使用性较差。
    ③flex布局,解决了浮动和绝对定位的缺点,移动端基本已经支持了兼容性。
    ④表格布局:表格布局的兼容性非常好
    ⑤网格布局:新出的
    如果“高度已知”去掉,中间内容高度撑开了,需要左右的高度也自动撑开,哪些方案仍适合
    ①flex、table能用
    ②flex左边有遮挡,所以显示在右边,没有遮挡的时候,就会显示在最左边。创建bfc
  2. 三栏布局
    ①左右宽度固定,中间自适应
    ②上下高度固定,中间自适应。
  3. 两栏布局
    ①左宽度固定,右自适应
    ②右宽度固定,左自适应
    ③上高度固定,下自适应
    ④下高度固定,上自适应

圣杯布局?

  1. 圣杯布局的核心是左、中、右三栏都通过float进行浮动,然后通过负值margin进行调整。
  2. .left, .right的margin-left是为了让.main .left .right在同一行。
  3. .container的padding-left,padding-right,.left的position和left,right的position和left是为了防止文字被遮挡。
<style>
    .main{
      float:left;
      width:100%;
    }
    .content{
      height:200px;
      margin-left:100px;
      margin-right:200px;
      background-color:green;
    }
    .main::after{
      display:block;
      content: '';
      font-size: 0;
      height:0;
      clear: both;
      zoom:1;
    }
    .left{
      float:left;
      width:100px;
      height:200px;
      margin-left:-100%; /*左栏移到第一行的首部*/
      background-color:red;
    }
    .right{
      float:left;
      width:200px;
      height:200px;
      margin-left:-200px; /*右栏移到和左中一行*/
      background-color:yellow;
    }
  </style>
</head>
<body>
  <div class="main">
    <div class="content"></div>
  </div>
  <div class="left"></div>
  <div class="right"></div>
  • css兼容

经常遇到的css兼容性的问题在哪些?如何解决的?

本都是ie8及以前的版本会遇到css兼容问题。一般是图片透明、圆角、字体大小,新出的css3样式。
aSuncat:如此老旧浏览器终究会被市场放弃,不花时间在这上面。
  • css hack

什么是CSS hack?

针对不同的浏览器或浏览器不同版本写相应的CSS的过程,就是CSS hack

CSS hack分类?
3种:条件hack、属性级hack、选择符hack。

// 1、条件hack
<!--[if IE]>
<style>
	.test{color:red;}
</style>
<![endif]-->
// 2、属性hack(类内部hack)
.test{
	color:#090\9; /*For IE8*/
	*color:#f00; /*For IE7 and earlier*/
	_color:#ff0; /*For IE6 and earlier*/
}
// 3、选择符hack(选择器属性前缀法)
* htm .test{color:#0f90;} /*For IE6 and earlier*/
* + html .test{color:#ff0;} /*For IE7*/

CSS hack书写顺序?

CSS hack书写顺序,一般是将适用范围广、被识别能力强的CSS定义在前面。
  • html、css基础

link和@import的区别?

1、从属关系区别:
link属于html标签,而@import是css提供的。
2、加载顺序区别:
页面被加载时,link会同时被加载,而@import引用的css会等到页面被加载完再加载。
3、兼容性区别:
import只在IE5以上才能识别,而link是html标签,无兼容问题。
4、dom可操作性区别:
可以通过JS 操作 DOM ,插入link标签来改变样式;由于 DOM 方法是基于文档的,无法使用@import的方式插入样式
5、权重区别:
如果已经存在相同样式,@import引入的这个样式将被该 CSS 文件本身的样式层叠掉,表现出link方式的样式权重高于@import的权重这样的直观效果。
(aSuncat:简而言之,link和@import,谁写在后面,谁的样式就被应用,后面的样式覆盖前面的样式。)

如何理解标签语义,它有哪些好处?

1、语义元素清楚地向浏览器和开发者描述其意义。
2、好处:
(1)html结构清晰,代码可读性较好。
(2)有利于SEO,搜索引擎根据标签来确定上下文和各个关键字的权重。
(3)无障碍阅读,样式丢失的时候能让页面呈现清晰的结构。
(4)方便其他设备解析,如盲人阅读器根据语义渲染网页
(5)便于团队维护和开发,语义化更具可读性,代码更好维护,与CSS3关系更和谐。

css的选择符有哪些,优先级如何计算,哪些属性可以继承?

  1. css选择符类型
1、通用选择器:*
2、类别选择器:.class
3、id选择器:#id
4、标签选择器:p
5、后代选择器:div p
6、子选择器:div > p
7、群组选择器:div , p
8、相邻同胞选择器:div +p
9、伪类选择器::link :visited :active :hover :focus :first-child
10、伪元素选择器::first-letter :first-line:before :after :lang(language)
11、属性选择器:[attribute] [attribute=value] [attribute~=value] [attribute|=value]
  1. 优先级计算
!important > 内联样式 > id > class > tag
3、属性继承
(1)所有元素可继承:visibility、cursor
(2)块级元素可继承:text-indent、text-align
(3)内联元素可继承:
①字体系列属性:font、font-family、font-size、font-style、font-variant、font-weight、font-stretch、font-size-adjust
②除text-indent、text-align之外的文本系列属性:
letter-spacing、word-spacing、white-space、line-height、color、text-transform、direction

扩展:
一、不可继承的样式属性:
1、display
2、文本属性:vertical-align、text-decoration、text-shadow、unicode-bidi
3、盒子模型属性:border、padding、margin、width、height
4、背景属性:background
5、定位属性:float、clear、position
6、生成内容属性:content
7、轮廓样式属性:outlien-style
8、页面样式属性:size
9、声音样式属性:pause-before

行内元素和块级元素举几个例子?

行内元素:span,a,var ,em,input,img,img,textarea,var,em,strong,select,lable
块级标签:div,p,h1-h3,ul,ol,dl,li,dd,dt,table,td,tr

伪类和伪元素?

伪类::active :focus :hover :link :visited :first-child
伪元素::before :after :first-letter :first-line

svg和canvas的区别?

1、canvas时h5提供的新的绘图方法 ;svg已经有了十多年的历史
2、canvas画图基于像素点,是位图,如果进行放大或缩小会失真 ;svg基于图形,用html标签描绘形状,放大缩小不会失真
3、canvas需要在js中绘制 ;svg在html绘制
4、canvas支持颜色比svg多
5、canvas无法对已经绘制的图像进行修改、操作 ;svg可以获取到标签进行操作

flex实现原理?

1、容器上有主轴和纵轴的概念,默认主轴(main-axis)是横向,从左到右,纵轴是竖向,从上到下。
2、其中所有的孩子的布局都会受到这两个轴的影响。
3、有很多相关的css属性就是通过改变主轴和纵轴的方向来实现不同的布局效果的。

src与href的区别?

1、href 是指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,用于超链接。
2、src是指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;在请求src资源时会将其指向的资源下载并应用到文档内,例如js脚本,img图片和frame等元素。当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等元素也如此,类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

收集不易,如果你对这篇文章感兴趣,就点个赞和关注吧