2021面试题html、css

controZL
217 阅读5分钟

盒模型

盒模型就是把元素用一个矩形盒子表示，包括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}

实现水平垂直居中

利用transform

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

利用负margin

.box{
    position:absolute;
    width:100px;
    height:100px;
    left:50%;
    top:50%;
    margin-left:-5opx;
    margin-top:-50px;
  }

flex布局

.box-wrap{
    display:flex;
    justtify-content:center;
    align-item: center;
  }

自适应布局

//左边左浮动，右边加个overflow:hidden;
 .left{width:200px;background:red;float:left;}
 .right{background:blue;overflow:hidden;}


//左边左浮动，右边加个margin-left;
.left{width:200px;background:red;float:left;}
.right{background:blue;margin-left:200px}

//左边绝对定位，右边加个margin-left;
.left{width:200px;background:red;position:absolute;}
.right{background:blue;margin-left:200px}

//左右两边绝对定位，右边加个width,top,left,right
.left{width: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新特性

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

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

  • 视频和音频标签

  • Canvas绘图

  • Svg绘图

  • 地理定位

  • 拖放API

  • webWorker

  • webStoreage localStorage、sessionStorage

  • 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

css 实现 checkbox\radio 的样式文字切换

<input type="checkbox" id="mycheck" />
<lable for="mycheck">check me</label>
input[type="checkbox"] + label::before {}
input[type="checkbox"]:checked + label::before {}
avatar
文章
阅读
粉丝