CSS学习笔记（三）：盒子模型

盒子模型

在css语言中有padding、margin、border属性来调整三个区域的宽度，border的类型样式等内容

• 设置内边距左右宽度auto，会造成居中效果
• 同时设定上下外边距时会触发边距合并，获取两者最大值。
• 盒子的大小是(height+padding+border+margin)*(width+padding+border+margin)
• box-sizing:border-box盒子永远大小是长乘宽

边框风格

用border-style设定边框风格，可以单独设定一个边

属性值	说明
none	无边框
dotted	点状边框，大多数浏览器显示实线
solid	实线
double	双线，宽度等于border-width
groove	定义3D凹槽，border-color确定颜色
ridge	3d垄状边框
inset	3d inset边框
outset	3d outset边框

圆角边框

border-radius设定圆角程度，属性值为px/%。
可以通过上述属性设定样式

轮廓线

outline设定轮廓线，轮廓线不占据空间，属性值：类型 宽度 颜色

元素的显示与隐藏

display属性控制下是隐藏与显示的模式。

属性值	说明
none	隐藏
block	让元素按照块的形式显示
inline-block	行级块
inline	行级文本，无法定义宽高

ps：cursor设置手形pointer

visibility控制隐藏

display控制隐藏会导致空间丢失，visibility：hidden则会保留空间

内容溢出问题处理

一种方法是隐藏溢出部分，第二节文字处理中提到过。当我们需要完整的文本内容时，可以添加overflow：scroll滑动条

属性值	说明
scroll	设置滚动条
auto	如果装得下就没有滚动条，装不下就有
hidden	溢出部分消失，例如网站首页滚动的图片，设定了显示区域，用js脚本控制图片移动

text-overflow：ellipsis文本省略

尺寸控制

min-width、max-width、min-height、max-height设置最大最小长宽

• fill-available属性，自动充满空白
• fit-content根据内容填充，填充部分包括内边距所占的空间
• max-content/min-content当多个元素排列时，按照最大/小的进行填充