项目开发中，经常遇到页面布局和样式的一些问题，最近做了一些梳理…

一、CSS

1. 左右div元素自适应等高

通常有以下4种方式: table-cell、CSS3盒模型、相对布局和float

基础代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>demo</title>
</head>

<body>
<div class="wrap">
  <div class="item left">111</div>
  <div class="item right"></div>
</div>
</body>
</html>
  • 方式1: table-cell
/* 此种写法关键点:
1. item设置display table-cell

table-cell存在问题:
1. table-cell是把元素当做table的td处理, 所以设置之后.left设置的min-height不起作用,只能靠元素本身撑起整个高度
2. table-cell有兼容问题, ie8以上 */
<style>
  .wrap {
    width: 1200px;
  }
  .item {
    width: 300px;
    display: table-cell;
  }
  .right {
    width: 800px;
    background-color: #6accd5;
  }
  .left {
    padding-top: 20px;
    /*min-height: 200px;*/
    background-color: #e17b4e;
  }
</style>
  • 方式2: CSS3盒模型
/* 此种写法关键点:
1. 父元素.wrap设置display -webkit-box */
<style>
  .wrap {
    display: -webkit-box;
    width: 1200px;
  }
  .left{
    width: 200px;
    min-height: 200px;
    background-color: #e17b4e;
  }
  .right {
    width: 800px;
    padding: 10px;
    background-color: #6accd5;
  }
</style>
  • 方式3: 相对布局 —— 第一种要重点理解的方法
/* 此种写法的关键点有三:
1. wrap 的position须设为absolute/relative, 为了让right的相对布局对象为父class wrap
2. right 设置 absolute, top & bottom 设置为0, 撑起父元素height, right为0, 靠右侧
3. 整个布局最小height为.left min-height, 随着.left内元素增加, 左右等高 */

<style>
  .wrap {
    width: 1200px;
    position: absolute;
    /*position: relative;*/
  }
  .item {
    width: 300px;
    display: inline-block;
  }
  .right {
    width: 800px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    background-color: #6accd5;
  }
  .left {
    min-height: 200px;
    background-color: #e17b4e;
  }
</style>
  • 方式4: float —— 第二种要重点理解的方法
/* 此种写法的关键点有三：
1. .wrap设置display: absolute 继承父元素(body)， 在子元素.right设置absolute时，相对的元素是.wrap而不是整个body
2. .wrap子元素设置float, 本身变成inline元素, 没有height, 通过设置display: absolute或者overflow: hidden, 可以让.wrap重新变成block元素
3. 子元素height设为100%

注：相对定位和overflow: hidden是怎么实现元素block的，查询参考BFC和IFC */

<style>
  .wrap {
    width: 1200px;
    position:absolute;
    /*overflow: hidden;*/
    background-color: rgba(0, 0, 0, 0.2);
  }
  .left {
    float: left;
    width: 50%;
    background-color: #e17b4e;
    height: 100%;
    min-height: 300px;
  }
  .right {
    float: left;
    width: 30%;
    height: 100%;
    position: absolute;
    left: 55%;
    background-color: #6accd5;
  }
  .right:after{
    clear: both;
  }
</style>

十、常见问题

1. WARN [vite:css] xxx value has mixed support, consider using xxx instead

详细错误提示信息:

lianpf@lianpf-PC:~/despository-z/framework/wenhao-testapp$ yarn serve
yarn run v1.22.22
$ zmi serve
[10:53:49.866] INFO (28799): 正在加载presets: h5
  ➜  Local:   http://localhost:5173/                                                                            10:53:50
  ➜  Network: http://10.10.138.3:5173/                                                                          10:53:50

 WARN  [vite:css] end value has mixed support, consider using flex-end instead

解法：
如果您使用(S)CSS或SASS，则必须分别编写flex-start或flex-end而不是start或end

justify-content: flex-end;
align-items: flex-end;

参考 start value has mixed support, consider using flex-start instead

最后， 希望大家早日实现：成为编程高手的伟大梦想！
欢迎交流~

微信公众号

本文版权归原作者曜灵所有！未经允许，严禁转载！对非法转载者, 原作者保留采用法律手段追究的权利！
若需转载，请联系微信公众号：连先生有猫病，可获取作者联系方式！