CSS盒模型应用-改变宽高范围-溢出处理-断词规则-空白处理

盒模型应用

改变宽高范围

默认情况下,width和height 设置的是内容盒宽高

页面重构师:将psd文件(设计稿)制作为静态网页

我们在测量某一网页的宽高都是测量的是边框盒,然而实际设置的width、height是内容盒的宽高
解决方案:

  1. 精确计算(上古时代做法)
  2. 利用CSS3解决(现行做法)
    box-sizing:content-box
    box-sizing:border-box
    在以前默认的元素设置是内容盒,在CSS3中将box-sizing设置为边框盒即可

改变背景覆盖范围

默认情况下背景覆盖边框盒

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>背景覆盖边框盒Demo</title>
    <style>
      div {
        width: 200px;
        height: 200px;
        border: 10px dashed red;
        background-color: lightblue;
      }
    </style>
  </head>
  <body>
    <div>Lorem, ipsum dolor.</div>
  </body>
</html>

背景覆盖边框盒Demo的截图
修改背景覆盖边框盒:
只需要将background-clip修改为您想要的盒模型类型即可

/*background-clip取值:*/
background-clip:border-box;/*(默认,背景覆盖边框盒)*/
background-clip:content-box;/*背景只覆盖内容盒*/
background-clip:padding-box;/*背景只覆填充盒*/

溢出处理

overflow,控制内容溢出边框盒后的处理方式
overflow默认值:visible; (可见的)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .solveOverflow {
        border: 3px solid green;
        width: 300px;
        height: 100px;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <div class="solveOverflow">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus sit
      harum pariatur reprehenderit, voluptate totam earum magni alias adipisci
      eius soluta doloremque in placeat? Magni officiis recusandae doloribus
      error aut?
    </div>
  </body>
</html>
overflow设置为visible和hidden的区别

默认的overflow
overflow设置为hidden后

overflow的其他取值

overflow:scroll;/*出现滚动条,这是一个速写属性,拆开为overflow-x:scroll;overflow-y:scroll;*/
overflow:auto;/*需要滚动条就出现,不需要就隐藏*/

断词规则

word-break,会影响文字在什么位置被截断换行

normal:普通方式 CJK字符(中国,日本,韩国文字位置截断),非CJK字符(单词位置截断)
break-all:截断所有。所有字符都在文字出截断
keep-all:保持所有。所有文字都在单词之间截断(英文与break-all显示一致,中文会一直显示直到遇到空格)

空白处理

设置三个属性即可(仅能处理单行文本,多行文本使用js处理)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>空白处理</title>
    <style>
      ul li{
          border-bottom: 1px dashed #000;
          line-height: 2;
          border-left: 3px solid #008c8c;
          padding-left: 10px;
          margin: 1em 0;
          width: 200px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }
    </style>
  </head>
  <body>
    <ul>
        <li>Lorem ipsum dolor sit.</li>
        <li>Minima rem quos aut.</li>
        <li>Reprehenderit ut amet explicabo.</li>
        <li>Inventore dolores adipisci vel.</li>
        <li>Aliquam voluptates est sit?</li>
        <li>Ullam perspiciatis mollitia iste.</li>
        <li>Reiciendis reprehenderit corporis aliquam.</li>
        <li>Iusto recusandae cumque autem!</li>
    </ul>
  </body>
</html>

单行文本 溢出部分使用...代替
不进行空白折叠的元素pre

<pre>
var i = 1;
alert("a你好");
</pre>

pre默认css

pre {
    display: block;
    font-family: monospace;
    white-space: pre;
    margin: 1em 0px;
}

空白折叠仍然会发生但是不会换行

white-sapce:nowrap;

如果您发现文章中有不妥之处请与我联系,我将感激不尽
转载著明:sayc.cc 菠萝吹雪的博客

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×