盒模型总结

盒模型概念

CSS将页面中的所有元素都设置为了一个矩形盒子。
将元素设置为矩形的盒子后，对页面的布局就变成了将不同的盒子摆放到不同的位置。
每一个盒子都有以下几个部分：

内容区content    
内边距padding    
边框border    
外边距margin

一、内容区content
元素中所有的子元素和文本内容都在内容区中排列。
width 内容区宽度
height 内容区的高度

二、边框border
属于盒子边缘。
边框的大小会影响到盒子的大小。
要设置边框需要至少三个样式

• 边框的宽度 border-width

   默认值一般是3px        
   值的情况：            
       四个值：上 右 下 左            
       三个值：上 左右 下            
       两个值：上下 左右            
       一个值：上下左右        
   拓展：
       border-top-wight
       border-right-wight
       border-bottom-wight
       boder-left-wight    
  

• 边框的颜色 border-color

    默认颜色是color值（默认是Black)        
    规则同上。    
  

• 边框的样式 border-style

        solid 实线       
        dotted 点状虚线        
        dashed 虚线        
        double 双线        
        none 默认值（无）
  

简写属性（没有顺序要求）border: xxx yyy zzz;
单独设置：

border-top
border-rigyht
border-bottom
border-left

三、内边距padding
指内容区和边框之间的距离。
四个方向的内边距：

padding-top
padding-right 
padding-bottom 
padding-left

内边距设置会影响到盒子的大小。
背景颜色会延申到内边距。
简写：规则和border一样。

一个盒子的可见大小由内容区、内边框和边框共同决定。在计算盒子大小时需要将三个区域加到一起计算。

四、外边距margin
不会影响盒子可见框的大小，但会影响盒子的位置。
四个方向：

margin-top 上外边距，正值则元素向下移动
margin-right 默认情况设置不会产生任何效果
margin-bottom 下外边距，正值则其下边的元素向下移动
margin-left 左外边距，正值则元素向右移动

默认情况下设置左和上外边距会移动元素自身，设置下和右外边距会移动其他元素。
margin取负值则往相反方向移动。
简写：规则和border一样。

水平布局和垂直布局

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

margin-left + border-left + padding-left + width + padding-right +
boder-right + margin-right = 其父元素内容区的宽度

以上等式如果不满足成为过度约束，等式会自动调整。
调整情况：
1.如果七个值中没有auto的情况，浏览器会自动调整margin-right以使等式满足。 2.width margin-left margin-right设置为auto
（1）某个值为auto，自动调整auto的那个值以使等式成立。
（2）宽度和一个外边距设置为aotu，宽度会调整到最大，设置auto的外边距自动为0
（3）三个值都为auto，则宽度最大，外边距都为0
（4）两个外边距都为auto，宽度固定，则外边距相同。元素在父元素中水平居中。

二、垂直布局
如果不设置父元素高度，默认情况下父元素高度被内容撑开。
如果子元素的大小超过父元素，则子元素会从父元素中溢出。
使用overflow属性设置父元素如何处理溢出的子元素。
overflow可选值：

visible 默认值，子元素会从父元素中溢出，在父元素外部显示。
hidden 溢出内容被裁剪不会显示
scroll生成滚动条，通过滚动条查看完整的内容
auto 根据需要生成滚动条

overflow-x 单独处理水平方向，可选值同上
overflow-y 单独处理垂直方向，可选值同上

垂直外边距折叠

相邻的垂直方向外边距会发生重叠现象。
兄弟元素间的相邻垂直外边距如果都是正值会取两者之间的较大值。
特殊情况：

相邻外边距一正一负，则取两者的和。
相邻外边距都是负值，取两者绝对值最大值。

父子元素间相邻上外边距，子元素会传递给父元素。
父子外边距的折叠会影响页面的布局，必须进行处理。

行内元素的盒模型

行内元素不支持设置wight和height。
可以设置padding、border、margin，但垂直方向padding、border、margin不会影响页面的布局。

display设置元素显示的类型。
可选值：

inline 将元素设置为行内元素
block 将元素设置为块元素
inline-block 将元素设置为行内块元素（既可以设置宽度高度，又不会独占一行）
table 设置为表格
none 元素不在页面中显示

visibility设置元素的显示状态。
可选值：

visible 默认值，元素在界面正常显示
hidden 元素在页面中隐藏，不显示，但依然占据页面位置。

盒模型大小

box-sizing
设置盒子尺寸的计算方式。
可选值：

content-box 默认值，宽度和高度设置内容区大小
border-box 宽度和高度设置整个盒子可见框的大小
width和height指内容区和内边距和边框的总大小

轮廓、阴影、圆角

一、轮廓outline
设置元素的轮廓线，用法和border一样。
不同点：轮廓不会影响可见框的大小。
常用在鼠标移入时。

二、阴影box-shadow
设置元素的阴影效果，不会影响页面布局。
默认位置是在元素的正下方。
语法：

 box-shadow:水平偏移量 垂直偏移量 阴影模糊半径 颜色

水平偏移量：正值向右移动 负值向左移动
垂直偏移量：正值向下移动 负值向上移动
阴影模糊半径
颜色：阴影颜色，一般使用rgba

三、圆角border-radius
例如：border-radius:10px 10px 20px 30px

四个值的顺序：左上 右上 右下 左下
三个值的顺序：左上 右上-左下 右下
两个值：左上-右下 右上-左下

单独设置四个方位：

border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius

应用：将元素设置为一个圆形

border-radius：50%