css的盒子模型

盒子模型
• 块级盒子
o 盒子的组成
 1.边框–border2.外边距–margin3.内边距–padding4.内容–content 盒子的可视化大小=content+padding+border 即content、border、padding会影响盒子得实际大小， 而margin不影响盒子的可视化大小， 但是会影响盒子的实际的占用大小
• 1.content内容区
o 1.在设置一个元素时，设置的width和heigth实质上设置的就是content的大小2.元素中所有的子元素和文本内容都在内容区中排列 width 设置内容区的宽度 height 设置内容区的高度
• 2.边框–border
o border-coor颜色
 1.用于指定边框得颜色，同样的可以分别指定，原理于边框border一样
o border-style样式
 虚线或者实线等（同样可以分别指定）
o border-width边框宽度
 border-width：10px
 border-width可以用来指定四个方向的边框的宽度值得情况：（顺时针） 四个值：上 右 下 左 三个值：上 左右 下 两个值：上下 左右 一个值：上下左右
 border-xxx-width（用来单独指定某一边得宽度） xxx可以是top、rigth、left、buttom
• 3.内边距–padding
o 同样可以使用padding-xxx来分别指定各个方向得外边距 padding-left padding-rigth padding-top padding-buttompadding：值这里值得原理与边框一样
• 4.外边距–margin
o margin-top -上外边距，设置一个正值，元素会向上移动margin-rigth -默认情况下margin-rigth不会i产生任何效果margin-bottom -下外边距，设置一个正值，其下边得元素会向下移动（并不是自身移动）margin-left -左外边距，设置一个政治，元素会向右移动-margin也可以设置为赋值，此时会向反方向移动margin也具有简写属性，margin：值值的原理与padding一样
o 元素在页面中时按照自左向右得顺序排列得 所以默认情况下，设置左和上边距则会移动元素自身 而设置下和右边距会移动其他元素
o 盒子得垂直布局
 当设置了高度时，则固定
 当父元素没有设置高度时，由于子元素是在父元素得内容区排列得，如果子元素得高度大于父元素得高度，则父元素会被撑开（即溢出现象）解决该问题：整体调整使用overflow，可选值如下： visible：默认值，即当子元素从父元素中溢出时，则在父元素外部位置显示 hidden：溢出得部分会被裁剪不会显示 scroll：生成两个方向得滚动条 auto：根据需求生成滚动条单方向调整overflow-xoverflow-y
o 盒子的水平布局
 元素在其父元素中水平方向的位置由以下几个属性共同决定（width） margin-left与margin-rigth border-left与border-rigth width padding-left与padding-rigth一个元素在其父元素中，水平布局必须满足以下灯饰：margin-left+border-left+padding-left+width+padding-rigth+border-rigth+margin-rigth=父元素的width（即父元素的contentwidth） 以上等式必须满足，如果相加结果不满足时，则称为过渡约束，则浏览器会自动调节，使得等式成立1.当指定width值，其他均未指定时（即均没有auto），这是浏览器默认使得margin-rigth=父元素width-子元素width 如0+0+0+200+0+0+0=800，由于等式必须满足，因此margin-rigth=600，即 0+0+0+200+0+0+600=8002.如果将宽度width和外边距设置为auto，则宽度会调整到最大3.如果width、margin-left、margin-rigth均为auto，则调整width最大，外边距均为04.当width为固定值，而两个外边距为auto时，这是浏览器会对左右外边距均匀分配，即子元素会在父元素中水平居中通常会利用4来设置子元素得水平居中.son{ width:xxxpx; margin: xxpx 0; (上下为xx，左右为0)
• 行内盒子
o 1.行内元素不支持设置width与heigth 其width根据其具体内容元素而定
o 2.行内元素可以设置padding、border、margin 但这三者在垂直方向上都不会影响布局比如margin-bottom不会讲下方的盒子挤下去而行内元素得左右外边距会发生重叠现象
• 行内元素与块级元素得转换
o display用来设置元素得显示类型
 可选值： inline block inline-block table：将元素设置为表格） none:将元素不在也页面中显示(隐藏，同时不会占用页面）
o visibility用来设置元素得显示状态
 可选值：visible：默认值，元素在页面中正常显示hidden：元素在页面中隐藏，但是会保留占位

补充：盒子模型的高级使用
默认：这里容器使用了border-box模型

1）通过设置盒子的宽和高的约束

• 通过min-width,max-width,min-height,max-height 属性，来设置大小约束，以更灵活的方式控制内容盒的大小----通常用于响应式网页设计，将一个布局的外层容器的宽度设置为百分比形式
  ------max-width的好处是将容器的媒体（即图像和视频）控制在容器内
  如下设置：
  ①：

     width:70%;
     max-width:1280px;
     min-width:480px;`
   

②：再使用margin设置该容器再父盒子中水平居中显示

margin： 0 auto

**结果：**当父容器在最小和最大宽度限制内时，它将填满整个视口宽度；当父容器超过1280px宽度时，布局将保持在1280px宽，并开始在可用空间内居中。当宽度低于480px时，视口将小于容器，您必须滚动才能看到完全的内容

问题来了：当随着容器的大小变化时，且当容器大小变化到比图片更窄时，那么图片会出现溢出现象
如：

给图片设置一下样式后：

 img {
      display: block;
      margin: 0 auto;
      max-width: 100%;
    }

如图便不会出现溢出现象，其实原理相似于bootstrap框架中响应式图片的原理（.img-responsive)
使用display: block;margin: 0 auto;是为了让img在父元素中以块级元素的形式居中显示，
而max-width:100%限制了图像的宽度使它的最大宽度与父容器的宽度相等。因此，当父容器宽度缩小到小于图像的宽度时，图像会一起缩小。(这样，可以让图片最大只能是自己的宽度，成为响应式的图片)