2019前端面试系列——CSS面试题
盒模型
/* 红色区域的大小是多少?200 - 20*2 - 20*2 = 120 */
.box {
width: 200px;
height: 200px;
padding: 20px;
margin: 20px;
background: red;
border: 20px solid black;
box-sizing: border-box;
}
/* 标准模型 */
box-sizing:content-box;
/*IE模型*/
box-sizing:border-box;
如何实现一个最大的正方形
用 padding-bottom
撑开边距
section {
width:100%;
padding-bottom: 100%;
background: #333;
}
一行水平居中,多行居左
<div><span>我是多行文字。我是多行文字。我是多行文字。我是多行文字。我是多行文字。我是多行文字。我是多行文字。我是多行文字。我是多行文字。我是多行文字。</span></div>
<div><span>我是一行文字</span></div>
<style>
div{text-align: center;}
div span{display: inline-block;text-align: left;}
</style>
水平垂直居中
贴上腾讯大佬的一篇文章:16种方式实现水平居中垂直居中
两栏布局,左边固定,右边自适应,左右不重叠
flex做自适应布局很容易,但兼容性不好,这里统一不用flex布局
.left{
float:left;
width:300px;
margin-right: 10px;
background: red;
}
.right{
overflow: hidden; /* 创建BFC */
background: yellow;
}
如何实现左右等高布局
table
布局兼容性最好,当然flex
布局的align-items: stretch;
也行
<div class="layout">
<div class="layout left">left</div>
<div class="layout right">center</div>
</div>
<style>
.layout{
display: table;
width: 100%;
}
.layout div{
display: table-cell;
}
.layout .left{
width: 50%;
height: 200px;
background: red;
}
.layout .right{
width: 50%;
background: yellow;
}
</style>
画三角形
.shape {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 50px solid transparent;
border-bottom: 50px solid blue;
background: white;
}
link @import导入css
- link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS
- link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载
- link无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持
- link支持使用Javascript控制DOM去改变样式;而@import不支持
BFC理解
BFC触发条件:
- 根元素,即html
- float的值不为none(默认)
- position的值为absolute或fixed
- overflow的值不为visible(默认)
- display的值为inline-block、table-cell、table-caption
BFC特性:
- 内部的Box会在垂直方向上一个接一个放置。
- Box垂直方向的距离由margin决定,属于同一个BFC的两个相邻Box的margin会发生重叠。
- 每个元素的margin box 的左边,与包含块border box的左边相接触。
- BFC的区域不会与float box重叠。(可用于清浮动)
- BFC是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。
- 计算BFC的高度时,浮动元素也会参与计算。
2019前端面试系列——CSS面试题
2019前端面试系列——JS面试题
2019前端面试系列——JS高频手写代码题
2019前端面试系列——Vue面试题
2019前端面试系列——HTTP、浏览器面试题
2019前端面试系列——CSS面试题的更多相关文章
- 2019前端面试系列——JS面试题
判断 js 类型的方式 1. typeof 可以判断出'string','number','boolean','undefined','symbol' 但判断 typeof(null) 时值为 'ob ...
- 2019前端面试系列——Vue面试题
Vue 双向绑定原理 mvvm 双向绑定,采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty()来劫持各个属性的 setter.getter,在数 ...
- 2019前端面试系列——JS高频手写代码题
实现 new 方法 /* * 1.创建一个空对象 * 2.链接到原型 * 3.绑定this值 * 4.返回新对象 */ // 第一种实现 function createNew() { let obj ...
- 2019前端面试系列——HTTP、浏览器面试题
浏览器存储的方式有哪些 特性 cookie localStorage sessionStorage indexedDB 数据生命周期 一般由服务器生成,可以设置过期时间 除非被清理,否则一直存在 页面 ...
- 前端Html和Css面试题
前端Html和Css面试题Html篇:1.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? IE: trident内核 Firefox:gecko内核 Safari:webkit内核 Ope ...
- 前端面试之CSS权重问题!
前端面试之CSS权重问题! 下面的权重按照从小到大来排列! 1.通用选择器(*) 2.元素(类型)选择器 权重1 3.类选择器 权重10 4.属性选择器 5.伪类 6.ID 选择器 权重100 7.内 ...
- 前端面试之CSS常用的选择器!
前端面试之CSS常用的选择器! 标签选择器 <style> /* <!-- 标签选择器 :写上标签名 -->*/ p { color: green; } div { color ...
- 【前端面试】Vue面试题总结(持续更新中)
Vue面试题总结(持续更新中) 题目参考链接 https://blog.csdn.net/weixin_45257157/article/details/106215158 由于已经有很多前辈深造VU ...
- 前端基础系列——CSS规范(文章内容为转载)
原作者信息 作者:词晖 链接:http://www.zhihu.com/question/19586885/answer/48933504 来源:知乎 著作权归原作者所有,转载请联系原作者获得授权. ...
随机推荐
- jenkins System error
背景 在使用WAR包安装jenkins后,启动tomcat,显示启动成功,但最后提示信息如下: 04-Dec-2018 03:28:21.563 WARNING [Computer.threadPoo ...
- 成功的面对对象语言的五个基本特性——Alan Kay
1.万物皆为对象. 将对象是为奇特的变量,它可以存储数据,除此之外,还可以要求他在自身上执行操作. 2.程序是对象的集合,他们通过发送消息来告知彼此所要做的. 要想请求一个对象,就必须对该对项发送一条 ...
- Linux:AWK基础
AWK是一个强大的文本分析工具,算是Linux系统特别有用的命令了,在日志分析.文件内容分析中扮演特别重要的角色. AWK说明 简单来说awk就是把文件逐行的读入,以指定的分隔符将每行分割,分割后的部 ...
- maven中的setting文件
localRepository默认jar包下载到本地哪个目录下 pluginGroups 把自己的插件放在这里进行管理 这样不用写groupId和artifactId 一个生命周期包含很多 ...
- 基于Quartz.NET框架的任务计划管理工具
最近接到一个小需求 ——可以定期同步20个Sql Server 7.0数据库里的数据(数据量会预计>10000),并保存为CSV格式文件 ——可以设置保存文件数据量 ——该应用需要用WinFor ...
- 【Python还能干嘛】爬取微信好友头像完成马赛克拼图(千图成像)~
马赛克拼图 何谓马赛克拼图(千图成像),简单来说就是将若干小图片平凑成为一张大图,如下图路飞一样,如果放大看你会发现里面都是一些海贼王里面的图片. Our Tragets 爬取所有微信好友的头像
- 一道Java程序输出题(继承-重载-覆盖-向上转型的问题)
class A { public String show(D obj) { // func1 return ("A and D"); } public String show(A ...
- 【已解决】解决IntelliJ IDEA控制台输出中文乱码问题
IntelliJ IDEA 真的是一款很方便的Java开发工具,但是关于中文乱码这个问题我不得不吐槽,这个编码也弄得这么麻烦干嘛,真想找idea开发者干架,我敢打包票我能在一分钟之内一拳飞过去让他跪下 ...
- 常见的linux快捷方式和英文错误提示
第5章 linux常见的快捷方式 Ctrl +l 清屏的意思 2 Ctrl +c 退出当前的进程 3 Ctrl +w 删除光标到空格之间的信息 4 Ctrl +a 快速移动到光标行首 5 Ctrl + ...
- 新更新的OV7670 OV7725模块效果展示 OV7670 FPC版 30万像素 CMOS模块 兼容官哥方便 FPGA stm32f407 68013等使用
原创OV7670,30W像素摄像头模块, 3) 光学尺寸1/6 ,像素面积3.6 μm x 3.6 μm,灵敏度1.3V/Lux-sec 4) 工作电压:3.3V 5) 接口定义为10*2的2.54间 ...