CSS盒子模型及其属性

网页网页设计中常听的属性名：内容(content)、内边距(padding)、边框(border)、外边距(margin)， CSS盒子模型都具备这些属性。这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模型。CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。

 其中，内容到边框的距离称为内边距（padding），边框以外的距离称为外边距(margin)

常用属性

                边框（border）

                        border-style——边框样式，可以通过border-top(right,bottom,left)-style来设置，也可以用border-style按照由top开始顺时针方向，一次性来设置不同方向的边框样式

                        属性

                        none：无边框   

                        solid：实线边框

                        dashed：虚线边框 

                        dotted：点状边框

                        double：双线边框

                        hidden：与none相同

                        border-color——边框颜色，可以通过border-top(right,bottom,left)-color来设置，也可以用border-color按照由top开始顺时针方向，一次性来设置不同方向的边框颜色

                        属性：十六进制值；rgb值；英语单词

                        border-widt——边框粗细，可以通过border-top(right,bottom,left)-widt来设置，也可以用border-widt按照由top开始顺时针方向，一次性来设置不同方向的边框粗细

                        radius ——弧度，可以用百分比或者px像素点表示值

                内边距(padding）

                        padding-top(right,bottom,left)来设置,也可以用padding按照由top开始顺时针方向，一次性来设置不同方向的内边距，也可以使用两个值，分别表示上下和左右的边距值，或者用一个值表示所有方向的边距值

                外边距（margin）

                                和内边距相同margin-top(right,bottom,left)等

                box-sizing属性
                            content-box 默认值      设置外边距时会撑开盒子，影响其他元素，盒子的实际宽度和高度仅应用于元素内容，不包括内边距和边框
            border-box  不会撑开盒子
                盒子的实际高度和宽度包括元素内容、边框和内边距