前端面试笔试复习(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的原理

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

怎么创建bfc

  1. float属性不为none(脱离文档流)
  2. position为absolute或fixed
  3. display为inline-block,table-cell,table-caption,flex,inine-flex
  4. overflow不为visible
  5. 根元素

应用场景

  • 自适应两栏布局
  • 清除内部浮动
  • 防止垂直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>
发布了10 篇原创文章 · 获赞 1 · 访问量 1120
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览