位置: IT常识 - 正文

最全面试题CSS(含答案)(css面试题及答案)

编辑:rootadmin
最全面试题CSS(含答案)

推荐整理分享最全面试题CSS(含答案)(css面试题及答案),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:css相关面试题,css面试基础知识,css3 面试题,css面试题2020,div css面试题,css面试题目,css面试题2020,css面试题2020,内容如对您有帮助,希望把文章链接给更多的朋友!

1、display:none; 和visibility:hidden;的区别是什么?

display:none; 彻底消失,释放空间。能引发页面的reflow回流(重排)。

visibility:hidden; 就是隐藏,但是位置没释放,好比opacity:0; 不引发页面回流。

2、CSS 优先级和权重值如何计算

内嵌样式>内部样式>外部样式>导入式

!important > 内嵌 1000 >Id 100 > class=[]=伪类 10 > tag=伪元素 1 > ( * + > ~) 0

3、如何触发BFC,以及BFC的作用

BFC:块级格式化上下文block formatting context,是一个独立渲染区域。规定了内部box如何布局,并且与这个区域外部毫不相干。

触发:float的值不是none;position的值不是static或者relative;display的值是inline-block、block、table-cell、flex、table-caption或者inline-flex;overflow的值不是visible。

作用:避免margin重叠;自适应两栏布局;清除浮动。

4、CSS盒模型

盒模型由:外边距margin、边框border、内边距padding、内容content四个部分组成

标准盒模型大小=border+padding+content

怪异盒模型大小=content

转怪异盒模型:box-sizing:border-box;

最全面试题CSS(含答案)(css面试题及答案)

转标准盒模型:box-sizing:content-box;

5、如何水平垂直居中一个元素

5.1、弹性盒子

.box{ display: flex; justify-content: center; align-items: center;}

5.2、定位

.box{ position: relative;} .box .sub{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /*margin-left: 负的宽度的一半*/ /*margin-top: 负的高度的一半*/}

6、css实现一个三角形

.triangle{ width: 0; height: 0; border: 100px solid transparent; border-left-color: red;}

7、如何实现左边固定宽,右边自适应布局

7.1、圣杯布局

<div id="container"> <div id="center" class="column"></div> <div id="left" class="column"></div> <div id="right" class="column"></div></div>#container { padding-left: 200px; padding-right: 150px;}#container .column { float: left;}#center { width: 100%;}#left { width: 200px; margin-left: -100%; position: relative; right: 200px;}#right { width: 150px; margin-right: -150px; }

7.2、双飞翼布局

<div id="container" class="column">   <div id="center"></div> </div> <div id="left" class="column"></div> <div id="right" class="column"></div> #container {   width: 100%; }​.column { float: left;}        #center { margin-left: 200px; margin-right: 150px;}        #left { width: 200px; margin-left: -100%;}        #right { width: 150px; margin-left: -150px;}  

7.3、等高布局(假等高)互补的内外边距

.parent{ overflow: hidden;}.left, .right{ margin-bottom: -10000px; padding-bottom: 10000px;}

7.4、等高布局(真等高)弹性盒子

.parent{ display: flex;}.child{ flex: 1;}

7.5、calc

<div id="left" class="column"></div> <div id="center" class="column"></div> <div id="right" class="column"></div> .column{   float: left; } #left{   width: 100px; } #right{   width: 200px; } #center{   width: calc(100% - 100px - 200px); }

7.6、浮动

<div id="left" class="column"></div> <div id="right" class="column"></div> <div id="center"></div> #left{   float: left;   width: 100px; } #right{   float: right;   width: 200px; } #center{   margin-left: 100px;   margin-right: 200px; }

8、如何实现6px字体

.font{ font-size: 12px; transform: scale(.5);}

9、移动端1px边框怎么设置

