盒模型及盒模型应用

盒模型

box: 盒子，在每个元素在页面中都会生成一个矩形区域（盒子）

盒子类型：

1. 行盒，display等于inline的元素
2. 块盒，display等于block的元素

行盒在页面中不换行、块盒独占一行

display默认值为inline

浏览器默认样式表设置的块盒：容器元素、h1~h6、p

常见的行盒：span、a、img、video、audio

盒子的组成部分

1. 内容 content

   width、height，设置的是盒子内容的宽高

   内容部分通常叫做整个盒子的内容 context-box

2. 填充 padding

   盒子边框到盒子内容的距离

   padding-top、padding-right、padding-bottom、padding-left

   padding：简写属性

   padding：上 右 下 左

   填充区 + 内容区 = 填充盒 padding-box

3. 边框 border

   边框 = 边框样式 + 边框宽度 + 边框颜色

   边框样式： border-style
   边框宽度： border-width
   边框颜色： border-color

   边框+填充区+内容区 = 边框盒 border-box

4. 外边框 margin

   边框到其它盒子的距离

   margin-top、margin-left、margin-right、margin-bottom

   速写属性margin

盒模型应用

改变宽高范围

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

页面重构师：将psd文件（设计稿）制作为静态页面

衡量设计稿尺寸的时候，往往使用的是边框盒，但设置width和height，则设置的是内容盒

1. 精确计算
2. CSS3：box-sizing 盒子的大小自动计算

<div></div>

 div{
        width: 200px;
        height: 200px;
        background-color: #f00;
        box-sizing: border-box;
        padding-left:10px;
        border:6px solid #00f;
    }

改变背景覆盖范围

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

可以通过background-clip进行修改

div{
       width: 200px;
       height: 200px;
       background-color: #f00;
       border:20px dashed #00f;
       background-clip: content-box;
   }

溢出处理

overflow,控制内容溢出边框盒后的处理方式

断词规则

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

normal：普通。CJK字符(文字位置截断)，非CJK字符(单词位置截断)

break-all: 截断所有,所有字符都在文字处截断

keep-all: 保持所有,所有文字都在单词之间截断

空白处理

white-space: nowrap;

 ul li{
         border-bottom: 1px dashed #ccc;
         border-left: 3px solid #008c8c;
         line-height: 2;
         padding-left: 10px;
         width: 300px;
         margin: 1em 0;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
     }

<ul>
     <li>Lorem ipsum dolor sit amet.</li>
     <li>Eaque quae cupiditate velit eveniet.</li>
     <li>Delectus, nobis? Quibusdam, odit quidem.</li>
     <li>Dignissimos est ut amet corrupti?</li>
     <li>Labore eveniet atque quas nisi.</li>
     <li>Ut voluptates dicta fuga id!</li>
     <li>Optio voluptatem animi libero. Accusantium.</li>
     <li>In officia ducimus quam omnis!</li>
     <li>Voluptas similique animi ratione eaque.</li>
     <li>Eaque minima recusandae hic modi.</li>
 </ul>