0基础CSS超详细笔记 第三天

盒子模型

                盒子的组成:

                1. margin

                2.border

                                border-style:solid/dashed（虚线）/dotted(点状线)/等等

                                 

                                border-radius：50%（圆）

                        

                3. padding

                4.width&height(max-width,min-width)

盒子模型：（box-sizing：content-box/border-box）

                1. 内容盒子（标准盒子）

                2.边框盒子（ie盒子）

                

- 盒子模型注意点

1.如果两个盒子是嵌套关系, 那么设置了里面一个盒子(子元素)顶部的外边距, 外面一个盒子(父元素)也会被 顶下来。

原因

子元素和父元素上边框重合在一起。 ​ 因为父元素的第一个子元素的顶部外边距margin-top如果碰不到有效的border或者padding，就会不断 一层一层的找自己父元素的麻烦。只要给父元素设置一个有效的border或padding就可以有效的管制这个 margin-top，防止它越级，把自己的margin-top当成父元素的margin-top执行。

2.如果外面的盒子不想被一起顶下来,那么可以给外面的盒子添加一个边框属性。

3.在企业开发中, 一般情况下如果需要控制嵌套关系盒子之间的距离, 应该首先考虑padding, 其次再考虑 margin，margin本质上是用于控制兄弟关系之间的间隙的。

4.只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不 会合并。

5.在嵌套关系的盒子中, 我们可以利用margin: 0 auto;的方式来让里面的盒子在外面的盒子中水平居中 ​ margin:0 auto = margin:0 auto 0 auto，表示上下为0，左右为auto； ​ 6.margin: 0 auto; 只对水平方向有效, 对垂直方向无效

盒子背景样式

        background-color：

        background-image:url()————  注意补充：线性渐变背景色：linear-gradient（r，g，b）

        background-repeat:no-repeat/repeat-x/repeat-y

        background-attachment：scroll/fixed（关联方式，会不会随滚动条滚动）

        background-position:水平方向: left center right ​ 垂直方向: top center bottom/100px,100px

背景样式简写

        background：背景颜色 背景图片 平铺方式 关联方式 定位方式;

                注意补充：线性渐变背景色：