/* 方法1 */.border{ width: 100%; height: 1px; background: red;}/* 方法2 */.border{ border-image: url(border.png)}/* 方法3 */.border{ box-shadow: 0 0 0 1px #000;}

10、px、em、rem、vh、vw分别是什么

px物理像素,绝对单位;em相对于自身字体大小,如果自身没有大小则相对于父级字体大小,如果父级也没有则一层一层向上查找,直到找到html为止,相对单位;rem相对于html的字体大小,相对单位;vh相对于屏幕高度的大小,相对单位;vw相对于屏幕宽度的大小,相对单位。

11、css可继承的属性有哪些

可继承的属性:文本类:text-indent、text-align、line-height、word-spacing、letter-spacing、text-transform、direction、color;

字体类:font、font-family、font-weight、font-size、font-style、font-variant、font-stretch、font-size-adjust;

其它类:visibility、caption-side、border-collapse、border-spacing、empty-cells、table-layout、list-style-type、list-style-image、list-style-position、list-style、quotes、cursor、page、page-break-inside、windows、orphans等

本文链接地址:https://www.jiuchutong.com/zhishi/300333.html 转载请保留说明!

上一篇:使用 TF-IDF 算法将文本向量化(tf-idf计算)

下一篇:前后端分离项目,如何解决跨域问题?(前后端分离项目部署到服务器)

  • 增值税税率
  • 税务定税按什么标准
  • 烟叶税税率是多少2019
  • 年初存货跌价准备余额是上年末结转的吗
  • 实收资本在利润表中怎么体现出来
  • 收购发票能使用几次
  • 2019小微企业10万免税需要如何办理
  • 建筑施工企业存货是未结转的成本对吗
  • 已交增值税如何做账
  • 应付账款是负数怎么回事
  • 投资可赎回基金怎么入账?
  • 小微企业劳务费税率
  • 为什么算除税价不算税金
  • 新公司没业务怎么做账
  • 第一季度时间范围
  • 一般纳税人的资质在哪里打印
  • 保费收入包含
  • 无形资产摊销可以按照其价值和使用情况
  • 进口有退税吗最新政策
  • 公司内部银行往来款会计分录
  • 代收污水处理费要交税吗
  • 银行支票怎么用
  • 公司账上没车可以报车辆保险吗
  • 社保跨省转移社保流程
  • 应付账款是贵公司欠还是欠贵公司
  • 优酷路由宝是什么东西
  • 车辆购置税为什么查不到发票信息
  • 合同已无法履行
  • 阿查法拉亚盆地牡蛎
  • 企业公益性捐赠税前扣除标准
  • php缓存技术和静态化
  • php操作步骤
  • 金税三期个税扣缴客户端
  • 金蝶专业版固定资产初始数据录入
  • 旅游景点html代码
  • 应收的货款
  • 房产税在企业所得税扣除内吗
  • 货物运输服务可以加计扣除吗
  • 预收款方式销售货物的会计分录
  • 无法支付款项是否缴纳增值税
  • 加计抵减的其他收益免税吗
  • 企业所得税计提的准备金可以扣除吗
  • 房屋装修费计入长期待摊费用
  • 房地产企业缴纳契税会计分录
  • 员工退回备用金怎么写收据
  • 预收账款所得税汇算清缴需要调吗
  • 增值税专用发票丢了怎么补救
  • 建设期贷款利息定义是什么
  • 加油卡充值如何开发票
  • 销售费用的增值税是进项还是销项
  • 所得税季度申报弥补以前年度亏损
  • 商品预计退回会扣钱吗
  • 销售发奖金感谢说说
  • 银行存款负数如何计算
  • 旅客运送的一般规定
  • 企业亏损应纳税所得额怎么填
  • 公司新产品研发上市的意义和价值
  • 商品降价如何进行投诉
  • mysql8.0 主从
  • ubuntu如何安装
  • cmd命令 cd
  • 设置共享文件夹win10
  • win7电脑磁盘空间不足清理步骤
  • win8如何卸载360安全卫士?
  • Win7计算机管理里面没有本地用户和组
  • 电脑关机没反应怎么办出现一个对话框
  • centos 查看用户命令
  • win10系统右键菜单管理
  • redhat linux 7.2系统安装详细过程
  • cocos2dx运行原理
  • 同一内容复制到多个单元格
  • 安卓关键词覆盖
  • unity3d官方案例
  • 手把手教你用python破解wifi
  • [置顶]游戏名:chivalry2
  • js中的eval
  • 福建医保省外报销政策
  • 电子税务局企业账号是税号吗
  • 股东非自然人
  • 苏州虎丘区税务局在哪里
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设