CSS入门篇基础总结（二）

盒子模型（box model）

方便布局

Border 边框 三样式：颜色、大小、样式

Border-color :设置边框颜色 默认值黑色，可多个颜色，以空格隔开

Border-width :设置边框大小 默认值1—3px，可多值，以空格隔开

Border-style :设置边框样式 默认值 none，以空格隔开

Solid实线、double双线、dashed虚线、dotted点状虚线

Padding 内边距：内容区和边框之间的距离

Padding-top、right、bottom、left：

Padding：xxx； 简写，可多值，以空格隔开

盒子模型-外边距

Margin 外边距：当前盒子与其他盒子之间的距离，用于确定盒子的距离

Margin-top（正下负上）、right（默认情况没效果）、bottom（正下负上）、left（正右左负）

Hover

简单说一说什么是过度约束，如何调整 
浏览器规定：

   水平方向的七个值相加必须等于其父元素内容区的宽度，如果不等于，

   那么浏览器就会自动调整七个值中的某值，让其成立，这就叫过度约束。

水平方向有七个值为：

margin-left+border-left+padding-left+width+padding-right +border-right+ margin-right

如何调整：

     1、七个值中如果没有auto，那么浏览器默认调整的是margin-right

     10+10+20+100+20+10+ 430 ==600

     2、七个值中如果有auto，则浏览器就会调整auto

       可以设置auto大小的属性，是margin-left  width  margin-right  

       (1)1个auto，谁是auto，浏览器就调整谁

      （2）2个auto

          margin-left  width auto   margin-right固定值  调整width

          width  margin-right  auto   margin-left固定值  调整width

          margin-left  margin-right  auto   width 固定值  左右外边距平分，盒子会居中显示

      （3）3个auto

      margin-left  width  margin-right  调整width  

 总结：

        浏览器调整

           width>margin

元素的水平方向的布局
       元素在其父元素中水平方向的位置由一下几个属性共同决定

    margin-left border-left padding-left width  padding-right  border-right margin-right

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

    margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

        =父元素内容区的宽度（必须满足）

    举例：子元素 inner七个元素的值如下

       0 +0 + 0+ 200 + 0 + 0 + 0 =600  ？？不成立

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

       -调整的情况

          1:如果七个值中没有auto情况，则浏览器会调整margin-right值以使等式满足

              0 +0 + 0+ 200 + 0 + 0 + 400 =600

          2:这7个值中width，margin-left，margin-right，这三个值可以设置auto

            如果有设置auto，则浏览器会自动调整auto的值，以使等式成立

            0 +0 + 0+ auto + 0 + 0 + 0 =600   auto=600

            0 +0 + 0+ auto + 0 + 0 + 200 =600   auto=400

          3:如果将一个宽度和一个外边距设置为auto，则宽度会调整到最大

          4:如果三个值都是auto，也只会调整宽度

          5:如果将两个外边距设为auto，宽度固定，则两侧外边距会设置为相同的值

              会使元素自动在父元素中居中，所以我们经常将左右外边距设置为auto  
 

 垂直布局：
默认情况下，块元素宽高是被内容撑开的，如果自定义，那就听你设置的宽高

         如果父元素宽高设置，小于内容区，则内容就会溢出

         overflow属性设置

            可选值：

              visible  默认值  内容正常显示

              hidden   裁剪多余的内容

              scroll   生成双侧的滚动条

              auto     按实际情况生成滚动条

          overflow-x: ; 单独设置水平方向的溢出内容

          overflow-y: ; 单独设置垂直方向的溢出内容

盒子大小：
默认情况下：盒子可见宽的大小由内容区，内边距，边框共同决定

            box-sizing  用来设置盒子尺寸的计算方式 width/height 指的是谁

                可选值：

                    content-box 内容区 默认值

                    border-box  宽度和高度用来设置整个盒子可见框的大小，包括边框，padding，内容区
 

阴影与圆角

知识点1:

          box-shadow

             用来设置元素的阴影效果，不会影响到页面布局

                第一个值：水平偏移量  正->左  负->右

                第二个值：垂直偏移量  正->下  负->上

                第三个值：模糊半径

                第四个值：颜色    默认是黑色

知识点2:

             border-radius 用来设置圆角  以10px为半径画圆

             borde-top-right-radius

             border-top-left-radius

             border-bottom-left-radius

             border-bottom-right-radius

             border-radius: 50%;