前端面试笔试复习（2）

CSS复习

1.盒模型

本文章将会从以下几个方面谈盒模型。

基本概念：标准模型和IE模型
CSS如何设置这两种模型
JS如何设置获取盒模型对应的宽和高
实例题（根据盒模型解释边距重叠）
BFC（边距重叠解决方案）

1、基本概念

盒模型是有两种标准的，一个是标准模型，一个是IE模型。
在这里插入图片描述

从上面两图不难看出在标准模型中，盒模型的宽高只是内容（content）的宽高，
而在IE模型中盒模型的宽高是内容(content)+填充(padding)+边框(border)的总宽高。

2、css如何设置两种模型

这里用到了CSS3 的属性 box-sizing

/* 标准模型 */
box-sizing:content-box;

 /*IE模型*/
box-sizing:border-box;

3、JS获取宽高

dom.offsetWidth/offsetHeight（最常用的，也是兼容最好的。）

4、边距重叠

什么是边距重叠

如下图，父元素没有设置margin-top，而子元素设置了margin-top：20px;可以看出，父元素也一起有了边距。
在这里插入图片描述

5、边距重叠解决方案(BFC)

首先要明确BFC是什么意思，其全英文拼写为 Block Formatting Context 直译为“块级格式化上下文”

BFC的原理

内部的box会在垂直方向，一个接一个的放置
每个元素的margin box的左边，与包含块border box的左边相接触（对于从左往右的格式化，否则相反）
box垂直方向的距离由margin决定，属于同一个bfc的两个相邻box的margin会发生重叠
bfc的区域不会与浮动区域的box重叠
bfc是一个页面上的独立的容器，外面的元素不会影响bfc里的元素，反过来，里面的也不会影响外面的
计算bfc高度的时候，浮动元素也会参与计算

怎么创建bfc

float属性不为none（脱离文档流）
position为absolute或fixed
display为inline-block,table-cell,table-caption,flex,inine-flex
overflow不为visible
根元素

应用场景

自适应两栏布局
清除内部浮动
防止垂直margin重叠（添加一个父元素，在父元素上创建bfc）

总结

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

BFC内部的元素和外部的元素绝对不会互相影响，因此，当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠（即自适应两栏布局）。同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度（清除内部浮动）。避免margin重叠也是这样的一个道理。

5、css reset 和 normalize.css 有什么区别？

reset 重置，之前的样式不要，强行使元素具有相同的视觉效果。
normalize 让所有浏览器的标签都跟标准规定的默认样式一致，各浏览器上的标签默认样式基本统一。保护了有价值的默认值，也修复了浏览器上的一些bug，如包含了HTML5元素的显示设置、预格式化文字的font-size问题、在IE9中SVG的溢出。

6、CSS居中？

一、水平居中：

内联元素：在父元素身上写 text-align:center;
块级元素：margin-left: auto; margin-right: auto;

1.内联元素(inline)：
a – 锚点
abbr – 缩写
b – 粗体(不推荐)
big – 大字体
br – 换行
cite – 引用
code – 计算机代码(在引用源码的时候需要)
em – 强调
font – 字体设定(不推荐)
i – 斜体
img – 图片
input – 输入框
kbd – 定义键盘文本
label – 表格标签
q – 短引用
span –常用内联容器，定义文本内区块
strong – 粗体强调
textarea – 多行文本输入框

2.块级元素(block)：
address – 地址
blockquote – 块引用
dir – 目录列表
div – 常用块级容易，也是CSS layout的主要标签
dl – 定义列表
fieldset – form控制组
form – 交互表单
h1 – h6 标题
hr – 水平分隔线
menu – 菜单列表
ol – 有序表单
p – 段落
pre – 格式化文本
table – 表格
ul – 无序列表
li

3.内联元素与块级元素的区别
内联元素： 1、内联元素(inline)不会独占一行，相邻的内联元素会排在同一行。其宽度随内容的变化而变化。
2、内联元素不可以设置宽高
3、内联元素可以设置margin，padding，但只在水平方向有效。

块状元素：
1、块级元素会独占一行，默认情况下宽度自动填满其父元素宽度
2、块级元素可以设置宽高
3、块级元素可以设置margin，padding

二、垂直居中：

table自带功能
 100% 高度的 afrer before 加上 inline block
div 装成 table
margin-top -50%
translate -50%
absolute margin auto
flex

7、CSS选择器有哪些，优先级如何确定？

选择器种类：
1）基本选择器：元素选择器 span{…}、Id选择器 #div1{…}、类选择器 .div2{…}
2）属性选择器：基本选择器[属性 = ‘属性值’]{ } input[type = ‘text’]{background-color: red}
3）伪类选择器：a:link{color:green ;font-size:50px}
4）层级选择器：#d1.dd2span{color:red}

