盒模型應用

阿新 • • 發佈：2021-02-08

盒模型應用

改變寬高範圍

預設情況下，width 和 height設定的是內容盒寬高。

頁面重構師：將psd檔案（設計稿）製作為靜態頁面。

衡量設計稿尺寸的時候，往往使用的是邊框盒，但設定width和height，則設定的是內容盒。

1.精確計算
2.CSS3:box-sizing

<style>
    div
    {
        width: 236px;
        height: 51px;
        color: #a7a7a7;
        background-color: #2d2e36;
        line-height: 51px;
        /* 單行文字垂直居中寬度和高度一致 */ 

        padding-left: 46px;
        border: 3px solid red;
        /*邊框寬度自己計算  */
        box-sizing:border-box; 
    }
    
    <div>
        頁遊中心
    </div>
</style>

改變背景覆蓋範圍

預設情況下，背景覆蓋邊框盒
可以通過background-clip進行修改

<style>
        div{
            width: 100px;
            height: 
 100px;
            background: #000;
            border: 7px dashed red;
            padding: 30px;
            background-clip: content-box;
        }
    </style>
    <div>
        dmwmd
    </div>

溢位處理

overflow，控制內容溢位邊框盒後的處理方式

 <style>
        div{
            border: 4px solid; 

            padding: 20px;
            width:300px;
            height: 200px;
            overflow: auto;
            background-clip: border-box;
        }
    </style>
</head>
<body>
  <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quam at corporis animi cupiditate quidem iusto nemo quasi temporibus distinctio facere illo eligendi debitis libero dolore aut, ipsam ratione. Ipsum earum eveniet modi beatae exercitationem doloribus impedit ad dolores eius corrupti delectus dolorem perspiciatis maiores sunt a iste illo, incidunt excepturi vero possimus quod aut eos accusantium. Aperiam officiis soluta inventore animi harum nemo, in, assumenda incidunt, mollitia magni alias numquam eos nostrum unde nulla rerum adipisci vero quod enim eveniet ullam corporis facilis dolorum. Dignissimos rerum mollitia voluptate in aspernatur.</div>
</body>
</html>

斷詞規則

word-break：會影響文字在什麼為止被截斷換行
normal：普通。CJK字元（中國日本韓國文字位置階段），非CJK字元（單詞位置截斷）
break-all：截斷所有。所有字元都在文字處截斷。（中文不變）
keep-all：保持所有。所有文字都在單詞之間截斷。（英文不變）

空白處理

white-space:nowrap

<style>
    li{
      border-bottom:1px dashed #ccc ;
      line-height: 2;
      border-left: 3px solid #008c8c;
      padding-left: 10px;
      margin: 1em 0;
      width: 200px;
      white-space: nowrap;
      /* 空白摺疊仍會發生，但不換行 */
      /* pre會發生會換行 */
      overflow: hidden;
      /* 多出來隱藏 */
      text-overflow: ellipsis;
      /* 文字溢位，只能控制單行文字 */
    }
</style>
<body>
<ul>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Architecto nesciunt recusandae fuga similique?</li>
    <li>Quos omnis possimus velit autem!</li>
    <li>Pariatur odit placeat sunt maiores?</li>
    <li>Ducimus consectetur veniam accusantium eum.</li>
    <li>Ab a eaque nihil? Esse.</li>
    <li>Vel nam a quia similique!</li>
    <li>Modi suscipit dolores sequi nulla.</li>
    <li>Facere ratione vero iure dolorum!</li>
    <li>Minus sint commodi enim et.</li>
</ul>
</body>
</html>