html和css面试题目-2021年前端面试题和答案(css篇)

清除浮动方式1、使用伪类。也可以在父级标签最后添加一个divhtml和css面试题目,div中的属性同伪类。原理其实和伪类是一样的,都是利用clear:both

.father :after { clear:both; content:""; display:block;}.father{ zoom:1;//IE专有属性,解决ie6、7浮动问题}复制代码2、父级标签触发BFC(下面有专门介绍)

.father { overflow:auto; zoom:1;//IE专有属性,解决ie6、7浮动问题}复制代码未知宽高的元素实现水平垂直居中方法一:父元素dispaly:table,子元素display:cell-table。优势:父元素可以动态改变高度。劣势:table属性容易造成多次reflow,IE8以下不支持

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>方法一</title></head><style>.parent1{ display: table; height:300px; width: 300px; background-color: #FD0C70;}.parent1 .child{ display: table-cell; vertical-align: middle; text-align: center; color: #fff; font-size: 16px;}</style><body> <div class="parent1"> <div class="child">hello world-1</div> </div></body></html>复制代码方法二:利用空元素或伪类下面代码中的注释部分为替代after伪类的另一种写法,原理一样优点:兼容性好缺点:多出来个空元素、麻烦

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>未知宽高元素水平垂直居中</title></head><style> .wrap { position: absolute; width: 100%; height: 100%; text-align: center; background: #92b922; } .test { background: #de3168; display: inline-block; color: #fff; padding: 20px; } .wrap:after { display: inline-block; content: ''; width: 0px; height: 100%; vertical-align: middle; } /* .vamb{ display: inline-block; width: 0px; height: 100%; vertical-align: middle; } */ </style> <div class="wrap"> <!– <b class="vamb"></b> –> <div class="test"> 水平垂直居中了吧<br> 两行文字哦 </div> </div></html>复制代码方法三:绝对定位+transform优点:方便,支持webkit内核缺点:transform兼容性差,IE9以下不支持

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>未知宽高元素水平垂直居中</title></head><style>.parent3{ position: relative; height:300px; width: 300px; background: #FD0C70;}.parent3 .child{ position: absolute; top: 50%; left: 50%; color: #fff; transform: translate(-50%, -50%);}</style><body><div class="parent3"> <div class="child">hello world</div> </div></body></html>复制代码方法4:flexbox布局优点:方便缺点:兼容性不好,IE支持很差

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>未知宽高元素水平垂直居中</title></head><style>.parent4{ display: flex; justify-content: center; align-items: center; width: 300px; height:300px; background: #FD0C70;}.parent4 .child{ color:#fff;}</style><body> <div class="parent4"> <div class="child">hello world</div> </div></body></html>复制代码BFCBFC(block formatting context)翻译为“块级格式化上下文”,它会生成一个独立的渲染区域(不影响外面的元素,同时也不受外面元素的影响),它的生成有以下规则:

内部的box会在垂直方向上一个接一个的放置内部box在垂直方向上的距离由margin决定,同属一个BFC内的相邻box会发生margin重叠每一个内部box的左边,与BFC的的左边相接触,即使存在浮动也是一样BFC的区域不会与float box发生重叠计算BFC的高度时,浮动元素也参与计算(上面清除浮动的问题就是这个原理)触发BFC的条件:

根元素float属性不为noneposition为absolute或者fixeddisplay为inline-block、table-cell、table-caption、flex、inline-flexoverflow不为visible前端精选文摘:BFC 神奇背后的原理这篇文章说的很清楚,也有相应的原理和例子,可以仔细看看。

实现自适应两列布局方法一:右边元素触发BFC<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>未知宽高元素水平垂直居中</title></head><style> .father { background-color: lightblue; } .left { float: left; width: 100px; height: 200px; background-color: red; } .right { overflow: auto; height: 500px; background-color: lightseagreen }</style><body> <div class="father"> <div class='left'>left</div> <div class='right'> right </div> </div></body></html>复制代码方法二:margin-left实现局限性:这种方法必须知道左侧的宽度。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>未知宽高元素水平垂直居中</title></head><style> .father { background-color: lightblue; } .left { width: 100px; float: left; background-color: red; } .right { margin-left: 100px; background-color: lightseagreen }</style><body> <div class="father"> <div class='left'>left</div> <div class='right'> right </div> </div></body></html>复制代码三列布局flex优点:方便 缺点:还是flex兼容性

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>未知宽高元素水平垂直居中</title></head><style> .father { display: flex; height: 100%; } .left, .right { flex: 0 1 100px; background-color: red; } .middle { flex: 1; height: 100%; background-color: green; }</style><body> <div class="father"> <div class='left'>left</div> <div class='middle'>middle</div> <div class='right'>center</div> </div></body></html>复制代码负margin布局(双飞翼)优点:市面上使用最多的一个缺点:麻烦,这是多年前淘宝的老技术了

<!DOCTYPE><html><head> <meta ="content-type" content="text/html; charset=utf-8" /> <title>圣杯布局/双飞翼布局</title> <style> .mainWrap { width: 100%; float: left; } .main { margin: 0 120px; } .left, .right { float: left; width: 100px; } .left { margin-left: -100%; } .right { margin-left: -100px; } </style></head><div class="parent" id="parent" style="background-color: lightgrey;"> <div class="mainWrap"> <div class="main" style="background-color: lightcoral;"> main </div> </div> <div class="left" style="background-color: orange;"> left </div> <div class="right" style="background-color: lightsalmon;"> right </div></div></html>复制代码列举HTML5新特性语意化标签(nav、aside、dialog、header、footer等)canvas拖放相关apiAudio、Video获取地理位置更好的input校验web存储(localStorage、sessionStorage)webWorkers(类似于多线程并发)webSocket列举Css3新特性选择器边框(border-image、border-radius、box-shadow)背景(background-clip、background-origin、background-size)渐变(linear-gradients、radial-gradents)字体(@font-face)转换、形变(transform)过度(transition)动画(animation)弹性盒模型(flex-box)媒体查询(@media)transition和animation的区别是什么?过渡属性transition可以在一定的事件内实现元素的状态过渡为最终状态,用于模拟一种过渡动画效果,但是功能有限,只能用于制作简单的动画效果;

动画属性animation可以制作类似Flash动画,通过关键帧控制动画的每一步,控制更为精确,从而可以制作更为复杂的动画。

文章转载自://juejin.cn/post/6844903605426716685

本文来自网络,不代表唯米智能立场,转载请注明出处。如有侵权请联系删除。http://www.weiseo.cc/b/3586.html

作者: 小易

上一篇
下一篇
联系我们

联系我们

在线咨询: QQ交谈

邮箱: 2013723@qq.com

工作时间:周一至周五,9:00-17:30,节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

返回顶部
在线客服系统