盒子的大小(width,height)
宽度限制(min-width,max-width)
高度限制(min-height,max-height)
内容溢出(overflow):
hidden:直接把溢出盒子空间内容隐藏
scroll:会在盒子上添加一个滚动条,方便用户通过滚动滑块来查询其余内容
边框、外边距和内边距
1.边框(border)
2.外边距(margin)
3.内边距(padding)
边框宽度(border-width)(top,right,bottom,left)
thin、medium、thick
边框样式(border-style)(top,right,bottom,left)
solid:一条实线
dotted:一串方形点
dashed:一条虚线
double:两条实线
groove:雕入页面
ridge:在页面上凸起的效果
inset:嵌入页面的效果
outside:凸出屏幕
hidden/none:不显示任何边框
边框颜色(border-color)
可以直接写入十六进制,也可以上,右,下,左分别用十六进制写入
快捷方式(border)
指定边框的宽度、样式和颜色
内边距(padding)(上,右,下,左)
外边距(margin)(上,右,下,左)
内容居中:如果想让一个盒子在页面上居中显示,可以将left-margin和right-margin属性值设置为auto;还可以text-align:center
内联元素与块级元素的转换(display)
inline、block、inline-block、none
盒子的隐藏(visibility)
hidden、visible
边框图像(border-image)
三种信息:(1)图片的URL(2)切割图片的位置(3)如何处理直边:stretch(伸展图片)、repeat(重复图片)、round(类似repeat)
盒子的投影(box-shadow)
(inset内部阴影)水平偏移、垂直偏移、模糊距离、阴影扩展
圆角(border-radius)(左上,左下,右下,右上)