阅读 41

css系列

1. 布局方式

1.1 圣杯布局

圣杯布局: 中间的优先渲染,独立的左中右结构

具体实现圣杯布局的步骤:

  1. 让左右浮动在一行显示,相对定位
  2. 让中间模块的middle宽度为100%
  3. 让左边的色块移动到middle前面,margin-left:-100%
  4. 让右边的色块移动到middle的后面,margin-left:-宽度
  5. 给三个小块的父元素加一个内填充的属性padding,为的是填充挤到中间
  6. 给左边的块移动到左边left:-200px, 给右边的块移动到右边right:-200px

效果图:

<header>header</header>
   <div class="container">
      <div class="middle">midlle</div>
      <div class="left">left</div>
      <div class="right">right</div>
   </div>
<footer>footer</footer>
复制代码
header, footer {
   height: 100px;
   width: 100%;
   background-color: antiquewhite;
}
.container {
   height: 200px;
   padding-left: 200px;
   padding-right: 300px;
}
.container > div {
   float: left;
   position: relative;
   height: 100%;
}
.left {
   width: 200px;
   height: 200px;
   background-color: burlywood;
   margin-left: -100%;
   left: -200px;
}
.right {
   width: 300px;
   height: 200px;
   background-color: burlywood;
   margin-left: -300px;
   right: -300px;
}
.middle {
   width: 100%;
   height: 200px;
   background-color: #b0f9c2;
}
复制代码

1.2 双飞翼布局

具体实现双飞翼布局的步骤:

  1. 给左,中,右 加浮动,在一行显示
  2. 给middle宽度为100%
  3. 让左边的模块移动middle的左边 margin-left:-100%
  4. 让右边的模块移动middle的右边 margin-left:-自己宽度
  5. 给middle里面的容器添加外间距 margin: 左右

效果:

<div class="main">
    <div class="middle">
			<div class="middle-inner">中间</div>
    </div>
    <div class="left">左边</div>
    <div class="right">右边</div>
</div>
复制代码
.main>div { 
    float:left;
    position: relative;
    height: 300px; 
}
.middle { 
    width: 100%;
    background-color: lightgreen 
}
.left { 
   width:200px;
   margin-left:-100%;
   background-color:#b0f9c2 
}
.right { 
   width: 200px;
   margin-left:-200px;
   background-color:pink 
}
.middle-inner{
   margin:0 200px; 
   background-color: burlywood; 
   height:300px;
}
复制代码

1.3 三栏布局

三栏布局: 中间列自适应宽度,旁边两侧固定宽度

效果图:

  1. 第一种方式 --- 定位
<div class="outer outer1">
   <div class="left">1-left</div>
   <div class="middle">1-middle</div>
   <div class="right">1-right</div>
</div>
复制代码
.outer1 {
   position: relative;
}
.outer1 .left {
   position: absolute;
   width: 100px;
}
.outer1 .middle {
   margin: 0 200px 0 100px;
}
.outer1 .right {
   position: absolute;
   width: 200px;
   top: 0;
   right: 0;
}
注意:左右分别使用绝对定位,中间设置外边距
复制代码
  1. 第二种方式 --- flex布局
<div class="outer outer2">
   <div class="left">2-left</div>
   <div class="middle">2-middle</div>
   <div class="right">2-right</div>
</div>
复制代码
.outer2 {
   display: flex;
}
.outer2 .left {
   flex: 0 0 100px;
}
.outer2 .middle {
   flex: auto;
}
.outer2 .right {
   flex: 0 0 200px;
}
复制代码
  1. 第三种方式 --- 浮动原理
<div class="outer outer3">
   <div class="left">3-left</div>
   <div class="right">3-right</div>
   <div class="middle">3-middle</div>
</div>
复制代码
.outer3 .left{
   float: left;
   width: 100px;
}
.outer3 .right {
   float: right;
   width: 200px;
}
.outer3 .middle {
   margin: 0 200px 0 100px;
}
复制代码

1.4 两栏布局

两栏布局:左右两栏,左边固定,右边自适应

效果图:

  1. 第一种方式 --- 浮动
<div class="outer outer1">
    <div class="left">1-left</div>
    <div class="right">1-right</div>
</div>
复制代码
.outer1 .left {
    width: 200px;
    float: left;
}
.outer1 .right {
    width: auto;
    margin-left: 200px;
}
复制代码
  1. 第二种方式 --- flex
