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

                        margin-left

                        margin-right

                    - 如果某个值为auto，则会自动调整为auto的那个值以使等式成立

                    - 宽度和外边距为auto，宽度会调整最大，设置为auto的外边距会变成0

                    - 如果两个外边距设置为auto 宽度固定值，则会将外边距设置为相同的支持

                        所以我们经常利用这一点来使一个元素在其父元素中水平居中

                        示例：

                            width：xxxpx;

                            margin: 0 auto;

子元素是在父元素的内容区中排列

                如果子元素的大小超过了父元素，则子元素会在父元素中溢出

                使用 overflow 属性来设置父元素如何处理溢出的子元素

                可选值：

                visible：默认值 子元素会从父元素中溢出，在父元素的外部的位置显示出来

                hidden：溢出内容将会会裁剪不会显示

                scroll：生成两个滚动条，通过滚动条来查看完整的内容

                auto：根据需要生成滚动条</