• 2020面试系列-css面试题


    盒模型

    盒模型就是把元素用一个矩形盒子表示,包括content,padding,border,margin,盒模型分为标准盒模型和IE盒模型

    标准盒模型:width = content

    IE盒模型:width = content+padding +border

    //标准盒模型
    box-sizing:content-box;
    //IE盒模型
    box-sizing:border-box;

    BFC

    BFC是一个特殊的块,块内部元素和外部不会互相影响

    形成BFC块的条件:

    • float属性不为none
    • overflow属性不为visible
    • position:absolute|fixed
    • display:inline-block;

    BFC的应用

    • 清除浮动,BFC在计算高度的时候,浮动元素也会计算进去
    • 解决margin重叠问题
    • 自适应布局,消除文字环绕,BFC不与浮动元素重叠

    清除浮动的方式

    • 创建BFC块,给父元素添加属性,overfow:hidden |  float:left .....
    • 浮动元素后面添加空div,并设置属性clear:both
    • 父元素添加伪类
    .clearfix:after{display:block;clear:both;content:'';visibility:hidden;height:0;}
    .clearfix{zoom:1}

    多元素浮动参差不齐

    利用clear属性,给最左一列元素增加属性clear:left

    .left{clear:left}

    利用display:inline-block

      //最外层容器font-size设置为0,目的是去除inline-block元素间默认间距;
        // 内层元素设置display:inline-block,同时重置font-size,并且设置vertical-align:top向上对齐
    .wrapper{font-size:0};
    .item{float:left;dispaly:inline-clock;verticle-align:top;font-size:12px}

    实现水平垂直居中

    .box{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}

    自适应布局

    //左边左浮动,右边加个overflow:hidden;
     .left{200px;background:red;float:left;}
     .right{background:blue;overflow:hidden;}
    
    
    //左边左浮动,右边加个margin-left;
    .left{200px;background:red;float:left;}
    .right{background:blue;margin-left:200px}
    
    
    //左边绝对定位,右边加个margin-left;
    .left{200px;background:red;position:absolute;}
    .right{background:blue;margin-left:200px}
    
    
    //左右两边绝对定位,右边加个width,top,left,right
    .left{200px;background:red;position:absolute;}
    .right{background:blue;position:absolute;left:200px;top:0;right:0;}

    弹性盒布局

    任何一个容器都可以指定为Flex布局,
    行内元素也可以使用Flex布局,
    Webkit内核的浏览器,必须加上-webkit前缀
    .box{
      display: -webkit-flex; /* Safari */
      display: flex;
    }
    注意,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。
    容器的属性
    flex-direction 决定主轴方向  row(默认水平) | row-reverse | column | column-reverse
    flex-wrap  决定如何换行  nowrap(默认不换行) | wrap | wrap-reverse(换行,第一行在下方)
    flex-flow   flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap
    justify-content  主轴对齐方式   flex-start(默认左对齐) | flex-end | center | space-between | space-around
    align-items 交叉轴对齐方式  flex-start | flex-end | center | baseline | stretch(默认沾满整个容器高度);
    align-content 定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用
    flex-item属性
    order  排序 ,越小越靠前,默认0
    flex-grow 放大比例,默认为0
    flex-shrink 缩小比例,默认为1
    flex-basis 占据的主轴空间
    flex 是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选
    align-self 覆盖agn-items属性 auto(默认继承align-item) | flex-start | flex-end | center | baseline | stretch

    H5新特性

    1.新增语义化标签 header、footer、section、nav、article、aside、time、main

    2.增强表单 新增input类型:number、tel、email、time、week、month、url、range 新增表单元素:datalist、progress、meter、keygen、output 新增表单属性:autofocus、required、placeholder、min/max、

    3.视频和音频标签 音频:

    <audio controls>    //controls属性提供添加播放、暂停和音量控件。
      <source src="horse.ogg" type="audio/ogg">
      <source src="horse.mp3" type="audio/mpeg">
    您的浏览器不支持 audio 元素。        //浏览器不支持时显示文字
    </audio>
    

    视频:

    <video width="320" height="240" controls>
      <source src="movie.mp4" type="video/mp4">
      <source src="movie.ogg" type="video/ogg">
    您的浏览器不支持Video标签。
    </video>
    

    4.Canvas绘图 canvas学习地址

    5.Svg绘图

    6.地理定位

    7.拖放API

    8.webWorker Web Worker的基本原理就是在当前javascript的主线程中,使用Worker类加载一个javascript文件来开辟一个新的线程,起到互不阻塞执行的效果,并且提供主线程和新县城之间数据交换的接口:postMessage、onmessage。

    9.webStoreage localStorage、sessionStorage

    10.webSoket WebSocket协议为web应用程序客户端和服务端之间提供了一种全双工通信机制。 特点: (1)握手阶段采用HTTP协议,默认端口是80和443 (2)建立在TCP协议基础之上,和http协议同属于应用层 (3)可以发送文本,也可以发送二进制数据。 (4)没有同源限制,客户端可以与任意服务器通信。 (5)协议标识符是ws(如果加密,为wss),如ws://localhost:8023

     

    CSS3新特性

    //边框
    
    border-radius
    box-shadow
    border-image不支持IE
    //背景
    
    background-size : width height/百分比/contain/cover
    background-origin: padding-box|border-box|content-box;//背景定位区域
    background-clip: border-box|padding-box|content-box;//背景裁剪区域
    //文本
    
    text-shadow: 5px 5px 5px #FF0000;
    word-wrap:break-word;长单词换行
    //字体
    
    @font-face
            {
            font-family: myFirstFont;
            src: url('Sansation_Light.ttf'),
                 url('Sansation_Light.eot'); /* IE9+ */
            }
    div
    {
    font-family:myFirstFont;
    }
    //2D转换
    
    Chrome 和 Safari 需要前缀 -webkit-。 Internet Explorer 9 需要前缀 -ms- 火狐加需要前缀-moz- 欧朋需要前缀-o-
    transform
    translate(x,y)x,y轴平移  translateX()、translateY()
    rotate(angle)正时针旋转
    scale(x,y)收缩 scaleX() scaleY()
    skew(x-angle,y-angle)倾斜角度
    //3D转换 transform
    
    Opera 不支持 3D 转换(它只支持 2D 转换)
    translate3d(x,y,z) 
    scale3d(x-angle,y-anlge,z-angle)
    rotate3d(x,y,z,angle)
    过渡(元素从一个状态到另一个状态的过程)
    
    Safari 需要前缀 -webkit-。
    trnasition-property过渡的属性名
    trnasition-duration过渡时间
    transition-timing-function过渡时间曲线
    transition-delay过渡延迟,默认0
    transition:all 1s linear 0;简写
    //动画
    
    //定义动画
    
    @keyframes name动画名称{
    from{属性} 为动画开始
    to{属性} 动画结束
    }
    @keyframes name动画名称{
    0%{}动画开始
    25%{} 
    50%{}
    75%{}
    100%{}动画结束
    }
    //引用动画
    
    animation:
    animation-name @keyframs规定的动画名称
    animation-duration 规定动画完成时间
    animation-timing-function动画速度曲线
    animation-delay 规定动画开始时间
    animation-iteration-count规定动画播放次数,默认1,infinite无限
    animation-direction规定动画是否在下一周期逆向播放,默认nomal  alternate逆向播放
    //简写
    animation:name 2s linear 2s infinite alternate
  • 相关阅读:
    C# 设计模式之简单工厂模式
    CentOS7下二进制文件安装MySQL5.6
    CentOS7下源码安装5.6.23
    CentOS7下yum方式安装mysql5.6
    关于网页图标使用与字体图标制作
    【canvas系列】canvas实现“ 简单的Amaziograph效果”--画对称图【强迫症福利】
    【canvas系列】canvas实现"雷达扫描"效果
    【canvas系列】用canvas实现一个colorpicker(类似PS的颜色选择器)
    如何在vue自定义组件中使用v-model
    webpack4 splitChunksPlugin && runtimeChunkPlugin 配置杂记
  • 原文地址:https://www.cnblogs.com/liuxiaoru/p/13622728.html
Copyright © 2020-2023  润新知