前端 HTML&CSS 常见面试题

最新推荐文章于 2024-05-09 09:09:46 发布

叽里~咕噜

最新推荐文章于 2024-05-09 09:09:46 发布

阅读量201

点赞数 1

文章标签： css html html5 css3

本文链接：https://blog.csdn.net/chenghao1111/article/details/120187403

版权

五．如何让一个元素在父元素中上下左右居中？

六.Flex布局

七．行内元素有哪些？块级元素有哪些？空(void)元素有那些？

一．什么是盒子模型

盒模型其实就是浏览器把⼀个个标签都看⼀个矩形盒⼦，那每个盒⼦都会有内容

，边框，还有盒子之间的内外边距

盒子模型分为怪异盒子模型和标准盒子模型

标准盒子模型:是content+panding+border+margin 组成的

怪异盒子模型:是 content+border+padding 组成的

标准和怪异模型的转换

box-sizing:content-box; 将采用标准模式的盒子模型标准
box-sizing:border-box; 将采用怪异模式的盒子模型标准
box-sizing:inherit; 规定应从父元素继承 box-sizing 属性的值。

二．什么是BFC？

BFC就是“块级格式化上下文”的意思，BFC是一块独立的布局环境，保护其中内部元素不收外部影响，也不影响外部。本身BFC是一种css的布局方式，只是我们可以利用它来解决外边距折叠的问题

利用BFC的这一个原理就可以实现两栏布局，左边定宽，右边自适应。

触发BFC的方法

overflow: auto/ hidden;
position: absolute/ fixed;
float: left/ right;
display: inline-block/ table-cell/ table-caption/ flex/ inline-flex

BFC的原理？

BFC内部的盒子，会在垂直方向，一个接一个地放置。垂直方向上也会发生边距重叠。
BFC就是页面上的一个独立容器，容器里面的子元素不会影响到外面的元素，外边的也不会影响里边的。
BFC的区域不会与float重叠。
计算BFC的高度时，浮动元素也被计算在内。

BFC的应用

1. 可以用来自适应布局

利用BFC的这一个原理就可以实现两栏布局，左边定宽，右边自适应。不会相互影响，哪怕高度不相等。

<!-- BFC不与float重叠 -->
<section id="layout">
        <style media="screen">
          #layout{
            background: red;
            height: 200px;
          }
          #layout .left{
            float: left;
            width: 100px;
            height: 80px;
            background: blue;
          }
          #layout .right{
            height: 100px;
            background:green;
            overflow: hidden;
          }
        </style>
        <div class="left">left</div>
        <div class="right">right</div>
    </section>

2. 可以清除浮动：

<!-- BFC子元素即使是float也会参与计算 -->
      <style>
        #out{
          background: red;
          border: 1px solid black;
          overflow: hidden;
        }
        #inner{
          float: left;
           width: 200px;
           height: 200px;
           background-color: blue;
        }
      </style>
    <div id="out">
        <div id="inner">我是浮动元素</div>
    </div>

三.清除浮动常用的方法

清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题

额外标签法： 给谁清除浮动，就在其后额外添加一个空白标签，设置clear:both;即可

<div class="fahter">
        <div class="big">big</div>
        <div class="small">small</div>
        <div class="clear">额外标签法</div>
</div>

.clear{
        clear:both;
    }

2.父级添加overflow方法：可以通过触发BFC的方式，实现清楚浮动效果。必须定义width，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度

.fahter{
    width: 400px;
    border: 1px solid deeppink;
    overflow: hidden;
}

3.使用after伪元素清除浮动： :after方式为空元素的升级版，好处是不用单独加标签了。IE8以上和非IE浏览器才支持:after，

.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
    }
    .clearfix{
        *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
    }
 
<body>
    <div class="father clearfix">
        <div class="big">big</div>
        <div class="small">small</div>
        <!--<div class="clear">额外标签法</div>-->
    </div>
    <div class="footer"></div>
</body>

4.使用before和after双伪元素清除浮动

