学习随笔——CSS盒模型属性——2020.11.9

1. border属性：
2. border四要素：边框方位，边框样式，边框宽度，边框颜色
3. 边框方位：
4. 上边框：border-top
5. 下边框：border-bottom
6. 左边框：border-left
7. 右边框：border-right
8. 四边框：border
9. 边框样式border-style
10. 如果没有设置这个属性，所有的边框效果不显示
11. dotted 点状线
12. dashed 虚线
13. solid 实线
14. 边框宽度border-width
15. border-wodth 像素值
16. border-位置-width 上右下左
17. 边框颜色border-color
18. border-color 颜色常量/十六进制代码
19. border样式的复合简写
20. border-width 单独设置边框的宽度
21. border-style 单独设置边框的样式
22. border-color 单独设置边框的颜色
23. border 样式 宽度 颜色
24. border-方位 样式 宽度 颜色
25. margin属性：
26. 外边距属性——外边距margin
27. 在边框以外的空白区域，被称为边距，用来调整并列元素间的位置关系
28. margin 像素值（四个边距）
29. margin 像素值（上下） 像素值（左右）
30. margin 像素值（上） 像素值（左右） 像素值（下）
31. margin 像素值（上） 像素值（右） 像素值（下） 像素值（左）
32. 上边距：margin-top 当前元素往下移
33. 右边距：margin-right 下一个元素向右移动
34. 下边距：margin-bottom 下一个元素向下移
35. 左边距：margin-left 当前元素向右移
36. 可以为负值，可以设置为auto
37. 说明：margin：0 auto;表示该元素在浏览器水平位置居中
38. margin合并（外边距合并）
39. 外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距
40. 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者
41. 只有普通文档流中块框的垂直外边距才会发生外边距合并
42. 行内框，浮动框或绝对定位之间的外边距不会合并
43. padding属性
44. 在元素内容与边框之间的空白区域，也叫补白
45. 用来调整内容物在容器中的位置关系
46. 用来调整子元素在父元素中的位置关系
47. padding属性需要添加在父元素上
48. ————————————————————————————————
49. padding 像素值（四个填充）
50. padding 像素值（上下） 像素值（左右）
51. padding 像素值（上） 像素值（左右） 像素值（下）
52. padding 像素值（上） 像素值（右） 像素值（下） 像素值（左）
53. ————————————————————————————————
54. 内容与边框之间的距离————
55. 上填充：padding-top
56. 下填充：padding-bottom
57. 左填充：padding-left
58. 右填充：padding-right
59. 不允许负值，不可以设置auto
60. 备注：边框属性————
61. Div实际宽度=左外边距+左边框粗度+左填充距离+内容物宽度+右填充距离+右边框粗度+右外边距
62. Div实际高度=上外边距+上外边框粗度+上内填充距离+内容物高度+下内填充距离+下边框粗度+下外边距
63. width,height属性
64. 宽度width:像素值/百分比
65. 高度height:像素值/百分比
66. 用来设置块元素，直接对行内元素设置高度没有作用
67. 盒模型的display属性（盒模型类型）
68. 盒模型的类型————
69. 块状盒模型（block）,行内盒模型（内联盒模型inline）,行内块状盒模型（inline-block）
70. block块状元素：块状元素的宽度为100%，而且后面隐藏附带有换行符，使块状元素始终占据一行
71. 常用块级元素————
72. div
73. p,hr,h1-h6
74. ul,ol,dl
75. li,dt,dd
76. form
77. table
78. inline行内元素（内联元素）：内联元素也呈矩形形状，它的高和宽由它的内容所确定，定义它的width和height属性无效
79. 多个内联元素可以同一行显示
80. 常用行内元素————
81. span，label
82. img,a,br
83. input,button,select,textarea
84. em,b,strong,i,sup,sub
85. 盒模型的类型转换————
86. 盒子模型可通过display属性来改变默认的显示类型
87. display属性w3c制定了共有18个属性值，但是大多浏览器无法识别
88. 需要掌握————
89. block块状显示方式：在元素后面添加换行符，也就是说其他元素不能在其后面并列显示
90. inline行内显示方式：在元素后面删除换行符，多个元素可以在一行内并列显示
91. inline-block行内块状显示方式：元素具有块状元素的特征，但是不独占一行，又具有行内元素的特征