CSS盒子模型总结（小练习网易新闻列表和京东导航条）

css盒子模型

 

边框（border）

1.  边框的宽度 border-width
2.  边框的颜色 border-color
3.  边框的样式 border-style           

  border-width 默认值为3px     

  可以用来指定四个方向的宽度

 值得情况

•                             四个值：上、右、下、左
•                             三个值：上、左右、下
•                             两个值：上下、左右
•                             一个值：上下左右            

border-xxx-width

xxx可以是top right bottom left

用来单独指定某一个边的宽度

color style同样

border-style

                soild 实线

                dotted 点状虚线

                dashed 虚线

                double 双线

简写 border 1px soild red设置1像素红色边框 为实线

内边距（padding）

            - 内容区和边框之间的距离是内边距

            - 也是四个方向

                top、right、bottom、left

            - 内边距的设置会影响到盒子的大小

            - 背景颜色会延伸到内边距

            盒子的可见框的大小，由内容区、内边距 和 边框共同决定

            所以在计算盒子大小时，需要将这三个区域加到一起计算

外边距（margin）

                外边距会影响盒子的位置

                margin-top 元素向下移动

                margin-left 元素向右移动

                margin-bottom 其下边的元素会向下移动

                元素在页面中是按照自左向右的顺序排列

一个元素在其父元素中，水平布局要满足一下的等式

margin-left+border-left+padding+width+padding-right+border-right+margin-right = 其父元素内容的宽度  （必须满足）

以上等式必须满足，如果相加结果使等式不成立，则称为过渡约束，则等式会自动调整

            调整情况：

                    - 如果7个值没有为 auto 的情况，则浏览器会自动调整margin-right值使等式成立

                    - 这七个值中有三个值可设置为auto

                        width

                  &nb