css的經典問題

zhiwei 發布于2019-08-23 12:16 / 1298人閱讀

摘要：最外層的是必須的，是的百分比參考物。網上其他的文章需要給和加，試了下不加也可以。缺點如果頁面要內嵌在里的話，手機在里的系統標題會擋住頁面頂部的一部分，設置了也沒好使，應該是是導致的，無奈只能采取下面的方法。

布局問題 水平垂直居中

.box父元素，.innerbox子元素


     css設置元素水平垂直居中4顯示

1,子元素不要求寬高

.box{
    width: 400px; 
    height: 200px; 
    border: 5px solid #ffffd; 
    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 #ffffd; 
    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 #ffffd; 
    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 #ffffd; 
    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;
}

     我愛你

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

     
          列表一

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

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

//tip1
.left{
    float: left;
    width: 100px;
}
.right{
    margin-left: 120px;
}
34343434
22222

//tip2
.left{
    float: left;
    width: 100px;
    margin-right: 20px;
}
.right{
    overflow: hidden;
}
34343434
22222
//tip3
.parent{
    display: table; 
    width: 100%;
    table-layout: fixed;
}
.left,.right{
    display: table-cell;
}
.left{
    width: 100px;
    padding-right: 20px;
}

   34343434
   22222

//tip4
.parent{
    display: flex;
}
.left{
    width: 100px;
    padding-right: 20px;
}
.right{
    flex: 1;
}

   34343434
   22222

一列或多列不定寬，一列自適應

//tip1
.left,.center{
    float: left;
    margin-right: 20px;
}
.right{
    overflow: hidden;
}
34343434
34343434
22222
//tip2
.parent{
    display: table; 
    width: 100%;
}
.left,.right{
    display: table-cell;
}
.left{
    width: 0.1%;
    padding-right: 20px;
}

   34343434
   22222

//tip3
.parent{
    display: flex;
}
.left,.center{
    width: 100px;
    padding-right: 20px;
}
.right{
    flex: 1;
}

   34343434
   34343434
   22222

等分

1,等寬

//tip1
.parent{
    margin-left: -20px;
}
.column{
    float: left;
    width: 25%;
    padding-left: 20px;
    box-sizing: border-box;
}

     1
     2
     3
     4

//tip2
.parent-fix{
    margin-left: -20px;
}
.parent{
    display: table;
    width:100%;
    table-layout: fixed;
}
.column{
    display: table-cell;
    padding-left: 20px;
}

  
     1
     2
     3
     4

//tip3



    item1
    item2
    item3
    item1
    item2

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

            1
            2
            3
            4
            em
            em

就是要求多個元素并排排列，多出來的居左，empty的數量不小于單行最多元素的數量即可。試了下不加empty元素也可以達到呢。

2，等高

//tip1
.parent{
    overflow: hidden;
}
.left,.right{
    padding-bottom: 9999px;
    margin-bottom: -9999px;
}
.left{
    float: left; width: 100px;
}
.right{
    overflow: hidden;
}

            34343434
        
            2323
            
        
        
  //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;}



    main
    left
    right

雙飛翼布局（圣杯布局的不足屏幕窄時 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;}

    
        main
    
    left
    right

容易忘記的樣式

::-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定位


  Error
  



  
  這是一個可以滾動的div

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像素）

viewport-fit必須為cover 否則constant和env不生效
viewport-fit 有3個值：
contain: 可視窗口完全包含網頁內容（左圖）
cover：網頁內容完全覆蓋可視窗口（右圖）
auto：默認值，跟 contain 表現一致

底部有按鈕fixed頁面實例

在正常手機，按鈕在底部，在iphonex，在安全區底部。

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

另一種方法是通過媒體查詢，這種方法局限在于如果ipx出了好多款，那么media不限制于以下一種


    
    

@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;
  }
}

云服務器 GPU云服務器 html與css入門經典經典的學習算法的經典經典網絡的特點

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/98234.html

CSS 布局經典問題初步整理

摘要：布局經典問題初步整理標簽前端本文主要對布局中常見的經典問題進行簡單說明，并提供相關解決方案的參考鏈接，涉及到三欄式布局，負，清除浮動，居中布局，響應式設計，布局，等等。 CSS 布局經典問題初步整理標簽：前端 [TOC] 本文主要對 CSS 布局中常見的經典問題進行簡單說明，并提供相關解決方案的參考鏈接，涉及到三欄式布局，負 margin，清除浮動，居中布局，響應式設計，Fl...

Amos 2019-08-29 12:36 評論0 收藏0
Web前端經典面試試題（二）

摘要：上次由于時間有限只分享了一部分的前端面試題，所以本篇繼續分享前端經典面試試題一棧和隊列的區別棧的插入和刪除操作都是在一端進行的，而隊列的操作卻是在兩端進行的。上次由于時間有限只分享了一部分的前端面試題，所以本篇繼續分享前端經典面試試題一. 棧和隊列的區別? 棧的插入和刪除操作都是在一端進行的，而隊列的操作卻是在兩端進行的。隊列先進先出，棧先進后出。棧只允許在表尾一端進行插入和刪...

rickchen 2019-08-29 17:04 評論0 收藏0
Web前端經典面試試題（二）

摘要：上次由于時間有限只分享了一部分的前端面試題，所以本篇繼續分享前端經典面試試題一棧和隊列的區別棧的插入和刪除操作都是在一端進行的，而隊列的操作卻是在兩端進行的。上次由于時間有限只分享了一部分的前端面試題，所以本篇繼續分享前端經典面試試題一. 棧和隊列的區別? 棧的插入和刪除操作都是在一端進行的，而隊列的操作卻是在兩端進行的。隊列先進先出，棧先進后出。棧只允許在表尾一端進行插入和刪...

venmos 2019-08-02 11:47 評論0 收藏0
Web前端經典面試試題（二）

摘要：上次由于時間有限只分享了一部分的前端面試題，所以本篇繼續分享前端經典面試試題一棧和隊列的區別棧的插入和刪除操作都是在一端進行的，而隊列的操作卻是在兩端進行的。上次由于時間有限只分享了一部分的前端面試題，所以本篇繼續分享前端經典面試試題一. 棧和隊列的區別? 棧的插入和刪除操作都是在一端進行的，而隊列的操作卻是在兩端進行的。隊列先進先出，棧先進后出。棧只允許在表尾一端進行插入和刪...

Kross 2019-08-23 12:30 評論0 收藏0
HTML-CSS

摘要：但是，從字體上來說雪碧圖制作，使用以及相關，圖文。由于采用了編譯，所以能夠保證在瀏覽器不支持標準布局的情況下，回滾到舊版本的，保證移動設備中能呈現出一樣的布局效果。我不想陷入和的紛爭，但是有一件事是確定的極大的提升了移動端一勞永逸的搞定 flex 布局尋根溯源話布局一切都始于這樣一個問題：怎樣通過 CSS 簡單而優雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候，看到 ...

xiaokai 2019-08-01 18:21 評論0 收藏0