css的经典问题

最新推荐文章于 2024-05-24 10:11:38 发布

weixin_34174105

最新推荐文章于 2024-05-24 10:11:38 发布

阅读量105

点赞数

原文链接：https://segmentfault.com/a/1190000016627195

版权

布局问题

水平垂直居中

.box父元素，.innerbox子元素

<div class="box">
     <div class="innerbox">css设置元素水平垂直居中4显示</div>
</div>

1,子元素不要求宽高

.box{
    width: 400px; 
    height: 200px; 
    border: 5px solid #ddd; 
    margin: 50px auto; 
    position: relative;
}
.innerbox{
    position: absolute; 
    left: 50%; 
    top: 50%; 
    border: 5px solid #f00; 
    transform: translate(-50%,-50%);
}

.box{
    width: 400px; 
    height: 200px; 
    border: 5px solid #ddd; 
    margin: 50px auto; 
    position: relative;
}
.innerbox{
    position: absolute; 
    left: 50%; 
    top: 50%; 
    border: 5px solid #f00; 
    width:20px;
    height:20px;
    margin-left:-10px;
    margin-top:-10px
}

.box{
    width: 400px; 
    height: 200px; 
    border: 5px solid #ddd; 
    margin: 50px auto; 
    position: relative;
}
.innerbox{
    position: absolute; 
    left: 0; 
    top: 0; 
    right:0;
    bottom:0;
    border: 5px solid #f00; 
    width:20px;
    height:20px;
    margin:auto
}

4，
flex布局

.box{
    width: 400px; 
    height: 200px; 
    border: 5px solid #ddd; 
    margin: 50px auto; 
    display: flex;
    align-items:center;
    justify-content: center;
}
.innerbox{
    width:50px;
    height:50px;
    background: mediumspringgreen;
}

5，

.cell {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 240px;
    height: 180px;
    border:1px solid #666;
}
.child{
    width:50px;
    height:100px;
    display: inline-block;
}
<div class="cell">
     <p class="child">我爱你</p>
</div>

6,
水平居中
法一：子元素是非块级 text-align:center
法二：子元素是块级元素margin:0 auto;此法要求块级有宽度，但有时未知宽度，则可用width:fit-content
法三：父集relative 向左移动一半。子集relative，向右移动一半或向左移动-50%。最外层的#macji是必须的，是.macji-skin的百分比参考物。网上其他的文章需要给.macji-skin 和li加floatleft，试了下不加也可以。

#macji{
    width:100%;
    height:80px;
    background-color:#eee;
}

#macji .macji-skin{
    display: inline-block;
    position:relative;
    left:50%;
}

#macji .macji-skin li{
    position:relative;
    right:50%;
    display: inline-block;
    margin:10px;
    padding:0 10px;
    border:solid 1px #000;
    line-height:60px;
}
<div id="macji">
     <ul class="macji-skin">
          <li>列表一</li>
     </ul>
</div>

7,垂直居中
line-height vertical-align

一列或多列定宽，另一列自适应

//tip1
.left{
    float: left;
    width: 100px;
}
.right{
    margin-left: 120px;
}
<div class="left">34343434</div>
<div class="right">22222</div>

//tip2
.left{
    float: left;
    width: 100px;
    margin-right: 20px;
}
.right{
    overflow: hidden;
}
<div class="left">34343434</div>
<div class="right">22222</div>
//tip3
.parent{
    display: table; 
    width: 100%;
    table-layout: fixed;
}
.left,.right{
    display: table-cell;
}
.left{
    width: 100px;
    padding-right: 20px;
}
<div class="parent">
   <div class="left">34343434</div>
   <div class="right">22222</div>
</div>
//tip4
.parent{
    display: flex;
}
.left{
    width: 100px;
    padding-right: 20px;
}
.right{
    flex: 1;
}
<div class="parent">
   <div class="left">34343434</div>
   <div class="right">22222</div>
</div>

一列或多列不定宽，一列自适应

//tip1
.left,.center{
    float: left;
    margin-right: 20px;
}
.right{
    overflow: hidden;
}
<div class="left">34343434</div>
<div class="center">34343434</div>
<div class="right">22222</div>
//tip2
.parent{
    display: table; 
    width: 100%;
}
.left,.right{
    display: table-cell;
}
.left{
    width: 0.1%;
    padding-right: 20px;
}
<div class="parent">
   <div class="left">34343434</div>
   <div class="right">22222</div>