优先级：

选择器越具体，优先级越高。 #xxx 大于 .yyy
同样优先级，写在后面的覆盖前面的。
color: red !important; 优先级最高。

8、如何清除浮动？

overflow: hidden
.clearfix 清除浮动写在父元素身上

.clearfix::after{
 content: '';
 display: block;
 clear:both; 
} 
   //另外如果考虑兼容再加上
.clearfix{ zoom: 1; /* IE 兼容 */ }

9、CSS怎样实现浏览器最小字体，比如10px?

谷歌浏览器默认字体为16px，默认最小字体为12px，如果设置font-size小于12px，浏览器仍会只显示12px；

可用 transform：scale(0.625)，缩小整个元素，用以达到视觉效果

10、CSS3新增了哪些特性，说出你所知道的？介绍一下CSS3动画。

CSS3 属性(一)之圆角、阴影、透明

1.圆角

.box { 
     /* 直接定义圆角的半径就可以了 */ 
    border-radius: 1em; 
}

但是这方法还没有得到很好的支持,当前Firefox和Safari(同一个核心的Chrome也可以)支持,若要得到IE和Opera的支持，需要使用前缀

.box { 
    -moz-border-radius: 1em; 
    -webkit-border-radius: 1em; 
    border-radius: 1em; 
}

2.阴影

CSS3的box-shadow属性可以直接实现阴影：

.div {
    box-shadow: 2px 2px 10px #909090;//h-shadow v-shadow blur color
}

box-shadow有5个属性box-shadow: h-shadow v-shadow blur spread color inset;
在这里插入图片描述
如果要支持其它浏览器：

