- 地图
- 画布
- BFC用法
地图
1)判断浏览器是否支持地理定位navigator.geolocation,Geolocation是window.navigator下面的一个对象, 该对象提供了实现地理位置定位的接口。
if (navigator.geolocation)
{
alert('ok')
}else{
alert('no')
}
2)getCurrentPosition(success,error,options)该方法是 实现地理定位的核心方法,该方法能够对获取到的 信息作出处理以及设置。
A.success(position) 获取信息成功的回调函数
B.error(errorcode)获取信息失败的回调函数
C.options获取信息前可以按照你的需求来设置一些参数
success(position) 获取信息成功的回调函数
当成功获得信息的时候,会自动调用success函数,而 这个函数会自动生成一个包含返回地理信息的position 对象,如下:
A.coords.latitude(纬度)
B.coords.longitude(经度)
<p id="p1"></p>
<button οnclick="getLocation()">click</button>
<script type="text/javascript">
var p1=document.getElementById("p1")
var localtion=navigator.geolocation;
function getLocation()
{
if (localtion)
{
//支持
localtion.getCurrentPosition(showPostion)
}else{
p1.innerHTML="你的浏览器不支持地理定位";
}
}
function showPostion(postion){
p1.innerText=postion.coords.latitude+" "+postion.coords.longitude;
}
</script>
错误演示
<script type="text/javascript">
var p1=document.getElementById("p1")
var localtion=navigator.geolocation;
function getLocation()
{
if (localtion)
{
//支持
localtion.getCurrentPosition(showPostion,showError) //1:success 2:error
}else{
p1.innerHTML="你的浏览器不支持地理定位";
}
}
function showPostion(postion){
p1.innerText=postion.coords.latitude+" "+postion.coords.longitude;
}
function showError(error){
switch(error.code)
{
case error.PERMISSION_DENIED:
p1.innerHTML="用户选择了不容许"
break;
case error.POSITION_UNAVAILABLE:
p1.innerHTML="连不上GPS卫星或者网络中断."
break;
case error.TIMEOUT:
p1.innerHTML="超时了 "
break;
case error.UNKNOWN_ERROR:
p1.innerHTML="未知错误"
break;
}
}
</script>
画布
1)判断浏览器兼容问题
<canvas id="first"width="250" height="250" style="background-color:red;">
你的浏览器不支持 Canvas 标签
</canvas>
判断语句(也可这样进行判断浏览器的兼容问题)
var canvas = document.getElementById('first');
if (canvas.getContext){
alert("支持 <canvas> 标签");
} else {
alert("不支持 <canvas> 标签");
}
2)首先获取 canvas 对象,然后调用 canvas 对象的 getContext 方法,这个方法目前只能传入参数 "2d"
var canvas = document.getElementById('first');
var ctx = canvas.getContext('2d');
3) canvas元素绘制图像的时候有两种方法,分别是
context.fill()//填充
context.stroke()//绘制边框
style:在进行图形绘制前,要设置好绘图的样式
context.fillStyle//填充的样式
context.strokeStyle//边框样式
利用画布绘制矩形
var canvas1=document.getElementById("first");
var cxt=canvas1.getContext("2d")
cxt.fillStyle="red"
cxt.fillRect(0,0,100,100)
4)画一个圆
context.arc(x, y, radius, startAngle, endAngle, anticlockwise);
这一共有 6 个参数. x 是圆心的横坐标, y 是圆心的纵坐标, radius 是半径, startAngle 是开始画圆的角度, endAngle 是结束画圆的角度, anticlockwise 是画圆方向。
如:100,100,30,0,Math.PI*2,true
圆弧中心的坐标x和坐标y、圆弧半径、起始角度、终止角度、是否逆时针。
弧长 Math.PI是半圆
Math.PI * 2是整个圆 0.5为四分之一
例1
var canvas = document.getElementById('first');
var ctx=canvas.getContext("2d")
ctx.fillStyle="red"
// ctx.beginPath();
ctx.arc(100,100,30,Math.PI * -1 / 4, Math.PI * 3 / 4,true);
// ctx.closePath();
ctx.fill();
例2
var canvas1=document.getElementById("first");
var cxt=canvas1.getContext("2d")
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(100,100,30,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
5)关于闭合路径的实验
var canvas = document.getElementById('myCanvas');
var ctx=canvas.getContext("2d")
ctx.beginPath();
ctx.arc(100,100, 50, 0, Math.PI ,1);
ctx.closePath()
ctx.strokeStyle="red"
ctx.stroke();
6)关于扇形 var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var startPoint=0;
ctx.fillStyle = "red";
ctx.beginPath();
ctx.moveTo(200,150);
ctx.arc(200,150,150,0,Math.PI/180*30,false);
ctx.closePath()
ctx.fill();
如:画一个折线
var canvas1=document.getElementById("first");
var cxt=canvas1.getContext("2d")
cxt.strokeStyle="red";
cxt.beginPath();
cxt.moveTo(10,10);
cxt.lineTo(150,150)
cxt.stroke()
cxt.closePath()
cxt.beginPath();
cxt.moveTo(10,10);
cxt.lineTo(150,250)
cxt.stroke()
cxt.closePath()
7)线性渐变
context.createLinearGradient(x0,y0,x1,y1)
介于 0.0 与 1.0 之间的值,表示渐变中开始与结束之间的位置。
其中 .createLinearGradient(0,0,170,0)
x0 渐变开始点的 x 坐标
y0 渐变开始点的 y 坐标
x1 渐变结束点的 x 坐标
y1 渐变结束点的 y 坐标
gradient.addColorStop("0","magenta");
stop--介于 0.0 与 1.0 之间的值,表示渐变中开始与结束之间的位置。
例1: 定义一个渐变(从上到下)作为矩形的填充样式:
var c=document.getElementById("first");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,0,170);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(0,0,150,100);
例2:定义一个从黑到红再到白的渐变,作为矩形的填充样式:
var c=document.getElementById("first");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,170,0);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(0.5,"red");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);
例3:通过多个 addColorStop() 方法来定义渐变:
var c=document.getElementById("first");
var ctx=c.getContext("2d");
var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black");
grd.addColorStop("0.3","magenta");
grd.addColorStop("0.5","blue");
grd.addColorStop("0.6","green");
grd.addColorStop("0.8","yellow");
grd.addColorStop(1,"red");
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);
例4:
var c=document.getElementById("first");
var ctx=c.getContext("2d");
ctx.font="30px Verdana";
// 创建渐变
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// 用渐变进行填充
ctx.strokeStyle=gradient;
ctx.strokeText("hello world!",10,50);
8)scale()缩放
var c=document.getElementById("first");
var ctx=c.getContext("2d");
ctx.strokeRect(5,5,25,15); ctx.scale(2,2);
ctx.strokeRect(5,5,25,15); ctx.scale(2,2);
ctx.strokeRect(5,5,25,15); ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
9)rotate——旋转
语法:
context.rotate(angle);
ngle
旋转角度,以弧度计。
如需将角度转换为弧度,请使用 degrees*Math.PI/180 公式进行计算。
举例:
如需旋转 5 度,可规定下面的公式:5*Math.PI/180。
度数----弧度
Math.PI=180
Math.PI/180 ===1弧度
5*Math.PI/180===5弧度
如 将矩形旋转 20 度://将矩形中心点旋转20度
var c=document.getElementById("first");
var ctx=c.getContext("2d");
ctx.rotate(20*Math.PI/180);
ctx.fillRect(50,20,100,50);
10)translate()平移
context.translate(x,y)
x-添加到水平x上的值
y-添加到水平y上的值
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillRect(10,10,100,50);
ctx.translate(70,70);
ctx.fillRect(10,10,100,50);
**注意** :save()的意思是保存之前的状态,restore()之后就回到你save的那个时候的状态
var canvas1=document.getElementsByTagName("canvas")[0];
var ctx=canvas1.getContext("2d")
ctx.save();
ctx.beginPath();
ctx.rotate(30*Math.PI/180);
ctx.fillRect(50,20,100,50);
ctx.closePath();
ctx.beginPath();
ctx.restore();
ctx.fillRect(60,70,100,50);
ctx.closePath();
11)transform替换绘图的当前转换矩阵
通过 transform() 添加一个新的变换矩阵,再次绘制矩形;添加一个新的变换矩阵,然后再次绘制矩形。请注意,每当您调用 transform() 时,它都会在前一个变换矩阵上构建:
ctx.transform(1,0.5,-0.5,1,30,10);
a 水平缩放绘图
b 水平倾斜绘图
c 垂直倾斜绘图
d 垂直缩放绘图
e 水平移动绘图
f 垂直移动绘图
例:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="yellow";
ctx.fillRect(0,0,250,100)
ctx.transform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="red";
ctx.fillRect(0,0,250,100);
ctx.transform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="blue";
ctx.fillRect(0,0,250,100);
12) 渐变色创建文字
var canvas1=document.getElementById("first");
var ctx=canvas1.getContext("2d")
ctx.font="30px Verdana";
var gradient=ctx.createLinearGradient(0,0,180,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
ctx.fillStyle=gradient;
ctx.fillText("w3school.com.cn",10,90);
13)关于图像
var img = new Image(); // Create new Image object
img.src = 'myImage.png'; // Set source path
当脚本执行后,图片开始装载。若调用 drawImage 时,图片没装载完,脚本会等待直至装载完毕。如果不希望这样,可以使用 onload 事件: var ctx = document.getElementById('myCanvas').getContext('2d');
var img = new Image();
img.src = 'oneeye.jpg';
img.onload = function()
{
ctx.drawImage(img,0,0);
ctx.beginPath();
}
}
x 在画布上放置图像的 x 坐标位置。
y 在画布上放置图像的 y 坐标位置。
ctx.drawImage(img,0,0,200,200);
width 可选。要使用的图像的宽度。(伸展或缩小图像)
height 可选。要使用的图像的高度。(伸展或缩小图像)
var myImage=document.getElementById("myCanvas");
var cxt=myImage.getContext("2d");
var img=new Image();
img.src="ji.png";
img.onload = function()
{
cxt.drawImage(img,0,0,50,50);
cxt.drawImage(img,30,30,50,50);
cxt.drawImage(img,60,60,50,50);
}
14)图像的剪贴
img 规定要使用的图像、画布或视频。
sx 可选。开始剪切的 x 坐标位置。
sy 可选。开始剪切的 y 坐标位置。
swidth 可选。被剪切图像的宽度。
sheight 可选。被剪切图像的高度。
x 在画布上放置图像的 x 坐标位置。
y 在画布上放置图像的 y 坐标位置。
width 可选。要使用的图像的宽度。(伸展或缩小图像)
height 可选。要使用的图像的高度。(伸展或缩小图像)
例:
var canvas1=document.getElementById("myCanvas")
var ctx=canvas1.getContext("2d");
var img=new Image();
img.src='wode.gif'
img.οnlοad=function(){
ctx.drawImage(img,10,10,30,30,50,50,100,100);
}
BFC
BFC 定义
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。
BFC布局规则:
1、内部的Box会在垂直方向,一个接一个地放置。
2、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
3、每个元素的margin box的左边, 与包含块border box的左边相接触(对于从 左往右的格式化,否则相反)。即使存在浮动也是如此。
4、BFC的区域不会与float box重叠。
5、BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元 素。反之也如此。
6、计算BFC的高度时,浮动元素也参与计算
哪些元素会生成BFC?
根元素
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible
例1 :做一个侧边栏目但是被包含了
<div class="aside"></div>
<div class="main"></div>
.aside {
width: 100px;
height: 150px;
float: left;
background: #f66;
}
.main {
height: 200px;
background: #fcc;
}
----------------------------------
是不是出问题了呢?
--触发BFC
.main {
height: 200px;
background: #fcc;
overflow: hidden;
}
例2:上边距重叠问题
.main{
background-color: darkgrey;
width: 700px;
}
.first{
margin-top: 100px;
width: 50px;
height: 50px;
background-color: #000000;
}
.second{
width: 50px;
height: 50px;
background-color: blue;
}
<div class="main">
<div class="first"></div>
<div class="second"></div>
</div>
margin-top: 100px;---这句话如果加上和没加有什么区别呢 ------------BFC的区域不会与float box重叠 用main触发BFC
例3:影响别的元素
.main{
background-color: darkgrey;
width: 700px;
}
.first{
width: 50px;
height: 50px;
background-color: #000000;
}
.second{
width: 50px;
height: 50px;
background-color: blue;
margin-left: 800px;
}
当我们给main里边的元素设置了过多的值800px的时候,势必会印象外边的东西
当我们设置了BFC的时候,就不会发生这种情况-------------------BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素
例4:文字围绕问题
.box {width:210px;border: 1px solid #000;float: left;}
.img {width: 100px;height: 100px;background: #696;float: left;}
.info {background: #ccc;color: #fff;}
<div class="box">
<div class="img">image</div>
<p class="info">hello world</p>
</div>
当文字变多的时候会发生什么事情呢?
我们发现,文字环绕了---这很忧伤
这时候我们可以单独为P出发我们的BFC
.info {background: #ccc;color: #fff;overflow: hidden}
例5:float之后的元素没有撑开我们的盒子
<div class="par">
<div class="child"></div>
<div class="child"></div>
</div>
.par {
border: 5px solid #fcc;
width: 300px;
}
.child {
border: 5px solid #f66;
width:100px;
height: 100px;
float: left;
}
发生了什么?float之后的元素没有撑开我们的盒子,而我们的原则,计算BFC的高度时,浮动元素也参与计算
.par {
border: 5px solid #fcc;
width: 300px;
overflow: hidden;
}
触发BFC
例6:元素margin重叠 p {
color: #f55;
background: #fcc;
width: 200px;
line-height: 100px;
text-align:center;
margin: 100px;
}
<p>Haha</p>
<p>Hehe</p>
出问题了,BFC里边元素margin重叠了
<p>Haha</p>
<div class="wrap">
<p>Hehe</p>
</div>
.wrap {
overflow: hidden;
}
<p id="p1"></p>
<button οnclick="getLocation()">click</button>
<script type="text/javascript">
var p1=document.getElementById("p1")
var localtion=navigator.geolocation;
function getLocation()
{
if (localtion)
{
//支持
localtion.getCurrentPosition(showPostion)
}else{
p1.innerHTML="你的浏览器不支持地理定位";
}
}
function showPostion(postion){
p1.innerText=postion.coords.latitude+" "+postion.coords.longitude;
}
</script>
<script type="text/javascript">
var p1=document.getElementById("p1")
var localtion=navigator.geolocation;
function getLocation()
{
if (localtion)
{
//支持
localtion.getCurrentPosition(showPostion,showError) //1:success 2:error
}else{
p1.innerHTML="你的浏览器不支持地理定位";
}
}
function showPostion(postion){
p1.innerText=postion.coords.latitude+" "+postion.coords.longitude;
}
function showError(error){
switch(error.code)
{
case error.PERMISSION_DENIED:
p1.innerHTML="用户选择了不容许"
break;
case error.POSITION_UNAVAILABLE:
p1.innerHTML="连不上GPS卫星或者网络中断."
break;
case error.TIMEOUT:
p1.innerHTML="超时了 "
break;
case error.UNKNOWN_ERROR:
p1.innerHTML="未知错误"
break;
}
}
</script>
var canvas = document.getElementById('first');
if (canvas.getContext){
alert("支持 <canvas> 标签");
} else {
alert("不支持 <canvas> 标签");
}
var canvas = document.getElementById('first');
var ctx=canvas.getContext("2d")
ctx.fillStyle="red"
// ctx.beginPath();
ctx.arc(100,100,30,Math.PI * -1 / 4, Math.PI * 3 / 4,true);
// ctx.closePath();
ctx.fill();
var canvas1=document.getElementById("first");
var cxt=canvas1.getContext("2d")
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(100,100,30,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
var canvas = document.getElementById('myCanvas');
var ctx=canvas.getContext("2d")
ctx.beginPath();
ctx.arc(100,100, 50, 0, Math.PI ,1);
ctx.closePath()
ctx.strokeStyle="red"
ctx.stroke();
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var startPoint=0;
ctx.fillStyle = "red";
ctx.beginPath();
ctx.moveTo(200,150);
ctx.arc(200,150,150,0,Math.PI/180*30,false);
ctx.closePath()
ctx.fill();
var canvas1=document.getElementById("first");
var cxt=canvas1.getContext("2d")
cxt.strokeStyle="red";
cxt.beginPath();
cxt.moveTo(10,10);
cxt.lineTo(150,150)
cxt.stroke()
cxt.closePath()
cxt.beginPath();
cxt.moveTo(10,10);
cxt.lineTo(150,250)
cxt.stroke()
cxt.closePath()
var c=document.getElementById("first");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,0,170);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(0,0,150,100);
var c=document.getElementById("first");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,170,0);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(0.5,"red");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);
var c=document.getElementById("first");
var ctx=c.getContext("2d");
var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black");
grd.addColorStop("0.3","magenta");
grd.addColorStop("0.5","blue");
grd.addColorStop("0.6","green");
grd.addColorStop("0.8","yellow");
grd.addColorStop(1,"red");
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);
var c=document.getElementById("first");
var ctx=c.getContext("2d");
ctx.font="30px Verdana";
// 创建渐变
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// 用渐变进行填充
ctx.strokeStyle=gradient;
ctx.strokeText("hello world!",10,50);
var c=document.getElementById("first");
var ctx=c.getContext("2d");
ctx.strokeRect(5,5,25,15); ctx.scale(2,2);
ctx.strokeRect(5,5,25,15); ctx.scale(2,2);
ctx.strokeRect(5,5,25,15); ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
var c=document.getElementById("first");
var ctx=c.getContext("2d");
ctx.rotate(20*Math.PI/180);
ctx.fillRect(50,20,100,50);
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillRect(10,10,100,50);
ctx.translate(70,70);
ctx.fillRect(10,10,100,50);
var canvas1=document.getElementsByTagName("canvas")[0];
var ctx=canvas1.getContext("2d")
ctx.save();
ctx.beginPath();
ctx.rotate(30*Math.PI/180);
ctx.fillRect(50,20,100,50);
ctx.closePath();
ctx.beginPath();
ctx.restore();
ctx.fillRect(60,70,100,50);
ctx.closePath();
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="yellow";
ctx.fillRect(0,0,250,100)
ctx.transform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="red";
ctx.fillRect(0,0,250,100);
ctx.transform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="blue";
ctx.fillRect(0,0,250,100);
var canvas1=document.getElementById("first");
var ctx=canvas1.getContext("2d")
ctx.font="30px Verdana";
var gradient=ctx.createLinearGradient(0,0,180,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
ctx.fillStyle=gradient;
ctx.fillText("w3school.com.cn",10,90);
var ctx = document.getElementById('myCanvas').getContext('2d');
var img = new Image();
img.src = 'oneeye.jpg';
img.onload = function()
{
ctx.drawImage(img,0,0);
ctx.beginPath();
}
}
var myImage=document.getElementById("myCanvas");
var cxt=myImage.getContext("2d");
var img=new Image();
img.src="ji.png";
img.onload = function()
{
cxt.drawImage(img,0,0,50,50);
cxt.drawImage(img,30,30,50,50);
cxt.drawImage(img,60,60,50,50);
}
var canvas1=document.getElementById("myCanvas")
var ctx=canvas1.getContext("2d");
var img=new Image();
img.src='wode.gif'
img.οnlοad=function(){
ctx.drawImage(img,10,10,30,30,50,50,100,100);
}
<div class="aside"></div>
<div class="main"></div>
.aside {
width: 100px;
height: 150px;
float: left;
background: #f66;
}
.main {
height: 200px;
background: #fcc;
}
----------------------------------
是不是出问题了呢?
--触发BFC
.main {
height: 200px;
background: #fcc;
overflow: hidden;
}
.main{
background-color: darkgrey;
width: 700px;
}
.first{
margin-top: 100px;
width: 50px;
height: 50px;
background-color: #000000;
}
.second{
width: 50px;
height: 50px;
background-color: blue;
}
<div class="main">
<div class="first"></div>
<div class="second"></div>
</div>
.main{
background-color: darkgrey;
width: 700px;
}
.first{
width: 50px;
height: 50px;
background-color: #000000;
}
.second{
width: 50px;
height: 50px;
background-color: blue;
margin-left: 800px;
}
.box {width:210px;border: 1px solid #000;float: left;}
.img {width: 100px;height: 100px;background: #696;float: left;}
.info {background: #ccc;color: #fff;}
<div class="box">
<div class="img">image</div>
<p class="info">hello world</p>
</div>
当文字变多的时候会发生什么事情呢?
我们发现,文字环绕了---这很忧伤
这时候我们可以单独为P出发我们的BFC
.info {background: #ccc;color: #fff;overflow: hidden}
<div class="par">
<div class="child"></div>
<div class="child"></div>
</div>
.par {
border: 5px solid #fcc;
width: 300px;
}
.child {
border: 5px solid #f66;
width:100px;
height: 100px;
float: left;
}
发生了什么?float之后的元素没有撑开我们的盒子,而我们的原则,计算BFC的高度时,浮动元素也参与计算
.par {
border: 5px solid #fcc;
width: 300px;
overflow: hidden;
}
p {
color: #f55;
background: #fcc;
width: 200px;
line-height: 100px;
text-align:center;
margin: 100px;
}
<p>Haha</p>
<p>Hehe</p>
出问题了,BFC里边元素margin重叠了
<p>Haha</p>
<div class="wrap">
<p>Hehe</p>
</div>
.wrap {
overflow: hidden;
}