八.CSS盒模型-一一网

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了盒子模型(Box Model)：

1.外边距margin

常规流动模式下，元素之间有间隔的原因就是因为元素有外边距;
外边距的作用是在元素之间添加格外的空白，在这个空白的区域，其他元素不能共存，但是可见父元素的背景；
用margin属性设置外边距;属性值可以是长度单位，也可以是百分比，若果是百分比需要注意的是，百分数外边距值是相对父元素的内容区宽度计算的，上下左右相对宽度计算；
相邻元素外边距会发生折叠现象，即谁的外边距大就以谁为准；

奇怪的现象-嵌套元素设margin

若果只给子元素设置margin，父元素会随子元素一起往下移动，
应用：子元素在父元素内居中
    1.子元素设置左右margin：auto;(为父元素的width-子元素的width)/2
    2.子元素设置上下margin：;(为父元素的高度-子元素的width)/2
    3.子元素设置上下margin父元素会塌陷，给他一个BFC属性，overflow:hidden;
复制代码

margin负值

对于margin-right,margin-left：
若果元素本身没有宽度，margin负值会会增加元素宽度；
如果元素自身有宽度，会产生位移；（这个很有用）

margin-top为负值，不管是否设置高度，都不会增加高度，而是会产生向上的位移；

margin-bottom为负值的时候不会位移,而是会减少自身供css读取的高度.

复制代码

行内元素外边距

行内元素一般有默认的外边距，我们并不想要这样，可以给他的父元素设置font-size:0;
复制代码

2.边框线border

元素的内边距之外就是边框;

边框三要素：
宽度：默认2px；
     border-width:10px;

样式：默认为none；所以你看不到
即：如果缺少border-style声明，就不会有边框；
    border-style:solid ;
        solid:实线
        dotted：点虚线
        dashed：长虚线
        double：双线
     可以设置多个样式：
     border-style:solid dotted dashed double ;
     
     
颜色：默认为前景色，也就是color；

简写边框：
连写(同时设置四条边的边框)
border: 边框的宽度 边框的样式 边框的颜色;

连写(分别设置四条边的边框)
border-top: 边框的宽度 边框的样式 边框的颜色;
border-right: 边框的宽度 边框的样式 边框的颜色;
border-bottom: 边框的宽度 边框的样式 边框的颜色;
border-left: 边框的宽度 边框的样式 边框的颜色;
复制代码

边框圆角

border-radius: 100px 100px 100px 100px;
边框圆角的格式
border-radius: 左上 右上 右下 左下;

1.画⚪
对一个正方形设置；
border-radius: 50%;

2.当边框圆角的值 > 边框宽度的时候, 外边框和内边框都会变成圆角；

3.当边框圆角的值 <= 边框宽度的时候, 外边框是圆角, 内边框是直角；

4.设置椭圆
对一个长方形设置：border-radius: 50%;
复制代码

图像边框

 border-image-source: url("images/border.jpg");
 /*
 告诉浏览器让哪一张图片成为边框
   注意点:
   如果只通过source指定了哪一张图片作为边框的图片, 默认情况下会将图片放到边框的四个顶点;
   如果设置了边框图片, 那么就不会显示边框颜色, 边框图片的优先级高于边框颜色
 */


 border-image-slice: 70 70 70 70;
 /*
 告诉浏览器如何对指定的边框图片进行切割，距离顶部，右边，底部，左边70的位置各切一张，注意点: 不带单位 
 */
 
 border-image-slice: 70 70 70 70 fill;
/*中间的切割部分也用上了，按下列方式进行放置*/

  border-image-width: 10px;  
  /*
  告诉浏览器边框图片显示的宽度, 并不是指定边框的宽度
  注意点: 
  如果通过border-image-width指定了边框图片的宽度, 那么默认的边框宽度就会失效
  */


  border-image-repeat: stretch; 默认
  /*
  告诉浏览器除了边框图片四个角以外的图片如何填充, 默认是拉伸
     repeat;中间部分按切割好的平铺，显示不完就显示不完
     round;先平铺不够就拉伸
 */
 
  border-image-outset: 10px 30px 50px 70px;   
  /*告诉浏览器边框图片需要向外移动多少  上   右   下   左*/


  连写方式：
  border-image: 资源地址 切割方式 填充模式;
  border-image: url("images/border.jpg") 70 fill repeat;
复制代码

3.内填充padding

内填充(内边距)是位于内容和边框之间的距离，用padding设置；它适用于所有元素，且取值只能为正；
background默认会延伸到内边距区域；
内边距的作用是使内容与边框隔开一点，所以如果加了边框，通常最好加一些内边距；

padding：20px；
/* 上右下左都为20px */

padding:20px 10px;
/* 上下为20px，左右为10px*/

padding:10,20,30;
/* 第四个值是左边，没写复用第二个值*/

padding:10px 20px 30px 40px;
/* 顺序是上 右 下 左 */

也可以按照方位单个写:
padding-top: ;
padding-right: ;
padding-bottom: ;
padding-left: ;
复制代码

行内非置换元素的内边距

在行内元素设置padding值左右有效，上下无效（没有视觉效果）；但是要小心，如果如果行内元素有背景色和内填充，背景会向上下延伸；

置换元素的内边距

对于置换元素的内边距，会出现在内容四周，而且背景会填充到内边距区域
置换元素有

<img>、<input>、<textarea>、<select>、<object>
复制代码

4.内容content

盒子的 box-sizing 属性

CSS3 中新增了一个 box-sizing 属性, 这个属性的某个值可以保证我们给盒子新增 padding 和 border 之后, 盒子元素的宽度和高度不变。
有两种模式：

box-sizing: content-box;/*默认情况*/
        宽度 = width + padding + border;
        高度 = height + padding + border;
       ！！！！！！ 上边框线是一个复合属性，只写50px是无效的，会让上边框线不存在

box-sizing: border-box;
        宽度=width;(padding和border已经算进去了)
        高度=height;
border-box告诉浏览器：你想要设置的边框和内边距的值是包含在width内的;

注意点: 
1.如果两个盒子是嵌套关系, 那么设置了里面一个盒子顶部的外边距, 外面一个盒子也会被顶下来 
2.如果外面的盒子不想被一起定下来,那么可以给外面的盒子添加一个边框属性 
3.在企业开发中, 一般情况下如果需要控制嵌套关系盒子之间的距离, 应该首先考虑 padding, 其次再考虑 margin,margin 本质上是用于控制兄弟关系之间的间隙的

注意点:
1.在嵌套关系的盒子中, 我们可以利用 margin: 0 auto;的方式来让里面的盒子在外面的盒子中水平居中
2.margin: 0 auto; 只对水平方向有效, 对垂直方向无效
复制代码