盒模型及盒模型应用

「爱情、让人受尽委屈。」 2023-02-19 11:23 28阅读 0赞

### 文章目录 ###

*  盒模型
 *   *  盒子的组成部分
 *  盒模型应用
 *   *  改变宽高范围
     *  改变背景覆盖范围
     *  溢出处理
     *  断词规则
     *  空白处理

# 盒模型 #

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{ 
            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>