</div>
//tip3
.parent{
    display: flex;
}
.left,.center{
    width: 100px;
    padding-right: 20px;
}
.right{
    flex: 1;
}
<div class="parent">
   <div class="left">34343434</div>
   <div class="center">34343434</div>
   <div class="right">22222</div>
</div>

等分

1,等宽

//tip1
.parent{
    margin-left: -20px;
}
.column{
    float: left;
    width: 25%;
    padding-left: 20px;
    box-sizing: border-box;
}
<div class="parent">
     <div class="column">1</div>
     <div class="column">2</div>
     <div class="column">3</div>
     <div class="column">4</div>
</div>
//tip2
.parent-fix{
    margin-left: -20px;
}
.parent{
    display: table;
    width:100%;
    table-layout: fixed;
}
.column{
    display: table-cell;
    padding-left: 20px;
}
<div class="parent-fix">
  <div class="parent">
     <div class="column">1</div>
     <div class="column">2</div>
     <div class="column">3</div>
     <div class="column">4</div>
  </div>
</div>

//tip3

<style>
        section {
          width: 100%;
        }
        .item {
          float: left;
          width: 100%;
          background: #ccc;
          margin: 4px 0;
          text-align: center;
        }
        div:first-child:nth-last-child(2),
        div:first-child:nth-last-child(2) ~ div {
          width: 50%;
        }
        div:first-child:nth-last-child(3),
        div:first-child:nth-last-child(3) ~ div {
          width: 33.33%;
        }
        div:first-child:nth-last-child(4),
        div:first-child:nth-last-child(4) ~ div {
          width: 25%;
        }
        div:first-child:nth-last-child(5),
        div:first-child:nth-last-child(5) ~ div {
          width: 20%;
        }
        div:first-child:nth-last-child(n+6),
        div:first-child:nth-last-child(n+6) ~ div {
            width: 33.33%;
        }
        
</style>
<section>
    <div class="item">item1</div>
    <div class="item">item2</div>
    <div class="item">item3</div>
    <div class="item">item1</div>
    <div class="item">item2</div>
    
</section>

n从0开始，选择第一个div并且是倒数第几个（暗示总共个数）以及它的邻居元素

效果如图
少于5个是一行显示
图片描述

多于5个时，每行三个
图片描述

//tip4
效果图

.main {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}
.item {
    display: inline-block;
    height:50px;
    width:200px;
}
.empty{
    height: 0;
    visibility: hidden;
}
<div class="main">
            <span class="item">1</span>
            <span class="item">2</span>
            <span class="item">3</span>
            <span class="item">4</span>
            <span class="empty">em</span>
            <span class="empty">em</span>
        </div>

就是要求多个元素并排排列，多出来的居左，empty的数量不小于单行最多元素的数量即可。试了下不加empty元素也可以达到呢。

2，等高

//tip1
.parent{
    overflow: hidden;
}
.left,.right{
    padding-bottom: 9999px;
    margin-bottom: -9999px;
}
.left{
    float: left; width: 100px;
}
.right{
    overflow: hidden;
}
<div class="parent">
            <div class="left">34343434</div>
        
            <div class="right"><p style="height:200px">2323</p></div>
            
        </div>
        
  //tip2
.parent{
    display: table; 
    width: 100%;
}
.left{
    display:table-cell; 
    width: 100px;
    margin-right: 20px;
}
.right{
    display:table-cell; 
}
//tip3
.parent{
    display:flex;
    width: 100%;
}
.left{
    width: 100px;
}
.right{
    flex:1;
}

圣杯布局左右定宽，中间自适应


.wrapper {padding: 0 100px 0 100px; overflow:hidden;}
.col {position: relative; float: left;}
.main {width: 100%;height: 200px;}
.left {width: 100px; height: 200px; margin-left: -100%;left: -100px;}
.right {width: 100px; height: 200px; margin-left: -100px; right: -100px;}


<section class="wrapper">
    <section class="col main">main</section>
    <aside class="col left">left</aside>
    <aside class="col right">right</aside>
</section>

双飞翼布局（圣杯布局的不足屏幕窄时 dom会掉下来弥补）

.wrapper {padding: 0; overflow:hidden;}
.col {float: left;}
.main {width: 100%;}
.main-wrap {margin: 0 100px 0 100px;height: 200px;}
.left {width: 100px; height: 200px; margin-left: -100%;}
.right {width: 100px; height: 200px; margin-left: -100px;}
<section class="wrapper">
    <section class="col main">
        <section class="main-wrap">main</section>
    </section>
    <aside class="col left">left</aside>
    <aside class="col right">right</aside>
