css - 常见知识点
1. 盒模型
页面渲染时,dom 元素所采用的 布局模型。可通过box-sizing
进行设置。根据计算宽高的区域可分为:
content-box
(W3C 标准盒模型)border-box
(IE 盒模型)padding-box
margin-box
(浏览器未实现)
2. BFC
块级格式化上下文,是一个独立的渲染区域,让处于 BFC 内部的元素与外部的元素相互隔离,使内外元素的定位不会相互影响。
IE下为 Layout,可通过 zoom:1 触发
触发条件:
- 根元素
position: absolute/fixed
display: inline-block / table
float
元素ovevflow
!==visible
规则:
- 属于同一个 BFC 的两个相邻 Box 垂直排列
- 属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠
- BFC 中子元素的 margin box 的左边, 与包含块 (BFC) border box的左边相接触 (子元素 absolute 除外)
- BFC 的区域不会与 float 的元素区域重叠
- 计算 BFC 的高度时,浮动子元素也参与计算
- 文字层不会被浮动层覆盖,环绕于周围
应用:
- 阻止
margin
重叠 - 可以包含浮动元素 —— 清除内部浮动(清除浮动的原理是两个
div
都位于同一个 BFC 区域之中) - 自适应两栏布局
- 可以阻止元素被浮动元素覆盖
3.层叠上下文
元素提升为一个比较特殊的图层,在三维空间中 (z轴) 高出普通元素一等。
触发条件
- 根层叠上下文(
html
)
position
css3属性
flex
transform
opacity
filter
will-change
-webkit-overflow-scrolling
层叠等级:层叠上下文在z轴上的排序
- 在同一层叠上下文中,层叠等级才有意义
z-index
的优先级最高
4. 居中布局
- 水平居中
- 行内元素:
text-align: center
- 块级元素:
margin: 0 auto
absolute + transform
flex + justify-content: center
- 行内元素:
- 垂直居中
line-height: height
absolute + transform
flex + align-items: center
table
- 水平垂直居中
absolute + transform
flex + justify-content + align-items
5. 选择器优先级
!important
> 行内样式 >#id
>.class
>tag
> * > 继承 > 默认
- 选择器 从右往左 解析
6.去除浮动影响,防止父级高度塌陷
- 通过增加尾元素清除浮动
:after / <br> : clear: both
- 创建父级 BFC
- 父级设置高度
7.link 与 @import 的区别
link
功能较多,可以定义 RSS,定义 Rel 等作用,而@import
只能用于加载 css- 当解析到
link
时,页面会同步加载所引的 css,而@import
所引用的 css 会等到页面加载完才被加载 @import
需要 IE5 以上才能使用link
可以使用 js 动态引入,@import
不行
8. CSS预处理器(Sass/Less/Postcss)
CSS预处理器的原理: 是将类 CSS 语言通过 Webpack 编译 转成浏览器可读的真正 CSS。在这层编译之上,便可以赋予 CSS 更多更强大的功能,常用功能:
- 嵌套
- 变量
- 循环语句
- 条件语句
- 自动前缀
- 单位转换
- mixin复用
9.CSS动画
transition
: 过渡动画transition-property
: 属性transition-duration
: 间隔transition-timing-function
: 曲线transition-delay
: 延迟- 常用钩子:
transitionend
animation / keyframes
forwards
: 停止时,保留最后一帧backwards
: 停止时,回到第一帧both
: 同时运用forwards / backwards
alternate
: 反向播放infinite
: 循环动画animation-name
: 动画名称,对应@keyframes
animation-duration
: 间隔animation-timing-function
: 曲线animation-delay
: 延迟animation-iteration-count
: 次数animation-direction
: 方向animation-fill-mode
: 静止模式- 常用钩子:
animationend
- 动画属性: 尽量使用动画属性进行动画,能拥有较好的性能表现
translate
scale
rotate
skew
opacity
color
css - 常见知识点的更多相关文章
- css常见知识点
1.内核区分 希望某一个浏览器能一统江湖 -ms-transform:rotate(7deg); //-ms代表ie内核识别码 -moz-transform:rotate(7deg); //-moz代 ...
- css常见知识点总结
CSS 中可继承与不可继承属性有哪些 可继承: 字体系列 font-family font-weight font-size 文本系列 color text-align line-height 可见系 ...
- HTML+CSS+js常见知识点
一.HTML.CSS常见知识点 1.垂直居中盒子 /* 方法一 */ html, body { width: 100%; height: 100%; padding: 0; margin: 0; } ...
- HTML和CSS的知识点
HTML的知识点 HTML的结构: <!DOCTYPE html>: 文档类型性为HTML5文件 文档声明:在HTML的文档中必不可少,且必须在文档的第一行 文档声明的编码格式<!- ...
- CSS 基础知识点 样式 选择器 伪类
CSS 基础知识点汇集 版权声明:这篇博客是别人写的,大神博客地址 : https://www.cnblogs.com/Mtime/p/5184685.html 1.CSS 简介 CSS 指层叠样式表 ...
- iOS 常见知识点(三):Lock
iOS 常见知识点(一):Runtime iOS 常见知识点(二):RunLoop 锁是最常用的同步工具.一段代码段在同一个时间只能允许被有限个线程访问,比如一个线程 A 进入需要保护代码之前添加简单 ...
- IE6的那些css常见bug(汇总)
IE6的那些css常见bug(汇总) 我的微博终于在前几天建立了 虽说很早之前就知道博客园这个地方 但怕自己不能坚持去写一些东西一直没有建.这几天 我做了这个决定 把我的博客建起来 每周发一些看到的, ...
- css常见布局方式
CSS常见布局方式 以下总结一下CSS中常见的布局方式.本人才疏学浅,如有错误,请留言指出. 如需转载,请注明出处:CSS常见布局方式 目录: 使用BFC隐藏属性 float + margin abs ...
- css常见属性
css常见属性 1.颜色属性 1.1 color属性定义文本的颜色 1.2 color:green 1.3 color:#ff6600 可简写为#f60 1.4 color:rgb(255,255,2 ...
随机推荐
- mysql的JDBC连接
程序是通过DriverManager注册驱动,所以加载之后可以直接使用DriverMannagermysql中的多态: 不仅是赋值的时候使用了多态,返回的时候都是返回的借口(不是返回的子类对象),所以 ...
- Maven如何发布jar包到Nexus私库
Nexus2可以通过管理界面来上传jar包到私库中,而最新的Nexus3却找不到了上传界面,只能通过以下方式来发布到私库. 发布第三方jar包 这种情况是maven远程仓库没有,本地有的第三方jar包 ...
- C++之关键字&标识符命名规则
关键字 **作用:**关键字是C++中预先保留的单词(标识符) * **在定义变量或者常量时候,不要用关键字** C++关键字如下: 提示:在给变量或者常量起名称时候,不要用C++得关键字,否则会产生 ...
- Docker学习のDocker和虚拟机
最初听到Docker,是作为虚拟机来宣传的,但是它本质不是虚拟机 一.虚拟机 虚拟机(Virtual Machine)指通过软件模拟的具有完整硬件系统功能的.运行在一个完全隔离环境中的完整计算机系统. ...
- ionic js 加载动画 ionSpinner 提供了许多种旋转加载的动画图标。当你的界面加载时,你就可以呈现给用户相应的加载图标。 该图标采用的是SVG
ionic 加载动画 ion-spinner ionSpinner 提供了许多种旋转加载的动画图标.当你的界面加载时,你就可以呈现给用户相应的加载图标. 该图标采用的是SVG. 用法 <ion- ...
- Android开发 SeekBar开发记录
前言 开发记录博客不是讲解使用博客,更多的是各种功能与点子的记录 基本使用 <SeekBar android:layout_width="match_parent" andr ...
- python读文件判断是否已到EOF
python读文件判断是否已到EOF,也即结尾,一般其它语言都是以EOF直接来判断的,比如 if ( fp.read(chunk_size) == EOF), 但python到结尾后是返回空字符串的, ...
- Java 基础 - 装箱, 拆箱
总结 1-装箱过程是通过调用包装器的valueOf方法实现的,而拆箱过程是通过调用包装器的 xxxValue方法实现的.(xxx代表对应的基本数据类型).例如:在装箱的时候自动调用的是Integer的 ...
- JavaScript工作原理
HTML代码所表示的文档是一种静态文档,几乎没有交互功能,很难使页面成为动态页面.增加脚本语言,可使数据发送到服务器之前先进行处理和校验,动态地创建新的Web内容,更重要的是,引入脚本语言使我们有了事 ...
- MFC int转CString
方法一. int iVar = 7489; char szBuf[100]; _itoa(iVar, szBuf, 10); CString ss(szBuf); SetDlgItemText(IDC ...