google外贸建站,福建建设信息网站,jsp网站开发简单代码,专注网站建设公司1. 盒模型
⻚⾯渲染时#xff0c; dom 元素所采⽤的 布局模型。可通过 box-sizing 进⾏设置。根据计算宽⾼的区域可分为 content-box ( W3C 标准盒模型)border-box ( IE 盒模型)padding-boxmargin-box (浏览器未实现)
2. BFC
块级格式化上下⽂#xff0c;是⼀个独⽴的渲染…1. 盒模型
⻚⾯渲染时 dom 元素所采⽤的 布局模型。可通过 box-sizing 进⾏设置。根据计算宽⾼的区域可分为 content-box ( W3C 标准盒模型)border-box ( IE 盒模型)padding-boxmargin-box (浏览器未实现)
2. BFC
块级格式化上下⽂是⼀个独⽴的渲染区域让处于 BFC 内部的元素与外部的元素相互隔离使内外元素的定位不会相互影响。IE下为 Layout 可通过 zoom:1 触发
触发条件:
根元素position: absolute/fixeddisplay: inline-block / tablefloat 元素ovevflow ! visible
规则:
属于同⼀个 BFC 的两个相邻 Box 垂直排列属于同⼀个 BFC 的两个相邻 Box 的 margin 会发⽣重叠BFC 中⼦元素的 margin box 的左边 与包含块 (BFC) border box 的左边相接触(⼦元素 absolute 除外)BFC 的区域不会与 float 的元素区域重叠计算 BFC 的⾼度时浮动⼦元素也参与计算⽂字层不会被浮动层覆盖环绕于周围
应⽤:
阻⽌ margin 重叠可以包含浮动元素 —— 清除内部浮动(清除浮动的原理是两个 div 都位于同⼀个 BFC 区域之中)⾃适应两栏布局可以阻⽌元素被浮动元素覆盖
3.层叠上下⽂
元素提升为⼀个⽐较特殊的图层在三维空间中 (z轴) ⾼出普通元素⼀等。
触发条件
根层叠上下⽂( html )positioncss3 属性 flextransformopacityfilterwill-changewebkit-overflow-scrolling
层叠等级层叠上下⽂在z轴上的排序
在同⼀层叠上下⽂中层叠等级才有意义z-index 的优先级最⾼
4. 居中布局
⽔平居中
⾏内元素: text-align: center块级元素: margin: 0 autoabsolute transformflex justify-content: center
垂直居中
line-height: heightabsolute transformflex align-items: centertable
⽔平垂直居中
absolute transformflex justify-content align-items
5. 选择器优先级
!important ⾏内样式 #id .class tag * 继承 默认选择器 从右往左 解析
6.去除浮动影响防⽌⽗级⾼度塌陷
通过增加尾元素清除浮动:after / : 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
animation-name : 动画名称对应 keyframesanimation-duration : 间隔animation-timing-function : 曲线animation-delay : 延迟animation-iteration-count : 次数 infinite : 循环动画 animation-direction : ⽅向 alternate : 反向播放 animation-fill-mode : 静⽌模式 forwards : 停⽌时保留最后⼀帧backwards : 停⽌时回到第⼀帧both : 同时运⽤ forwards / backwards 常⽤钩⼦: animationend动画属性: 尽量使⽤动画属性进⾏动画能拥有较好的性能表现 translatescalerotateskewopacitycolor