</section>

容易忘记的样式

::-webkit-input-placeholder{
    font-size:.35rem;
    color:#bdbdbd;
    text-align: center
}    /* 使用webkit内核的浏览器 */
:-moz-placeholder{
    font-size:.35rem;
    color:#bdbdbd;
    text-align: center
}                  /* Firefox版本4-18 */
::-moz-placeholder{
    font-size:.35rem;
    color:#bdbdbd;
    text-align: center
}                  /* Firefox版本19+ */
:-ms-input-placeholder{
    font-size:.35rem;
    color:#bdbdbd;
    text-align: center
}
::-ms-input-placeholder{
    font-size:.35rem;
    color:#bdbdbd;
    text-align: center
}
前面可加具体的input的选择器

不同宽度屏幕的一些适配方案

1，运用media媒体查询
2，运用max-width、margin:0 auto

用absolute模拟fixed定位

<head>
  <title>Error</title>
  <style>
    html {
      height: 100%;
      overflow: hidden;
    }

    body {
      height: 100%;
      overflow: auto;
    }

    #fixed {
      position: absolute;
      left: 50px;
      top: 50px;
      width: 100px;
      height: 100px;
      background-color: green;
    }
  </style>
</head>

<body>
  <div id="fixed"></div>
  <div style='height: 1000px;'>这是一个可以滚动的div
  <div>
</body>

iphonex的刘海胡子兼容

网页的内容只在安全区域内，不希望有元素出现的刘海胡子处。

/* iOS 11.0 */
constant(safe-area-inset-top)：在Viewport顶部的安全区域内设置量（CSS像素）
constant(safe-area-inset-bottom)：在Viewport底部的安全区域内设置量（CSS像素）
constant(safe-area-inset-left)：在Viewport左边的安全区域内设置量（CSS像素）
constant(safe-area-inset-right)：在Viewport右边的安全区域内设置量（CSS像素）
/* iOS 11.2 */
env(safe-area-inset-top)：在Viewport顶部的安全区域内设置量（CSS像素）
env(safe-area-inset-bottom)：在Viewport底部的安全区域内设置量（CSS像素）
env(safe-area-inset-left)：在Viewport左边的安全区域内设置量（CSS像素）
env(safe-area-inset-right)：在Viewport右边的安全区域内设置量（CSS像素）

<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">

viewport-fit必须为cover 否则constant和env不生效
viewport-fit 有3个值：
contain: 可视窗口完全包含网页内容（左图）
cover：网页内容完全覆盖可视窗口（右图）
auto：默认值，跟 contain 表现一致

底部有按钮fixed页面实例

  <style>
    body {
      padding-top: constant(safe-area-inset-top);
      padding-top: env(safe-area-inset-top);
      padding-right: constant(safe-area-inset-right);
      padding-right: env(safe-area-inset-right);
      padding-bottom: 50px;/* 兼容不支持 env( ) 的设备  */
      padding-bottom: calc(constant(safe-area-inset-bottom) + 50px);
      padding-bottom: calc(env(safe-area-inset-bottom) + 50px);
      padding-left: constant(safe-area-inset-left);
      padding-left: env(safe-area-inset-left);
    }
    .btn-container {
      box-sizing: content-box;
      height: 50px;
      line-height: 50px;
      color: #fff;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      text-align: center;
      background: #FFF;
      padding-bottom: constant(safe-area-inset-bottom);
      padding-bottom: env(safe-area-inset-bottom);
    }

    .btn {
      width: 100%;
      height: 50px;
      line-height: 50px;
      background-color: #00c340;
      border: none;
    }

  </style>
<div class="btn-container">
    <div class="btn"></div>
  </div>

在正常手机，按钮在底部，在iphonex，在安全区底部。

缺点bug：如果页面要内嵌在app里的话，iphonexr iphone8p手机在app里的系统标题会挡住页面顶部的一部分，设置了padding-top也没好使，应该是viewfits是cover导致的，无奈只能采取下面的方法。

另一种方法是通过媒体查询，这种方法局限在于如果ipx出了好多款，那么media不限制于以下一种

<html class="has-bottombar">
    <head></head>
    <body></body>
</html>
@media only screen and (-webkit-device-pixel-ratio: 3) and (device-height: 812px) and (device-width: 375px) {
  .has-bottombar {
    height: 100%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-bottom: 34px;
  }

  .has-bottombar:after {
    content: '';
    z-index: 9999;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 34px;
    background: #fff;
  }
}