<style>
            .father{
                border: 1px solid black;
                *zoom: 1;
            }
            .clearfix:after,.clearfix:before{
                   content: "";
                   display: block;
                   clear: both;
               }
               .big ,.small{
                width: 200px;
                height: 200px;
                float: left;
               }
               .big{
                background-color: red;
               }
               .small{
                background-color: blue;
               }
        </style>
   <div class="father clearfix">
        <div class="big">big</div>
        <div class="small">small</div>
   </div>
    <div class="footer"></div>

</div>

四.postiton定位属性值有几个

position: relative：relative(相对定位)是指给元素设置相对于原本位置的定位，元素并不脱离文档流，因此元素原本的位置会被保留，其他的元素位置不会受到影响。

position: absolute：absolute(绝对定位)是指给元素设置绝对的定位

position: fixed：可以简单说fixed是特殊版的absolute，fixed元素总是相对于body定位的。

Inherit：继承父元素的position属性，但需要注意的是IE8以及往前的版本都不支持inherit属性。

sticky (吸顶效果)：position属性中最有意思的就是sticky了，设置了sticky的元素，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是top、left等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .top,
      .foot {
        width: 100%;
        height: 200px;
        background: red;
        border: 1px solid black;
      }
      .sticky {
        width: 100%;
        height: 100px;
        position: sticky;
        top: 0;
        background-color: green;
      }
    </style>
  </head>
  <body>
    <div class="top"></div>
    <div class="top"></div>
    <div class="top"></div>
    <div class="sticky"></div>
    <div class="foot"></div>
    <div class="foot"></div>
    <div class="foot"></div>
    <div class="foot"></div>
    <div class="foot"></div>
  </body>
</html>

五．如何让一个元素在父元素中上下左右居中？

方法一：父相自绝后，子分部向左向上移动本身宽度和高度的一半（也可以用 transform:translate(-50%,-50%)

  <div id="box">
        <div id="x"></div>
  </div>

 #box{
         width: 400px;
         height: 400px;
         background: red;
         position: relative;
     }
     #x{
         width: 200px;
         height: 200px;
         background: yellow;
         position: absolute;
         left: 50%;
         top: 50%;
         margin-left: -100px;
         margin-top: -100px;
     }

方法二：父元素设置成弹性盒，子元素横向居中，纵向居中

  <div id="box">
        <div id="x"></div>
  </div>

 #box{
         width: 400px;
         height: 400px;
         background: red;
         display: flex;
         justify-content: center;
         align-items: center;
    
     }
     #x{
         width: 200px;
         height: 200px;
         background: yellow;
       
     }

方法三：父向子绝，子元素所有定位为0，margin设置auto自适应。

  <div id="box">
        <div id="x"></div>
  </div>

  #box{
         width: 400px;
         height: 400px;
         background: red;
         position: relative;
     }
     #x{
         width: 200px;
         height: 200px;
         background: yellow;
         position: absolute;
         left: 0;
         top: 0;
         right: 0;
         bottom: 0;
         margin: auto;
       
     }

六.Flex布局

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

Flex 布局，可以简便、完整、响应式地实现各种页面布局

以下6个属性设置在容器上

flex-direction 设置主轴方向
flex-wrap 设置是否换行
flex-flow 设置或检索弹性盒模型对象的子元素排列方式。
justify-content设置主轴上的对齐方式。
align-items 设置纵轴上的对齐方式。
align-content 设置多根轴线的对齐方式

七．行内元素有哪些？块级元素有哪些？空(void)元素有那些？

行内元素有：span a b i img input select strong
块级元素有：div p h1-h6 ul table form ul ol li dl dt dd…
空元素(没有内容)： <br> <hr> <img> <input> <link> <meta>

八.简述一下src与href的区别

src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；

href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。

九.link与@import区别

应用场景：

<head>
    <!-- link是标签，引入外部样式表 -->
    <link rel="stylesheet" href="./a.css">
    <style>
        /* @import 在css环境中 导入外部css */
        @import url('./b.css');
        .box{
          width: 100px;
          height: 100px;
          background: green;
        }
    </style>
</head>

区别：

link属于html标签。@import在css中使用表示导入外部样式表；

页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;

import只在IE5以上才能识别，而link是HTML标签，无兼容问题;

link方式的样式的权重高于@import的权重；

