前端面试常考知识点---CSS
1.CSS3的新特性有哪些
- CSS3选择器 .
CSS3边框与圆角
CSS3圆角border-radius:
属性值由两个参数值构成: value1 / value2,值之间用/分隔,value1代表圆角的水平半径,value2代表圆角的垂直半径
盒阴影box-shadow:
语法:box-shadow: 水平方向的偏移量 垂直方向的偏移量 模糊程度 扩展程度 颜色 是否具有内阴影CSS3背景与渐变
重要的几个:
background-image
语法:backgroundimage:url('1.jpg),url('2.jpg')
background-origin
定义:设置背景图像的原始起始位置
语法:background-origin:border-box / padding-box / content-box(背景图片坐标原点与这三个有关系)
background-repeat
定义:设置是否及如何重复背景图像,默认地,背景图像在水平和垂直方向上重复。
background-size
定义:指定背景图像的大小
语法:background-size:number / % / cover / contain
太多了,本宝宝休息一下再写
- CSS3过渡
- CSS3变换
- CSS3动画
2.flex
这篇讲的很全
简单易懂
一方面是在父容器的几个属性,另一些就是子元素的属性
父:
* flex-direction 子元素排列方向
* flex-wrap 如果一条轴线排不下,如何换行
* flex-flow flex-direction属性和flex-wrap属性的简写形式
* justify-content 在主轴上的对齐方式
* align-items 在交叉轴上如何对齐
* align-content 多根轴线的对齐方式
子:
* order
* flex-grow
* flex-shrink
* flex-basis
* flex
* align-self
3.BFC
- 内部的box会在垂直方向,一个接一个的放置
- 每个元素的margin box的左边,与包含块border box的左边相接触(对于从做往右的格式化,否则相反)
- box垂直方向的距离由margin决定,属于同一个bfc的两个相邻box的margin会发生重叠
- bfc的区域不会与浮动区域的box重叠
- bfc是一个页面上的独立的容器,外面的元素不会影响bfc里的元素,反过来,里面的也不会影响外面的
- 计算bfc高度的时候,浮动元素也会参与计算
怎么创建bfc
- float属性不为none(脱离文档流)
- position为absolute或fixed
- display为inline-block,table-cell,table-caption,flex,inine-flex
- overflow不为visible
- 根元素
应用场景
- 自适应两栏布局
- 清除内部浮动
防止垂直margin重叠
为什么overflow:hidden可以消除margin合并?
我们首先要搞清楚为什么会发生margin合并。这些元素(包括兄弟、父子元素等)之间之所以会发生margin合并,是因为它们属于同一个BFC。所以,我们就知道怎么办了,只要让它们不属于同一个BFC不就可以了?通过overflow:hidden创建了一个BFC
为什么overflow:hidden可以清除浮动的影响?
当给.parent设置"overflow:hidden"时,实际上创建了一个超级属性BFC,此超级属性反过来决定了"height:auto"是如何计算的。在“BFC布局规则”中提到:计算BFC的高度时,浮动元素也参与计算。因此,父元素在计算其高度时,加入了浮动元素的高度,“顺便”达成了清除浮动的目标,所以父元素就包裹住了子元素。
link、import、require的区别
import和requirerequire是运行时调用,所以require理论上可以运用在代码的任何地方
import是编译时调用,所以必须放在文件开头当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载,而@import引用的CSS会等到页面全部被下载完再加载。所以有时候浏览@import加载CSS的页面时会没有样式(就是闪烁),网速慢的时候还挺明显。
原文地址:https://segmentfault.com/a/1190000017257916
前端面试常考知识点---CSS的更多相关文章
- STL标准库面试常考知识点
C++ STL 之所以得到广泛的赞誉,也被很多人使用,不只是提供了像vector, string, list等方便的容器,更重要的是STL封装了许多复杂的数据结构算法和大量常用数据结构操作.vecto ...
- Java面试常考知识点
1. 什么是Java虚拟机?为什么Java被称作是“平台无关的编程语言”? Java虚拟机是一个可以执行Java字节码的虚拟机进程.Java源文件被编译成能被Java虚拟机执行的字节码文件. Jav ...
- 面试常考知识点——Java(JVM,JDK,JRE)
1. 什么是Java虚拟机?为什么Java被称作是“平台无关的编程语言”? 答:(1)Java虚拟机是一个可以执行Java字节码的虚拟机进程.Java源文件被编译成能被Java虚拟机执行的字节码文件. ...
- 史上前端面试最全知识点(附答案)---html & js & css
史上前端面试最全知识点(附答案) 一.html & js & css 1.AMD和CMD是什么?它们的区别有哪些? AMD和CMD是二种模块定义规范.现在都使用模块化编程,AMD,异步 ...
- 找工作笔试面试那些事儿(13)---操作系统常考知识点总结 ZZ 【操作系统】
http://blog.csdn.net/han_xiaoyang/article/details/11285485 上一节对数据库的知识做了一个小总结,实际找工作过程中,因为公司或单位侧重点不一样, ...
- PHP面试常考内容之Memcache和Redis(1)
你好,是我琉忆.继上周(2019.2-11至2-15)发布的"PHP面试常考内容之面向对象"专题后,发布的第二个专题,感谢你的阅读.本周(2019.2-18至2-22)的文章内容点 ...
- PHP面试常考内容之面向对象(1)
PHP中面向对象常考的知识点有以下几点,我将会从以下几点进行详细介绍说明,帮助你更好的应对PHP面试常考的面向对象相关的知识点和考题. 整个面向对象文章的结构涉及的内容模块有: 一.面向对象与面向过程 ...
- PHP面试常考之会话控制
你好,是我琉忆,欢迎您来到PHP面试专栏.本周(2019.2-25至3-1)的一三五更新的文章如下: 周一:PHP面试常考之会话控制周三:PHP面试常考之网络协议周五:PHP面试常考题之会话控制和网络 ...
- PHP面试常考内容之Memcache和Redis(2)
你好,是我琉忆.继周一(2019.2-18)发布的"PHP面试常考内容之Memcache和Redis(1)"后,这是第二篇,感谢你的支持和阅读.本周(2019.2-18至2-22) ...
随机推荐
- 微信小程序 使用微信支付功能实现在线订单支付
以前做过PC页面微信支付,但是这次在小程序 直接调用微信支付功能还是方便很多 先放个微信官方API链接:https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_a ...
- 实时竞价RTB广告平台_传漾科技_中国领先的智能数字营销引擎
实时竞价RTB广告平台_传漾科技_中国领先的智能数字营销引擎 Programmatic Framework™ 传漾程序化购买框架
- cocos2d-x 事件分发机制 ——触摸事件监听
cocos2d-x 3.0 出来已经好久了,也已经用3.0写了几个小游戏,感觉3.0的事件触发机制太赞了,随这里总结一下.也算是对知识的一种回顾和加深理解. 3.0的事件分发机制中.须要也只须要通过创 ...
- iOS加急审核之2015年总结
就在今天到公司的一会,查看了一下邮件,收到Apple的回复,今年的第六次加急审核通过了. 然后,想想明天就是西方的圣诞节假期了,从22日到29日的这段时间,Apple会暂时关闭iTunesconnec ...
- Java多线程之~~~ReadWriteLock 读写分离的多线程实现
在多线程开发中,常常会出现一种情况,我们希望读写分离. 就是对于读取这个动作来说,能够同一时候有多个线程同 时去读取这个资源,可是对于写这个动作来说,仅仅能同一时候有一个线程来操作.并且同一时候,当有 ...
- 如何使用电骡eMule上传资源
1 在电脑中创建一个文件夹专门为上传资源使用 在里面放入任意文件并右击显示ED2K链接 链接效果如下 2 登陆verycd网站,并点击上传资源 复制ED2K地址并选择分类
- C 标准库 - <time.h>
C 标准库 - <time.h> 简介 time.h 头文件定义了四个变量类型.两个宏和各种操作日期和时间的函数. 库变量 下面是头文件 time.h 中定义的变量类型: 序号 变量 &a ...
- 微信自带浏览器被输入法阻挡文本框的 jQuery 解决方法 by FungLeo
微信自带浏览器被输入法阻挡文本框的 jQuery 解决方法 by FungLeo 前言 做好了项目之后,在各种浏览器里面測试,都没有问题.非常高兴,交付后端使用.然而发如今微信自带浏览器里面,却是出现 ...
- bootstrap-data-target触发模态弹出窗元素的data使用 data-toggle与data-target的作用 深入ASP.NET MVC之九:Ajax支持 Asp.Net MVC4系列--进阶篇之AJAX
bootstrap-data-target触发模态弹出窗元素的data使用 时间:2017-05-27 14:22:34 阅读:4479 评论:0 收藏:0 [ ...
- git clean
使用git clean清除未加入版控的数据 作者:Level Up 发布日期:2012-12-21 10:48:10 笔者在使用版本控制软件时,不知为何常常会有些暂存的数据产生.像是下面 ...