cssfloat佈局以及其餘小技巧

時間 2019-12-05

標籤 cssfloat 佈局以及其餘技巧简体版

原文原文鏈接

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

這篇博文前面四個部分是關於css 經典佈局若是你已經知道了能夠直接跳過看第六部分 css 的其餘小技巧javascript

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 的工具嗎？css

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

6.2 爲何明明在數字1和2之間敲兩個空格可是網頁顯示出來它們之間只有一個空格？那是由於你沒有添加 &nbsp (no break space)html

<!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 就是【好看（字體）係數】每一種字體都有本身的【好看係數】
若是不想使用字體設計師給你的【好看係數】必定要用本身的能夠添加一行java

line-height： 20px；

代碼以下web

<!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 有回車等都會形成有空格的狀況app

<!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 六個內聯元素怎麼寫才能沒有空隙？spa

添加 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；

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。