Xmind鸟瞰图:
简单文字总结:
css知识:
边框线:
1.border-width:边框的粗细
2.border-style:边框线的样式(solid实线,double双实线,dotted点线,dashed虚线)
3.border-color:边框线的颜色
4.简写形式:border:粗细 样式 颜色
5.单独指定每个边框线的样式:border-top(left,right,bottom)
边框圆角:
1.border-radius:值可以是固定的也可以是百分比(100%为圆)
2.不设置边框也可以设置边框圆角,它们两个之间没有直接的联系
3.可以单独指定每个边框的圆角:border-radius:上 右 下 左
内边距:
1.边框线到内容之间的距离
2.内边距会改变盒子的大小
3.盒子的大小=内容+内边距+边框线
4.简写形式:padding:上 右 下 左
5.改变内容在盒子中的位置
6.在不改变盒子大小的前提下,只能改变内容的大小
外边距:
1.盒子与盒子之间的距离
2.不会影响盒子的大小,只会影响盒子的位置
3.简写形式:margin:上 右 下 左
4.外边距会占据页面的位置
5.auto可以使盒子水平居中,但不能垂直居中,因为没有垂直方向的外边距
6.解决外边距塌陷:在盒子上方添加上边框或上内边距
解决溢出部分:
1.auto超出部分显示滚动条
2.hidden超出部分隐藏
3.scroll不管超出不超出都显示滚动条