css盒子布局

目录

水平布局

垂直布局

内联元素

---

水平布局

水平方向，有7个值可以改变盒子的大小以及位置
margin-left +border-left +padding-left +width+ padding-right +border-right+ margin-right
=父元素内容区的宽度
浏览器规定：水平方向这7个值相加必须要等于其父元素内容区的宽度
0+0+0+100+0+0+0  ！= 600
如果这个7个值相加不等于父元素内容区的宽度，浏览器就会改变某些值，让其成立
我们管这个过程叫过度约束

浏览器如何调整：
  1、如果水平方向7个值中没有auto，默认调整的是margin-right
  0+0+0+100+0+0+500 = 600
  2、7个值当中，有3个值可以被设置为auto，分别是margin-left，width，margin-right
  （1）、1个auto  谁是auto就调整谁
  margin-left为auto，
    auto+0+0+100+0+0+0= 600   auto=500
  width为auto
    0+0+0+auto+0+0+0= 600   auto=600
  margin-right为auto
    0+0+0+100+0+0+auto= 600   auto=500
  （2）、2个auto
  margin-left，width为auto   调整width
     auto+0+0+auto+0+0+0px= 600   
  width，margin-right为auto  调整width
  margin-left，margin-right为auto  同时调整，各一半
    简写为：margin:0 auto;  可以让元素居中
  （3）、3个auto
  margin-left，width，margin-right为auto  调整的width

  总结：
     调整的顺序
     width>margin-right/margin-left
    margin:0 auto;  可以让元素居中,前提是width是固定的
          
元素的水平方向的布局
       元素在其父元素中水平方向的位置由一下几个属性共同决定 
    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  裁剪多余
          auto    根据内容需要自动生成滚动条
          scroll  生成双向滚动条
垂直外边距的重叠
    -兄弟元素
       下外边距和上外边距重叠了，
       如果都是正值的，谁大听谁的
       如果都是负值，绝对值谁大听谁的
      一般情况下，兄弟元素的外边距重叠，有助于我们开发，不用做特殊处理
    -父子元素
       如果父子元素的垂直外边距相邻了，则子元素的外边距会传递给父元素,从而影响页面的布局
       这种情况必须要处理
解决垂直外边距的重叠
方案一：不用margin，用padding实现 
​方案二：outer加个边框,隔开父子的上外边距
方案三：给元素添加BFC(块级格式化)隐含属性
overflow:hidden;

内联元素

内容区  它的宽高都是被内容撑开的，不能自定义设置
内边距  可以设置，但垂直方向不会挤别的元素
边框    可以设置，但垂直方向不会挤别人
外边距   水平方向可以设置，垂直方向设置，没有变化

默认样式：
浏览器为了在页面中没有样式时，也可以有一个比较好的显示效果，
所以为很多的元素都设置了一些默认的margin和padding，
而它的这些默认样式，正常情况下我们是不需要使用的。
所以我们往往在编写样式之前需要将浏览器中的默认的margin和padding统统的去掉
重置样式表，专门用来对浏览器的样式进行重置
    注意：
    1、如果要引入重制样式表，前提必须要有这个css文件
    2、重制样式表必须在你写的样式之前引入

 box-sizing  用来设置盒子尺寸的计算方式 width/height 指的是谁
可选值：
content-box 内容区 默认值
border-box  宽度和高度用来设置整个盒子可见框的大小，包括边框，padding，内容区
box-shadow 
             用来设置元素的阴影效果，不会影响到页面布局 
                第一个值：水平偏移量  正->右  负->左
                第二个值：垂直偏移量  正->下  负->上
                第三个值：模糊半径  可选  默认值0px
                第四个值：颜色   可选  默认值黑色
             (1)
             border-radius 用来设置圆角  以10px为半径画圆
            （2）
             border-radius 后跟多个值，4个，3个，2个，1个
             (3)
             border-radius: 50%;
             (4)分别给每个角设置圆角
             borde-top-right-radius
             border-top-left-radius
             border-bottom-left-radius
             border-bottom-right-radius