cssfloat佈局以及其他小技巧

shannon發表於2019-02-16
CSS

css float 佈局以及其他小技巧總結

這篇博文 前面四個部分是關於css 經典佈局 如果你已經知道了 可以直接跳過看第六部分 css 的其他小技巧

1.0 左右居中佈局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .parent {
            border: 1px solid green;
            margin-left: auto;
            margin-right: auto;
            width:100%;
        }



        .child:nth-child(1) {
            width: 30%;
            background-color: pink;
            
        }

        .child:nth-child(2) {
            width: 70%;
            background-color: crimson;
        }

        .clearfix:after {
            content: "";
            display: block;
            clear: both;
        }

    </style>
</head>

<body>
    <div class="parent clearfix">
        <div class="child" style="float:left">
            a1
        </div>
        <div class="child" style="float:left">a2</div>
    </div>
</body>

</html>

2.0 左中右佈局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
       
        body,
        html {
            height: 100%;
            padding: 0;
            margin: 0
        }

       
        .left {
            background: lightblue;
            width: 100px;
            float: left;
            height: 10%;
        }

        
        .main {
            background: pink;
            height: 10%;
            margin: 0px 100px 0px 100px;
        }

       
        .right {
            background: lightgreen;
            width: 100px;
            float: right;
            height: 10%;
        }

    </style>
</head>

<body>
    <div class="left">Left</div>
    <div class="right">Right</div>
    <div class="main">Main</div>
</body>

</html>```

3.0 水平居中

 <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            border: 1px solid red;
            line-height: 24px;
            padding: 8px 0;
           
        }

    </style>
</head>

<body>
    <div>
    水平居中

    </div>

</body>

</html>

4.0 垂直居中 （兩種方法）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>垂直居中第一種方法table自帶</title>
    <style>
        .parent {
            border: 1px solid red;
            height: 600px;
        }

        .child {
            border: 1px solid green;
        }

    </style>
</head>

<body>
    <table class="parent">
        <tr>
            <td class="child">
                垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中
            </td>
        </tr>
    </table>
</body>

</html>```

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>垂直居中第二種方法marginautoabsolute</title>
    <style>
        .parent {
            height: 600px;
            border: 1px solid red;
            position: relative;
        }

        .child {
            border: 1px solid green;
            width: 300px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -150px;
            height: 100px;
            margin-top: -50px;
        }

    </style>
</head>

<body>
    <div class="parent">
    <div class="child">
                垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直
        </div>
    </div>
</body>

</html>

5.0 水平垂直居中

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            border: 1px solid red;
            line-height: 24px;
            padding: 8px 0;
            text-align: center;
        }

    </style>
</head>

<body>
    <div>
        水平垂直居中

    </div>

</body>

</html>

6.0 其他小技巧

6.1 css 有類似javascript 的console.log 的工具嗎？

//用border
div{
border: 1px solid red;
}

6.2 為什麼明明在數字1和2之間敲兩個空格 但是網頁顯示出來它們之間 只有一個空格 ？ 那是因為你沒有新增 &nbsp (no break space)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>你寫的bug</title>
</head>
<body>
    <div>
    1&nbsp;&nbsp;2
   </div>
</body>
</html>

6.3 為什麼只有一個阿拉伯數字且已經設定了 字型大小是20 px 但一旦開啟開發者工具：顯示的字型大小是 28px ？
因為每一種字型被設計時，為了【好看】設計師會給每一種字型一個好看係數 eg：預設的字型時pingfang 那麼28px /20px =1.4 這個1.4 就是【好看（字型）係數 】每一種字型都有自己的 【好看係數】
如果不想使用字型設計師給你的【好看係數】一定要用自己的 可以新增一行

line-height： 20px；

