flex布局
1.行内块状都可设为flex
2.设为flex布局后，子元素float，clear，vertical-align失效
3.设置在容器的属性：
flex-direction: 项目水平还是垂直排列
flex-wrap：水平（换行方式）
justify-content: 水平（左右居中贴边环绕？）
align-items： 垂直（上下居中拉扯？）
align-content：垂直(上下居中贴边环绕？）多行flex-flow:flex-direction和flex-wrap简写，用处不大
4，设置在子元素的属性：
order: 权重（越大排列越靠后）
align-self：覆盖align-items，子元素自己的垂直方式
flex-grow：放大比例（空间多余）
flex-shrink：缩小比例（空间不够）
flex-basis：占据固定空间（计算空间多余或不够之前就固定了）flex:以上三个的缩写
5，应用场景
将第一张图使用flex布局成第二个图 
代码：
<div class="back">
<span class="point"></span>
<span class="point"></span>
</div>
<style>
.back{
width:100px;
height:100px;
background:red;
display:flex;
justify-content:space-between; //水平方向贴边
}
.point{
width:20px;
height:20px;
background:black;
border-radius:10px;
display:block;
}
.point:nth-of-type(2){
align-self:flex-end; //子元素自身，垂直方向，贴下边缘
}
</style>BFC
BFC就是块级格式化上下文。就是一个隔离容器，在这个容器里面的布局不会影响到外部的元素。
BFC规则
1，内部元素从顶部垂直排列
2，内部元素贴边
3，内部相邻元素margin重叠
4，内部float元素高度也被包含
5，外部不与float重叠
产生BFC条件
float 除了none以外
overflow 除了visible 以外（hidden，auto，scroll ）
display (flex，inline-block，inline-flex，table-cell，table-caption)
position (absolute，fixed）
html
不常见：contain，多列容器，fieldset元素
补充：
假如是display：flex（第一条规则flex的优先级大于BFC规则，也就是BFC内部元素水平排列）
针对第三条BFC规则，其实任何相邻块级元素的margin都会重叠
针对第二条规则，其实大部分的元素都贴边
BFC使用场景（作用）：
1，避免外边距重叠（创造BFC: 将两个元素分别包裹在div中，这个div设置overflow:hidden)
2，清除浮动（父元素包裹子元素，子元素float:left，父元素高度坍塌，此时令父元素overflow:hidden，可以清除浮动，高度被子元素撑起来）
3，阻止浮动元素的覆盖（两个兄弟元素，第二个元素设置float:left，第一个元素被第二个覆盖，此时给第一个元素设置overflow:hidden，就可以不被覆盖）
4，两栏自适应布局
一个实例：div里包含img和p，希望图片在左，文字在右
<div>
<img />
<p>
</div> 目前状态： 
img{
float:left; //脱离文档流，父级高度坍塌
}
div{
overflow:hidden; //产生BFC,（内部渲染不影响外部）清除了浮动，父级div高度为img高度（解决坍塌)
}
p{
oveflow:hidden; //产生BFC，自己的渲染不影响外部(img)，p的宽度为div-img，而不是div（解决宽度）盒子模型
1，如何使得一个盒子无论width如何变化，它的实际宽度都是固定的？
使用box-sizing: border-box; 则该元素的border和padding不会额外增加宽度，而是借用width宽度绘制。
拖动事件
核心属性： draggable="true"
核心事件：
2，ondragstart
3，ondragover
4，ondrop
核心方法：
1， e.dataTransfer.setData
2，e.preventDefault（默认是不允许drop，这边屏蔽一下）
3，e.dataTransfer.getData
<html>
<style>
.start,.end{
width:200px;
height:200px;
border:1px solid red;
}
.move{
width:50px;
height:50px;
background:red;
}
</style>
<body>
<div class="start" >
<div class="move" draggable="true" ondragstart="start(event)" id="start0"></div>
</div>
<div class="end" ondrop="drop(event)" ondragover="allowdrop(event)" id="end0"></div>
</body>
<script>
function start(e){
e.dataTransfer.setData("text", e.target.id);
}
function allowdrop(e){
e.preventDefault();
}
function drop(e){
var id=e.dataTransfer.getData("text")
var item=document.getElementById(id);
e.target.appendChild(item);
}
</script>
</html>
position
static：用于取消继承
relative：相对于自身原来位置定位（占据文档流）
absolute：父级是relative，absolute，则相对于父级定位，否则相对于body定位（不占文档流）
fixed：相对于浏览器定位
图片懒加载
懒加载：图片列表太长，还没进入屏幕的时候不给src，进入屏幕的时候才给src，并发起请求。
核心思想：获取图片到可视区域的距离，假如小于0，则为src赋值
获取图片到可视区域的距离：clientHeight，offsetTop，scrollTop
代码：
<body>
<img data-src="./images/1.jpg" alt="">
<img data-src="./images/2.jpg" alt="">
<img data-src="./images/3.jpg" alt="">
</body>
<script>
var imgs = document.querySelectorAll('img');
function getTop(e) {
var T = e.offsetTop;
while(e = e.offsetParent) {
T += e.offsetTop;
}
return T;
}
function lazyLoad(imgs) {
var H = document.documentElement.clientHeight;//获取可视区域高度
var S = document.documentElement.scrollTop || document.body.scrollTop;
for (var i = 0; i < imgs.length; i++) {
if (H + S > getTop(imgs[i])) {
imgs[i].src = imgs[i].getAttribute('data-src');
}
}
}
window.onload = window.onscroll = function () {
lazyLoad(imgs);
}
</script>px rem em
rem是相对于html的font-size属性的单位。
em是相对于当前元素的font-size，如果当前元素没有设置font-size，则相对于浏览器默认font-size(18px)，（注意：当前元素没有设置但是可以继承父级的也算是有这个font-size属性）。
场景实例
1，使用css实现一个箭头
<div class="arrow" ></div>
<style>
.arrow{
width:0;
height:0;
border:0;
border-left:10px solid red;
}
</style>2，实现垂直居中的几个方法假如是大div里套着小div，样式如下：
假设初始化是这样的，大div套小div
方法一：position+transform
.inner{
/*这么写*/
margin:auto;
position:relative;
top:50%;
transform:translateY(-50%);
/*或者这么写*/
position:relative;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
方法二：flex
.outer{
display:flex;
justify-content:center;
align-items:center;
}
方法三： table-cell+inline-block
.outer{
display: table-cell;
vertical-align: middle;
text-align: center;
}
.inner{
display:inline-block;
}
方法四：position+calc
.inner{
position:relative;
top:calc(50% - 50px);
left:calc(50% - 50px);
}
3，实现一端固定，一端自适应
方法一：calc
.left{
width:100px;
}
.right{
width:calc(100%-100px)
}方法二：flex:1
.father{
display:flex;
}
.left{
width:100px;
}
.right{
flex:1;
}方法三：float
.left{
width:100px;
float:left;
}
.right{
height:50px;
}方法四：absolute+right:0
.father{
position:relative;
}
.left{
width:50px;
}
.right{
position:absolute;
top:0;
left:50px;
right:0
}方法五：table+table-cell
.father{
display:table;
}
.left{
display:table-cell;
width:50px;
}
.right{
display:table-cell;
}方法六：grid+grid-template-columns
.father{
display:grid;
grid-template-columns:50px auto;
}4，实现一条高度为0.5px的线？
:before，scale(0.5)
5，获取第三个p元素
.father p:nth-child(3){
background:red;
}
扫一扫
445
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
