HTML5——CSS学习笔记（5）盒模型及文本溢出

快来打我* 2022-12-11 04:24 167阅读 0赞

## **盒模型** ##

> **盒模型**是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间。即都包含内容区、补白（填充）、边框、边界(外边距)这就是盒模型。

![336ce905b2f43a8f167ad84560f19d5a.png][]

![a4809409085acf2813fdf3e36067c9d6.png][]

**PADDING**

![44b2c8fae8ffc5a44184dd075b625b4c.png][]

**MARGIN**

![ece8fe7720f876e1843fac480b7eb3b7.png][]

**盒子大小计算**

![4e944a5a33ff7cadd90dcae4b6248289.png][]

![7d3e26179f5f644124dbcbb18450821b.png][]

## **文本溢出** ##

### **overflow** ###

> visible:默认值，内容不会被修剪，会呈现在元素框之外；  
> hidden：内容会被修剪，并且其余内容是不可见的；  
> scroll：内容会被修剪，但是浏览器会显示滚动条，以便查看其余的内容;  
> auto：如果内容被修剪，则浏览器会显示滚动条，以便查看其他的内容;  
> inherit：规定应该从父元素继承overflow属性的值。

### **white-space** ###

> normal：默认值，多余空白会被浏览器忽略只保留一个；  
> pre：空白会被浏览器保留；  
> pre-wrap：保留一部分空白符序列，但是正常的进行换行；  
> pre-line:合并空白符序列，但是保留换行符；  
> nowrap:文本不会换行，文本会在同一行上继续，直到遇到<br/>标签为止;

### **text-overflow** ###

> clip：不显示省略号（...），而是简单的裁切;  
> ellipsis：当对象内文本溢出时，显示省略标记；

### **文本溢出变省略号设置** ###

> 省略号设置：  
> text-overflow属性仅是：当文本溢出时是否显示省略标记，并不具备其它的样式属性定义，要实现溢出时产生省略号的效果还需定义：  
> 1、容器宽度：width：value；（px、%，都可以）  
> 2、强制文本在一行内显示:white-space：nowrap;  
> 3、溢出内容为隐藏：overflow：hidden；  
> 4、溢出文本显示省略号：  
> text-overflow：ellipsis;  
>   
> 注：必须是单行文本才能设置本文溢出！！！

[336ce905b2f43a8f167ad84560f19d5a.png]: /images/20221123/bd6965bf693946b293a218a1a34699c5.png
[a4809409085acf2813fdf3e36067c9d6.png]: /images/20221123/2f9933e74f0540ddb191e5751658a2b4.png
[44b2c8fae8ffc5a44184dd075b625b4c.png]: /images/20221123/106cd3559ba74136b30000f6ca74bf5d.png
[ece8fe7720f876e1843fac480b7eb3b7.png]: /images/20221123/4fd37979e41f4dc5b0e0995c9346ecf3.png
[4e944a5a33ff7cadd90dcae4b6248289.png]: /images/20221123/42df533f814c4ef0bf9aef7f445c0870.png
[7d3e26179f5f644124dbcbb18450821b.png]: /images/20221123/fdd3610bbc55433dbe68467667b1567d.png