css的經典問題

時間  2019-12-06
標籤 css 經典 問題 欄目 CSS 简体版
原文   原文鏈接

佈局問題

水平垂直居中

.box父元素，.innerbox子元素css

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

1,子元素不要求寬高html

.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%);
}

2,web

.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
}

3,spring

.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，試了下不加也能夠。app

#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-aligndom

一列或多列定寬，另外一列自適應

//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,等寬iphone

//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>

//tip3ide

<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
效果圖

clipboard.png

.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的劉海鬍子兼容

clipboard.png
網頁的內容只在安全區域內，不但願有元素出現的劉海鬍子處。

/* 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 表現一致

clipboard.png

底部有按鈕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，在安全區底部。

clipboard.png

clipboard.png

clipboard.png

缺點bug：若是頁面要內嵌在app裏的話，iphonexr iphone8p手機在app裏的系統標題會擋住頁面頂部的一部分，設置了padding-top也沒好使，應該是viewfits是cover致使的，無奈只能採起下面的方法。

clipboard.png

另外一種方法是經過媒體查詢，這種方法侷限在於若是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;
  }
}
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程