BFC
块级格式上下文(block format context)是页面一块独立的渲染区域，具有一套独立的渲染规则
- 内部的盒子会在垂直的方向上一个接一个地放置
- 同一个bfc内部相邻的盒子margin会发生重叠，与方向无关
- 每个元素的左外边距和包含块的左边界相接触（从左到右），即使浮动元素也是如此（bfc的子元素不会超出包含块，但绝对定位可以）
- 清除浮动只能清除同一BFC在它前面的元素的浮动
- BFC就是页面上的一个隔离的独立容器，里面的元素和外部的元素互不影响
- 计算BFC的高度时，考虑BFC所包含的所有元素，连浮动元素也参与计算；
- bfc的区域不会与float的元素区域重叠 目的是为了形成一个相对于外界完全独立的空间，让里面的元素和外部的元素互不影响
如何创建 bfc
- html 根元素
- 浮动 float不为none
- 绝对定位 position为absolute/fixed
- 行内块元素 display为inline-block
- overflow 不为 visible或者clip(auto/hidden)
- diplay为flow-root
- 弹性元素 display为flex或flex-inline
- 表格单元格 display为table-cell
- 表格标题 display为table-caption
- 匿名表格单元格元素 display为table、table-row、table-row-gr藕片、table-header-group、table-footer-group、inline-table
- contain的值为layout、content、paint
- 网格元素 display为grid或grid-inline
- 多列容器column-count或column-width值不为auto，且含有column-count：1的元素
- column-span值为all的元素会创建一个新的格式化上下文，即使该元素没有包裹在一个多列容器中
bfc 的作用
- 清除内部或者外部的浮动
- 防止同一 bfc 容器中的相邻元素间的外边距重叠问题
使用场景
- 高度坍塌（内部浮动导致的问题）
<style>
.father{
background-color:red;
/* 解决 */
/* display:flow-root */
/* overflow:auto */
}
.son1{
background-color: blue;
width: 100px;
height: 200px;
float: left;
}
.son2{
background-color: green;
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<div class="father">
<div class="son1"></div>
<div class="son2"></div>
</div>
</body>
2. 外边距折叠
- 外边距合并
- 三栏布局
<html>
<style type="text/css">
.left{
float: left;
width: 200px;
height: 100px;
background-color: green;
}
.right{
float: right;
width: 200px;
height: 100px;
background-color: pink;
}
.center{
overflow: hidden;
/* 如果不写，center的width和wrapper的width一样 */
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</div>
</body>
</html>
居中
定宽高
- absolute+负margin
- absolute+margin auto
- absolute+calc 不定宽高
- absolute+transform
- lineheight
- writing-mode
- table
- css-table
- flex
- grid
absolute+负margin
<div class="father">
<div class="son"></div>
</div>.father {
position: relative;
}
.son {
position: absolute;
left: 50%;
top: 50%;
margin-left: -(父元素宽度-子元素宽度)/2 px;
margin-top: -(父元素高度-子元素高度)/2 px;
}absolute+auto
<div class="father">
<div class="son"></div>
</div>.father{
position: relative;
width: 200px;
height: 200px;
background-color: red;
}
.son{
background-color: black;
position: absolute;
width: 100px;
height: 100px;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}absolute+cale
<div class="father">
<div class="son"></div>
</div>.father {
width: 200px;
height: 200px;
position: relative;
}
.son {
width: 100px;
height: 100px;
position: absolute;
top:cale(50% - 50px);
left:cale(50% - 50px);
}absollute+transform
.father {
position: relative;
}
.son {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}flex
.father {
display: flex;
justify-content: center;
align-items: center;
}grid
.father {
display: grid;
}
.son {
justify-self: center;
align-self: center;
}一些概念
- 屏幕尺寸：用对角来计算。1英寸=2.54厘米
- 像素：硬件和软件所能控制的最小单位。
- 屏幕分辨率：一个屏幕具体由多少个像素点组成
- 物理像素：设备的像素点个数
- 逻辑像素：让n个像素当一个像素使用
- 视觉视口
- 理想视口：所谓理想视口，即页面绘制区域可以完美适配设备宽度的视口大小，不需要出现滚动条即可正常查看网站的所有内容，且文字图片清晰，如所有iphone的理想视口宽度都为320px，安卓设备的理想视口有320px、360px等等。 width=device-width 宽度等于屏幕宽度 initial-scale=1缩放等于1 maximum-scale=2最大缩放等于2 minimum-scale=0.5最小缩放等于0.5 user-scalable=no不允许缩放
<meta name="viewport" content="width=device-width,initial-scale=1" />移动端适配方案
rem
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0" user-scalable="no"/>
<style>
.box{
width:10rem;
}
</style>
<script>
function setRootRem(){
const root = document.documentElement;
const scale = root.clientWidth / 10;
root.style.fontSize = scale + 'px'
}
setRootRem()
window.addEventListener('resize', setRootRem)
</script>
</head>但这样我们会发现在写布局的时候会非常复杂，也就是你需要自己手动去计算一下对应的rem值，比如上面的font-size设计稿上是20px，那我们就要计算一下20px对应的rem是多少，按我们上面的规则，1px = 1/37.5rem，所以20px应该对应20/37.5 = 0.53rem。所以这种方案我们通常搭配着CSS预处理器使用。 rem.less
@device-width:375;
@rem:(@device-width/10rem)然后将@rem配置成less全局变量
font-size:(24/@rem)特点
- 适配原理稍复杂
- 需要使用JS
- 设计稿标注的px换算到rem
- 方案灵活，既能实现整体缩放，又能实现局部不缩放
vw、vh适配
rem.less
@device-width:375;
@vw:(100vm/@device-width)font-size: 16*@vw特点
- 适配原理简单
- 不需要JS即可适配
- 设计稿标注的px换算到vw
- 方案灵活，既然实现整体缩放，又能实现局部不缩放
px
export function initViewport() {
const width = 375; // 设计稿宽度
const scale = window.innerWidth / width
// console.log('scale', scale)
let meta = document.querySelector('meta[name=viewport]')
let content = `width=${width}, init-scale=${scale}, user-scalable=no`
if(!meta) {
meta = document.createElement('meta')
meta.setAttribute('name', 'viewport')
document.head.appendChild(meta)
}
meta.setAttribute('content', content)
}- 适配原理简单
- 需要JS
- 无需转换
- 方案死板，只能实现页面级别肢体缩放
CSS3动画
CSS3动画分为transition、animation、transform
transition（过度）
transition: transition-property transition-duration transitino-timing-function transition-delay包含四个属性 transition-property:执行变换的属性 transition-duration：变换延续的时间 transitino-timing-function：在延续的时间段变换的速率变化 transition-delay：变换延迟时间
transitino-timing-function具体值
- linear 缺点：
- 不能重复
- height：auto不会产生动画效果
- 不支持所有的属性
支持的属性
- background-color
- background-position
- border-color
- border-width
- border-spacing
- bottom
- clip
- color
- font-size
- font-weight
- height
- left
- letter-spacing
- line-height
- margin
- max-height
- max-width
- min-height
- min-width
animation
keyframes规则用于定义动画的每个阶段。通过keyframe规则，可以指定动画的每个关键帧。
@keyframes example{
0% {left: 0; top:0px;}
50% {left:200px; top:200px;}
100% {left: 0px; top:0px;}
}
div {
animation-name: example;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-direction:alternate;
animation-play-state:running;
}详细属性
- animation-name:指定应用的动画名称
- animation-duration：指定动画的持续时间
- animation-timing-function：指定动画的速度曲线
- animation-delay: 指定动画开始之前的延长时间
- animation-interation-count: 指定动画应该重复的速度
- animation-direction: 指定动画的方向
- animation-fill-mode: 指定动画在执行之前和之后如何应用样式
- animation-play-state：指定动画运行或暂停
transform(变换)
旋转
2D transform:rotate(angle)顺时针 3D
transform:
- rotate(x,y,z,angle) x轴y轴z轴 angle:旋转角度
- rotateX(angle)
- rotateY(angle)
- rotateZ(angle)
缩放
2D transform:scale(x,y) 3D transform:scale3D(x,y,z) scaleX() scaleY() scaleZ()
倾斜
stransform:skew(x) stransform:skew(x,y)
移动
transform:translate(x) transform:translate(x,y) transform:translate(x,y,z) transform:translateX() transform:translateY() transform:translateZ()