.div{
	filter:progid:DXImageTransform.Microsoft.Shadow(color=#909090,direction=120,strength=4);/*ie*/
    -moz-box-shadow: 2px 2px 10px #909090;/*firefox*/
    -webkit-box-shadow: 2px 2px 10px #909090;/*safari或chrome*/
    box-shadow:2px 2px 10px #909090;/*opera或ie9*/
}

3.透明

CSS本来就是支持透明的,IE以外的浏览器是opacity属性,IE是filter:alpha.但是,这个透明度有个缺点,就是它会使应用元素的内容也会继承它,比如有一个DIV,

<div style="opacity:0.8;filter:alpha(opacity=80); font-weight: bold;">> 
   内容 
</div>

如果像上面这样DIV的背景是透明了,但是内容两个字也透明了,这时可以用RGBa。

.alert { 
    rgba(0,0,0,0.8); 
}

这个属性前3个属性表示颜色红,绿,蓝,第四个是透明度.红绿蓝都是0代表黑色,所以rgba(0,0,0,0.8)就是将黑色的透明度设置为0.8。

CSS3 属性(二)之 2D转换、过渡、动画

1、transform
定义：变化，包括旋转、移动、缩放、倾斜
属性：rotate（旋转），translate（转换），scale（缩放），skew（倾斜旋转），translate3d（3d转换），perspective（透视视图）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .wrapper{
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .content{
            width: 100px;
            height: 100px;
            background: red;
            transition: all 2s ease;
        }
        .content:hover {
            transform: scale(2,2) rotate(720deg);
        }
    </style>
</head>
<body>
<div class="wrapper">
    <div class="content">你好</div>
</div>
</body>
</html>

2、transition
定义：过渡，一个元素从一种样式过渡到另一种样式
属性：transition-property,transition-duration,transition-timing-function,transition-delay

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .wrapper{
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .content{
            width: 100px;
            height: 100px;
            background: red;
            transition: width 2s ease-in-out 0s, height 2s linear 0s;
        }
        .content:hover {
            width: 300px;
            height: 300px;
        }
    </style>
</head>
<body>
<div class="wrapper">
    <div class="content"></div>
</div>
</body>
</html>

transition-timing-function属性

ease：减速
ease-in：先慢后快
ease-out：先快后慢
ease-in-out：先慢后快再慢
linear：匀速

transition和transform结合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .wrapper{
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .content{
            width: 100px;
            height: 100px;
            background: red;
            transition: all 2s ease;
        }
        .content:hover {
            transform: scale(2,2) rotate(720deg);
        }
    </style>
</head>
<body>
<div class="wrapper">
    <div class="content"></div>
</div>
</body>
</html>

3、animation
定义：动画
属性：animation-name，duration，timing-function，delay，iteration-count，direction

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .wrapper{
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .content{
            width: 100px;
            height: 100px;
            background: red;
            animation: myscale 2s linear 2;
        }
        @keyframes myscale {
            0% {
                width: 100px;
                height: 100px;
            }
            30% {
                width: 300px;
                height: 300px;
            }
            100% {
                width: 200px;
                height: 200px;
            }
        }
    </style>
</head>
<body>
<div class="wrapper">
    <div class="content"></div>
</div>
</body>
</html>

iteration-count
n：动画次数
infinite：无限次

direction
normal：正常
alternate：轮流反向

11、CSS布局方面，怎样实现左边宽度固定右边自适应的两列布局，如果换成三列，左右固定宽度，中间自适应怎样实现？你能想出几种方式？具体代码怎样写，请详细说明？

两栏布局

<html>
<head>
  <!DOCTYPE html>
<head>
    <title></title>
<style>
    body {
        width: 300px;
        height: 300px;
        /* position: relative; */
        border: 1px solid red;
    }
 
    .aside {
        width: 100px;
        height: 150px;
        float: left;
        background: #f66;
    }
 
    .main {
        height: 200px;
        background: #fcc;
        overflow: hidden;
    }
</style>
<body>
    <div class="aside"></div>
    <div class="main"></div>
</body>
</html>

三栏布局的五种方法：

1、浮动布局 + margin

最简单的三栏布局。但一定是先绘制左、右栏，最后绘制中间栏。

<!--浮动布局  -->
   
<!DOCTYPE html>
<html>
<head>
    <title></title>
    
    <style>
         body,html{
            height: 100%;
            padding:0;
            margin: 0;
        }
/* 左栏左浮动 */
    .left {
     float: left;
     width: 100px;
     height: 200px;
     background-color: red;
   }
/* 右栏右浮动 */
   .right {
     float: right;
     width: 100px;
     height: 200px;
     background-color: yellow;
   }
/* 中间栏自适应 */
   .main {
     background-color: green;
     height: 200px;
     margin-left: 120px;
     margin-right: 120px;
   }
  
   .container {
     border: 1px solid black;
   }

    </style>
</head>
<body>
      
   <div class="container">             
        <div class="left">
         	left
        </div>
    	<div class="right">
      		right
   		</div>
   		<div class="main">
         	center
   		</div>
  </div>    
</body>
</html>

优势：简单

劣势：中间部分最后加载，内容较多时影响体验

2、BFC布局

BFC不会和浮动元素重叠。所以如果将main元素设定为BFC元素即可

<!DOCTYPE html>
<html>
<head>
    <title></title>
    
    <style>
         body,html{
            height: 100%;
            padding:0;
            margin: 0;
        }
/* 左栏左浮动 */
    .left {
     float: left;
     width: 100px;
     height: 200px;
     background-color: red;
   }
/* 右栏右浮动 */
   .right {
     float: right;
     width: 100px;
     height: 200px;
     background-color: yellow;
   }
/* 中间栏自适应 */
   .main {
     background-color: green;
     height: 200px;
     overflow: hidden;
   }
  
   .container {
     border: 1px solid black;
   }

    </style>
</head>
<body>
      
                <div class="container">             
                    <div class="left">
                        left
                    </div>
                    <div class="right">
                        right
                    </div>
                    <div class="main">
                            center
                        </div>
                </div>    
</body>
</html>

3、圣杯布局

html代码中 middle部分首先要放在container的最前部分。然后是left,right。

<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">

<title>圣杯布局</title>
<style type="text/css">
    *{margin: 0;padding: 0;}
    body{min-width: 700px;}
    
    .left,
    .middle,
    .right{ 
        position: relative;
        float: left;
        min-height: 130px;
    }
    .container{
        padding:0 220px 0 200px;
        overflow: hidden;
    }
    .left{
        margin-left: -100%;
        left: -200px;
        width: 200px;
        background: red;
    }
    .right{
        margin-left: -220px;
        right: -220px;
        width: 220px;
        background: green;
    }
    .middle{ 
        width: 100%;
        background: blue;
        word-break: break-all;

    }
   
</style>
</head>
<body>

<div class="container">
    <div class="middle">
        <h4>middle</h4>
        <p>HHHHHHHHHHHHHHHHHHHHHH
        hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
        HHHHHHHHHHHHHHHHHHHHHH
        hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
        </p>
    </div>
    <div class="left">
    <h4>left</h4>
        <p>oooooooooooooo
        00000000000000000
        ooooooooooooooo
        ooooooooooooooo
        000000000000000</p>
    </div>
    <div class="right">
    <h4>right</h4>
        <p>BBBBBBBBBBBBBB
        BBBBBBBBBBBBBBBBBB
        88888888888888888888</p>
    </div>
    </div>
   
</body>
</html>

有几点需要注意一下：

1.将三者都 float:left , 再加上一个position:relative (因为相对定位后面会用到）

2.middle部分 width:100%占满

3.此时middle占满了，所以要把left拉到最左边，使用margin-left:-100%

4.这时left拉回来了，但会覆盖middle内容的左端，要把middle内容拉出来，所以在外围container加上 padding:0 220px 0 200px

5.middle内容拉回来了，但left也跟着过来了，所以要还原，就对left使用相对定位 left:-200px 同理，right也要相对定位还原 right:-220px

6.到这里大概就自适应好了。如果想container高度保持一致可以给left middle right都加上min-height:130px

对比圣杯布局和双飞翼布局：

（1）都是左右栏定宽，中间栏自适应的三栏布局，中间栏都放到文档流前面，保证先行渲染。

（2）解决方案基本相似：都是三栏全部设置左浮动float：left,然后分别结局中间栏内容被覆盖的问题。

（3）解决中间栏内容被覆盖问题时，圣杯布局设置父元素的padding,双飞翼布局在中间栏嵌套一个div,内容放到新的div中，并设置margin，实际上，双飞翼布局就是圣杯布局的改进方案。

4、flex 布局

flex布局是趋势，利用flex实现三栏布局也很简单，不过需要注意浏览器兼容性：

<!DOCTYPE html>
<html>
<head>
    
    <title></title>
    
<style type="text/css">
        .container {
            display: flex;
            flex-direction: row;
        }
        .main {
            height: 200px;
            background-color: red;
            flex-grow: 1;
        }
 
        .left {
            height: 200px;
            order: -1;
            margin-right: 20px;
            background-color: yellow;
            flex: 0 1 200px;
        }
 
        .right {
            height: 200px;
            margin-left: 20px;
            background-color: green;
            flex: 0 1 200px;
        }
    </style>
</head>
<body>
      
    <div class="container">    
        <div class="main">
                center
        </div>         
        <div class="left">
            left
        </div>
        <div class="right">
            right
        </div>
    </div>    
</body>
</html>

有几点需要注意一下：

main要首先加载就必须写在第一位，但因为left需要显示在最左侧，所以需要设置left的order为-1
flex属性的完整写法是：flex: flex-grow flex-shrink flex-basis 。这也是flex实现三栏布局的核心，main设置flex-grow为1，说明多余空间全部给main，而空间不够时，仅缩小left right部分，同时因为指定了left right部分的flex-basis，所以指定了两者的宽度，保证其显示效果

5、绝对定位 + margin

绝对定位的方式和float布局比较像，但可以优先加载主体：

 <!DOCTYPE html>
 <html>
 <head>
     
     <title></title>
     
 <style type="text/css">
    
     .container {
   margin: 20px auto;
   padding: 20px;
   min-width: 600px;
   min-height: 400px;
   background: #ccc;
   /*设置外部父div定位，使得子div的绝对定位是相对于此div*/
   position: relative;
}

.left {
   width: 200px;
   height: 300px;
   position: absolute;
   top: 20px;
   left: 20px;
   background: #abc212;
}

.right {
   width: 160px;
   height: 200px;
   position: absolute;
   top: 20px;
   right: 20px;
   background: #212bbc;
}

.mid {
   margin: 0 180px 0 220px;
   background: #b2bcbb;
   height:100px;
}
    </style>
 </head>
 <body>
       
        <div class="container">
                <div class="mid">mid</div>
                <div class="left">left</div>                
                <div class="right">right</div>
             </div>
 </body>
 </html>

6、table 布局

高度由内容决定。

 <!DOCTYPE html>
 <html>
 <head>
     
     <title></title>
     
 <style type="text/css">
    
    .container{
            display: table;
            width:100%;
        }
        .container>div{
            display: table-cell;
        }
        .left{
            width: 100px;
            background: red;
        }
        .main{
            background: blue;
        }
        .right{
            width: 200px;
            background: red;
        }
    </style>
 </head>
 <body>
       
        <div class="container">
                <div class="left">left</div>
                <div class="main">center</div>
                <div class="right">right</div>
            </div>
 </body>
 </html>

7、Grid 网格布局

<!DOCTYPE html>
 <html>
 <head>
     
     <title></title>
     
 <style type="text/css">
    
    .container{
            display: grid;
            width: 100%;
            grid-template-rows: 100px;  /*设置行高*/
            grid-template-columns: 100px auto 200px;  /*设置列数属性*/
        }
        .left{
            background: red;
        }
        .main{
            background: blue;
        }
        .right{
            background:red;
        }
    </style>
 </head>
 <body>
       
        <div class="container">
                <div class="left">left</div>
                <div class="main">center</div>
                <div class="right">right</div>
            </div>
 </body>
 </html>

打野蔡文姬

发布了4 篇原创文章 · 获赞 0 · 访问量 120

私信关注