程式碼如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        div{
            border: 1px solid red;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div>
        1
    </div>
</body>
</html>

6.4 為什麼分別兩個span元素之間 看似什麼都沒有 但遊覽器 1 和 2 之間確有空隙 ？
  span元素 之間有tab 有回車等都會造成有空格的情況

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        span{
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div>
       <span>1</span>
       <span>2</span>
    </div>
</body>
</html>

6.5 塊級元素的高度怎麼確定？

    如果div 裡 只有一個內聯元素  那麼div 的高度是由這個內聯元素的行高所決定。
    如果div 裡有多行，那麼就把每一行的行高加起來算。

6.6 姓名怎麼和聯絡方式對齊 ？
    其他的方法：直接用&nbsp ？可以的，不過會受到字型的影響。字型一變， 加的&nbsp 就會變。
     程式碼解釋：程式碼如果是內聯元素要被改變寬度的話， 一定要先寫上display：inline-block 。

  text-align: justify; 當有多行字型時，這句話會讓強迫症看了之後 非（兩）常（邊）舒（對）心 （齊）。

    那只有一行的時候 怎麼對齊？看上去是多新增了一行。程式碼
     如下：
     

  span:after{
        content:"";
        display: inline-block;
        width: 100%;
        border: 1px solid pink;
    }
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>JS Bin</title>
</head>
<style>
    div {
        border: 1px solid red;
        font-size: 20px;
    }

    span {
        border: 1px solid green;
        display: inline-block;
        width: 4em;
        text-align: justify;
        line-height: 20px;
        height: 20px;
        overflow: hidden;
    }
   span:after{
        content:"";
        display: inline-block;
        width: 100%;
        border: 1px solid pink;
    }

</style>

<body>
    <div>
        <span>姓名</span><br>
        <span>聯絡方式</span>

    </div>
</body>

</html>

6.7 六個內聯元素 怎麼寫才能沒有空隙 ？

    新增 float：left 
             clearFix  

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        ul{
            margin:0; padding: 0; list-style: none;
        }
        
        ul > li{
            border: 1px solid red;
            float: left;
        }
        .clearfix :after{
            content: "";
            display:  block;
            clear: both;
        }
    </style>
</head>
<body>
 <ul class= "clearfix">
     <li>選項1</li>
     <li>選項2</li>
     <li>選項3</li>
     <li>選項4</li>
     <li>選項5</li>
     <li>選項6</li>
 </ul>
</body>
</html>

6.8 怎麼做 一行和多行文字過長變省略號？

//一行 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            border: 1px solid red;
         
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

    </style>
</head>

<body>
    <div>
        s d f d f d f s d f s d f d f s d f d f sd f s df d f s df d d f d f d f s d f d f d f d f d f d f d f df d f d f d f df d d s d s d s d s d s d s d s d s d s d s d s d s s d s d s d s d s d s d s d s sd s d s d s sd d v f ef e f e f e f ef ef e f ef e f ef e fe f e f e f e fe f ef e fe f
     </div>
</body>

</html>
// css multi line text ellipsis

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            border: 1px solid red;
            display: -webkit-box;
            -webkit-line-clamp:2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

    </style>
</head>

<body>
    <div>
        s d f d f d f s d f s d f d f s d f d f sd f s df d f s df d d f d f d f s d f d f d f d f d f d f d f df d f d f d f df d d s d s d s d s d s d s d s d s d s d s d s d s s d s d s d s d s d s d s d s sd s d s d s sd d v f ef e f e f e f ef ef e f ef e f ef e fe f e f e f e fe f ef e fe f
     </div>
</body>

</html>

6.9 什麼情況下margin 會合並以及怎麼修改使其正常化？

   如果父元素沒有什麼東西擋住子元素   那麼子元素的邊距就會父合併起來 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
          .son {
            border: 15px solid red;
            padding: 10px;
            margin: 10px;
            }

        .dad {
          outline: 1px solid green;
           margin: 15px;
          }

    </style>
</head>

<body>
    <div class="dad">
        <div class="son">
            111
        </div>
    </div>
</body>

怎麼修改 ：

第一種新增： 在父元素裡新增border -top 和 border – bottom ；
第二種新增： 同樣是在 父元素裡新增 padding-top

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body {
            border: 1px solid black;
        }

        .son {
            border: 15px solid yellow;
            padding: 10px;
            margin: 10px;
           }

        .dad {
            outline: 1px solid green;
            margin: 15px;
            border-top: 11px solid pink;
            border-bottom: 11px solid pink;
          }

    </style>
</head>

<body>
    <div class="dad">
        <div class="son">
            111
        </div>
    </div>
</body>

</html>

6.10 怎麼break out words？
新增一行程式碼： word-break: break-all;


<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>JS Bin</title>
</head>
<style>
    div {
        border: 1px solid red;
        word-break: break-all;
    }

</style>

<body>
    <div>
        1 apppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppple


    </div>
</body>

</html>

6.11 怎麼脫離文件流 ？
三種方法：

position：absolute；
float： left；
position：fixed；

相關文章