html+css布局及BFC渲染

最新推荐文章于 2024-03-17 16:26:42 发布

Yvettezhu

最新推荐文章于 2024-03-17 16:26:42 发布

阅读量67

点赞数

本文链接：https://blog.csdn.net/weixin_49547540/article/details/116431100

版权

html+css布局，简单理解，在html上放合适的标签，对标签用上合适的css布局样式，包括float,position,flex等。

有的时候，可能出现塌陷等不符合预期的布局，极大可能是没有产生BFC独立的块级渲染区域。

盒模型

是什么？

盒模型由4部分组成：content，padding，border，margin

有什么？

标准盒模型（content-box）

ie怪异盒模型（border-box）：宽高算到border

flex弹性伸缩盒模型

column多列盒模型

布局

display：none dom里没有

visibility：hidden dom里有，只是不显示

ocpacity：0 显示了，只是透明看不见

（兼容用fliter）

filter滤镜：对比度、饱和度、阴影、色相、透明度

flex

flex: auto 和 none

flex-grow，flex-shrink，flex-basis

默认 0 1 auto，不放大（0），空间不足时，按项目本来大小，等比例缩小（1）

项目使用：

导航模块，多个功能均匀上下左右分布

功能

盒子水平垂直居中

flex（ie10+）

父盒子：

display: flex;

justify-content: center;

align-items: center;

position

需要父盒子有宽高限定

父盒子：

position：relative;

width:

height:

子盒子：

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

margin: 0;

js-position

let HTML = document.documentElement,
		winW = HTML.clientWidth,
		winH = HTML.clientHeight,
		boxW = box.offsetWidth,
		boxH = box.offsetHeight;
box.style.position = "absolute";
box.style.left = (winW - boxW) / 2 + "px";
box.style.top = (winH - boxH) / 2 + "px";

左右固定中间自适应

flex

html,body{
  overflow: hidden;
}
.container{
 	display: flex;
  justify-content: space-between;
  height: 100%;
}
.left,.right{
  flex: 0 0 200px;
  height: 200px;
}
.center{
  flex: 1;
  min-height: 400px;
}

postition

html,body{
  height: 100%;
  overflow: hidden;
}
.container{
 	position: relative;
  height: 100%;
}
.left,.right{
  position: absolute;
  top: 0;
  width: 200px;
  min-height: 200px;
}
.left{
  left: 0;
}
.right{
  right: 0;
}

.center{
  margin: 0 200px;
  min-height: 400px;
}

圣杯布局(float)

body溢出隐藏，container的padding预留给左右，三个盒子都float，左margin-left+position（relative），右margin-right（-）

<html>
  <body>
    <div class="container clearfix">
      <div class="center"></div>
      <div class="left"></div>
      <div class="right"></div>
    </div>
  </body>
</html>

html,body{
  height: 100%;
  overflow: hidden;
}
.container{
  height: 100%;
  padding: 0 200px;
}
.left,.right{
  width: 200px;
  min-height: 200px;
}
.center{
  width: 100%;
  min-height: 400px;
}
.left,.right,.center{
  float: left;
}
.left{
  margin-left: -100%;
  position: relative;
  left: -200px;
}
.right{
  margin-right: -200px;
}

双飞翼(float)

body溢出隐藏，container里的center的margin预留给左右，三个盒子container,left,right都float，左margin-left（-100%），右margin-right（-200px）

<html>
  <body>
    <div class="container clearfix">
      <div class="center"></div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
  </body>
</html>

html,body{
  height: 100%;
  overflow: hidden;
}
.left,.right,.container{
  float: left;
}
.container{
  height: 100%;
}
.container .center{
  margin: 0 200px;
  min-height: 400px;
}
.left,.right{
  width: 200px;
  min-height: 200px;
}

.left{
  margin-left: -100%;
}
.right{
  margin-right: -200px;
}

calc(ie9+)

.center{
  width: calc(100% - 400px);
  min-height: 400px;
}

pc端布局（兼容）

版心1000px+导航条（position）+ float

@media

rem

移动端布局

元素单位rpx + flex

渲染

BFC

块级格式化上下文，独立的块级渲染区域，只有Block-level Box参与

独立渲染，与外部无关

没有BFC出现的问题：

一个盒子没有设置height，内容子元素都浮动，无法撑起盒子，因为盒子没有形成BFC

解决方法：给盒子创建BFC

创建BFC

float不为none
position不为static或relative
display为inline-block，flex或inline-flex
overflow:hidden（最好用这个）

BFC解决问题：

margin塌陷：

父盒子里包了个子盒子，给子盒子设置margin-top：父盒子下移

给父盒子加overflow，形成BFC
可以阻止元素被浮动元素覆盖：

浮动元素脱离文档流覆盖，浮动会形成BFC

给非浮动元素加overflow，也形成BFC

Yvettezhu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html+css布局及BFC渲染

html+css布局，简单理解，在html上放合适的标签，对标签用上合适的css布局样式，包括float,position,flex等。有的时候，可能出现塌陷等不符合预期的布局，极大可能是没有产生BFC独立的块级渲染区域。目录标签盒模型布局flex功能盒子水平垂直居中flex（ie10+）positionjs-position左右固定中间自适应flexpostition圣杯布局(float)双飞翼(float)calc(ie9+)pc端布局（兼容）移动端布局渲染BFC标签是什么？标签语义化：合
复制链接

扫一扫