<div class="outer outer2">
    <div class="left">2-left</div>
    <div class="right">2-right</div>
</div>
复制代码
.outer2 {
   display: flex;
}
.outer2 .left {
   flex: 0 0 200px;
   /* flex-grow: 0;
   flex-shrink:0;
   flex-basis:200px; */
}
.outer2 .right {
   flex: auto;
}

注意:flex: 0 0 200pxflex: flex-grow flex-shrink flex-basis的简写
复制代码
  1. 第三种方式 --- position
<div class="outer outer3">
   <div class="left">3-left</div>
   <div class="right">3-right</div>
</div>
复制代码
.outer3 {
   position: relative;
}
.outer3 .left {
   position: absolute;
   width: 200px;
}
.outer3 .right {
   margin-left: 200px;
}
复制代码
  1. 第四种方式 --- position again
<div class="outer outer4">
    <div class="left">4-left</div>
    <div class="right">4-right</div>
</div>
复制代码
.outer4 {
    position: relative;
}
.outer4 .left {
    width: 200px;
} 
.outer4 .right {
    position: absolute;
    top: 0;
    left: 200px;
    right: 0;
}
复制代码

1.5 水平垂直居中

对以下dom水平垂直居中

<div class="box" id="box">
   石小明
</div>
复制代码
body {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}
.box {
    box-sizing: border-box;
    width: 100px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 16px;
    border: 1px solid lightblue;
    background: lightcyan;
}
复制代码
  1. 第一种:定位
.box {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -25px;
}
复制代码

注意:上面的方式是一定要知道具体的宽高。但下面的方式是知道宽高,但是没有用到宽高。

  1. 第二种:flex
body {
    display: flex;
    justify-content: center;
    align-items: center;
}
复制代码

注意:这种方式也是兼容性不是很好

  1. 第三种:JavaScript
let html = document.documentElement,
winW = html.clientWidth,
winH = html.clientHeight,
boxW = box.offsetWidth, // offsetWidth带边框
boxH = box.offsetHeight;

box.style.position = 'absolute';
box.style.left = (winW - boxW) / 2 + 'px';
box.style.top = (winH - boxH) / 2 + 'px';
复制代码
  1. 第四种:table-cell
body {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
复制代码

1.6 flex布局均匀分布后换行问题

ul下有多个li,每三个li排一列,多余的换行显示。代码如下:

display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
复制代码

当li不是3的整数倍时,会出现下图问题:

解决方案:

在ul的底部新增li,个数为数组总长度%3的余数即可

<li class="item" style="border: none;" v-for="(ite, idx) in list.length%3" :key="idx"></li>
复制代码

2. 基本概念

2.1 BFC

什么是BFC

BFC全称 Block Formatting Context块级格式上下文,简单的说,BFC是页面上的一个隔离的独立容器,不受外界干扰或干扰外界

如何触发BFC

  • float不为 none
  • overflow的值不为 visible
  • position 为 absolute 或 fixed
  • display的值为 inline-block 或 table-cell 或 table-caption 或 grid

BFC的渲染规则是什么

  • BFC是页面上的一个隔离的独立容器,不受外界干扰或干扰外界
  • 计算BFC的高度时,浮动子元素也参与计算(即内部有浮动元素时也不会发生高度塌陷)
  • BFC的区域不会与float的元素区域重叠
  • BFC内部的元素会在垂直方向上放置
  • BFC内部两个相邻元素的margin会发生重叠

BFC的应用场景

  • 清除浮动:BFC内部的浮动元素会参与高度计算,因此可用于清除浮动,防止高度塌陷
  • 避免某元素被浮动元素覆盖:BFC的区域不会与浮动元素的区域重叠
  • 阻止外边距重叠:属于同一个BFC的两个相邻Box的margin会发生折叠,不同BFC不会发生折叠

3. 常见兼容方法

3.1 清除浮动的方法

  1. 添加新元素
<div class="parent">
  <div class="child"></div>
  <!-- 添加一个空元素,利用css提供的clear:both清除浮动 -->
  <div style="clear: both"></div>
</div>  
复制代码
  1. 使用伪元素
/* 对父元素添加伪元素 */
.parent::after{
  content: "";
  display: block;
  height: 0;
  clear:both;
}
复制代码
  1. 触发父元素BFC
/* 触发父元素BFC */
.parent {
  overflow: hidden;
  /* float: left; */
  /* position: absolute; */
  /* display: inline-block */
  /* 以上属性均可触发BFC */
}
复制代码