003-CSS盒子模型

盒子模型

一、图片盒子模型

• 注意:总的盒子大小是包括边框和内边距的，所以相应的内容要减少来保证大小一致 外边距不算

二、溢出属性

1.当文字溢出时，会超过盒子

overflow： visible默认溢出显示

overflow：hidden 隐藏溢出部分

overflow： scroll超过的部分会加滚动条

           auto 自动加滚动条

2.若想将多余的部分显示 ‘…’

- 1.write-space:nowrap 先使文字不折行 一行显示完成
- 2.overflow：hidden将多余部分隐藏
- 3.text-overflow：ellipsis
- 注意：要保证盒子是有宽度的 否则会无限显示在一行上

三、元素显示类型

1.块元素block（div p ul li ol li di dt dd h1-h6)

1. 是一个矩形区域，独占一行
2. 自上而下排列
3. 可以定义自己的宽高
4. 可以作为其他元素的容器

2.行内元素inline（a b em i span strong）

1. 默认横着排列，不独占一行
2. 不能设置宽高

3.行内块inline-block（input img）

• 当img（inline-block）和p（block）同时出现时会产生一个小缝隙 将行内块元素可以转换成块元素，这样两个块元素就可以合并在一起

​