link 支持使用javascript改变样式（document.styleSheets），后者不可

十．css3新增特性和H5新增特性？

css3新特性

选择器

:last-child /* 选择元素最后一个孩子 */
:first-child /* 选择元素第一个孩子 */
:nth-child(1) /* 按照第几个孩子给它设置样式 */
:nth-child(even) /* 按照偶数 */
:nth-child(odd)  /* 按照奇数 */
:disabled /* 选择每个禁用的dom元素 */
:checked /* 选择每个被选中的dom元素 */
:not(selector) /* 选择非 selector 元素的每个元素 */
::selection /* 选择被用户选取的元素部分 */

背景和边框

背景：

background-size：规定背景图片的尺寸（cover：填充；100% 100%：拉伸）
background-origin：规定背景图片的定位区域对于 background-origin 属性，有如下属性背景图片可以放置于
content-box、padding-box 或 border-box 区域

边框：

border-radius：圆角
box-shadow / text-shadow：阴影
border-image：边框图片

文本效果
属性描述
text-shadow 向文本添加阴影
text-justify 规定当 text-align 设置为 “justify” 时所使用的对齐方法
text-emphasis 向元素的文本应用重点标记以及重点标记的前景色
text-outline 规定文本的轮廓
text-overflow 规定当文本溢出包含元素时发生的事情
text-wrap 规定文本的换行规则
word-break 规定非中日韩文本的换行规则
word-wrap 允许对长的不可分割的单词进行分割并换行到下一行
text-decoration 文本修饰符：overline、line-through、underline 分别是上划线、中划线、下划线

@font-face 自定义字体
渐变，CSS3新增了渐变效果，包括 linear-gradient(线性渐变)和 radial-gradient(径向渐变)

2D/3D 转换

变形transform

变形有rotate旋转、scale缩放、translate位移、skew倾斜

过渡transition

过渡transition是一个复合属性，可以同时定义transition-property、transition-duration、transition-timing-function、transition-delay子属性值

一般写在一起：

div
{
width:100px;
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */
}

动画animation

动画的使用，首先通过@（-webkit-)keyframes 定义动画名称及动画的行为，再通过animation属性设置动画特征相关值进行调用


.myClass {
	-webkit-animation-name: fadeIn;
	-moz-animation-name: fadeIn;
	-o-animation-name: fadeIn;
	-ms-animation-name: fadeIn;
	animation-name: fadeIn;  /* 不带前缀的放到最后 */
}
/* 复杂属性 keyframes */
@-webkit-keyframes fadeIn {
	0% { opacity: 0; } 100% { opacity: 0; }
}
@-moz-keyframes fadeIn {
	0% { opacity: 0; } 100% { opacity: 0; }
}
@-o-keyframes fadeIn {
	0% { opacity: 0; } 100% { opacity: 0; }
}
@-ms-keyframes fadeIn {
	0% { opacity: 0; } 100% { opacity: 0; }
}
/* 不带前缀的放到最后 */
@keyframes fadeIn {
	0% { opacity: 0; } 100% { opacity: 0; }
}

h5新增特性：

语义化标签：header、footer、section、nav、aside、article
增强型表单：input 的多个 type
新增表单属性：placehoder、required、min 和 max
音频视频：audio、video
canvas 画布
地理定位
拖拽
本地存储：
localStorage 没有时间限制的数据存储；
sessionStorage， session 的数据存储，当用户关闭浏览器窗口后，数据会被删除
新事件：onresize、ondrag、onscroll、onmousewheel、onerror、onplay、onpause
WebSocket：建立持久通信协议

十一．前端常见浏览器兼容性问题解决方案

渐进增强（progressive enhancement）：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验；

优雅降级（graceful degradation）：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

叽里~咕噜

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端 HTML&CSS 常见面试题

目录一．什么是盒子模型二．什么是BFC？三.清除浮动常用的方法四.postiton定位属性值有几个五．如何让一个元素在父元素中上下左右居中？六.Flex布局七．行内元素有哪些？块级元素有哪些？空(void)元素有那些？八.简述一下src与href的区别九.link与@import区别十...
复制链接

扫一扫