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

红太狼 2023-07-05 10:17 33阅读 0赞

第一天先更新html/css,还有后续JavaScript、vue、es6会持续更新

(看前先点赞，养成好习惯哈哈哈 )

css盒模型、BFC、css浮动、css经典布局、css兼容、css hack、html/ css基础

*  ### 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;  /*设置标准盒子*/ 前端学习裙：950.919.261
    
         
    
    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浮动 ###

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

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布局

<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是为了防止文字被遮挡。

*  ### css兼容 ###

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

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

*  ### css hack ###

什么是CSS hack？

针对不同的浏览器或浏览器不同版本写相应的CSS的过程，就是CSS hack
    复制代码

CSS hack分类？

3种：条件hack、属性级hack、选择符hack。

// 1、条件hack

// 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脚本放在底部而不是头部。