一：boxsizing 属性及作用

当一个盒子的总宽度确定之后，要想给盒子添加边框或内边距，往往需要更改 width属性值，才能保证盒子总宽度不变，操作起来烦琐且容易出错，运用CSS3的box-sizing属性可以轻松解决这个问题。box-sizing属性用于定义盒子的宽度值和高度值是否包含元素的内边距和边框，其基本语法格式如下。

box-sizing: content-box/border-box;

在上面的语法格式中，box-sizing属性的取值可以为content-box或border-box，对它们的解释如下。

content-box：浏览器对盒模型的解释遵从W3C标准，当定义width和height时，它的参数值不包括border和padding。

border-box：当定义width和height时，border和padding的参数值被包含在width和height之内。

  <html lang="zh">
  <head>
      <meta charset="UTF-8">
      <title>box-sizing属性用法</title>
      <style type="text/css">
          .box1{
              width: 300px;
              height: 100px;
              padding-right: 10px;
              background: #F90;
              border: 10px solid #ccc;
              box-sizing: content-box;
          }
          .box2{
              width: 300px;
              height: 100px;
              padding-right: 10px;
              background: #F90;
              border: 10px solid #ccc;
              box-sizing: border-box;
          }
      </style>
  </head>
  <body>
      <div class="box1">content_box属性</div>
      <div class="box2">border_box属性</div>
  </body>
  </html>

在上面案例中定义了两个盒子，并对它们设置相同的宽、高、右内边距和边框样式。并且，对第一个盒子定义“box-sizing: content-box;”样式，对第二个盒子定义“box-sizing: border-box;”样式

可以发现应用了“box-sizing: content-box;”样式的盒子1，宽度比width参数值多出30px，总宽度变为330px;而应用了“box-sizing: border-box;”样式的盒子 2，宽度等于width参数值，总宽度仍为300px。应用“box-sizing: border-box;”样式后，盒子border和padding的参数值是被包含在width和height之内的。

网页排版方式

垂直方向使用标准流，水平方向使用浮动流秉持从上至下，从左至右，水平方向划分为一左一右再对左边或右边进行进一步布局的原则

标准流：

块级元素垂直排版；行内元素和行内块级元素水平排版。

浮动流（半脱离标准流）：

浮动流只有一种排版方式：水平排版（只能设置某个元素左对齐或右对齐）
浮动流没有居中对齐，无法设置center值
浮动流中不可以使用margin:0 auto
浮动流中不区分块级元素/行内元素/行内块级元素的，都可以水平排版
浮动流中块级元素/行内元素/行内块级元素都可以设置宽高（浮动流中元素与行内块级元素极为相似)
当前面某个元素浮动脱标后（脱离标准流），后面元素未浮动，那么前面的元素会盖住后面的元素
当父元素的宽度足够放下所有浮动元素时，所有浮动元素就会并列显示；当父元素的宽度不足够放下所有浮动元素时，会从最后一个浮动元素开始向前面的前面一个元素贴靠（如1，2，3盒子相贴，宽度不够时3与1相贴），直到贴到父元素左边为止，若贴到父元素左边宽度还不够，那也就这样了
浮动元素不会盖住未浮动元素中的文字，未浮动元素中的文字会给浮动元素让位置，但依然会盖住未浮动元素，仅仅把未浮动元素中的文字推开（字围图现象）
在标准流中内容的高度可以撑起父元素的高度，在浮动流中浮动元素不可撑起父元素高度

浮动元素排版规则：

相同方向上的浮动元素，先浮动的元素会显示在前面，后浮动的元素显示在后面
不同方向上的浮动元素，左浮动会找左浮动，右浮动会找右浮动
浮动元素浮动后的位置，由浮动元素浮动之前在标准流中的位置来确定（浮动之前在标准流中所处第几行那么浮动后还是处在第几行）

定位流：

相对定位（相对于自己以前在标准流中的位置来移动）不脱离标准流，会继续在标准流中占用原有空间

在相对定位中同一个方向上的定位属性只能使用一个（left与right；top与bottom不能同时存在）
由于相对定位是不脱离标准流的，所以在相对定位中严格区分块级元素/行内元素/行内块级元素并且相对定位的元素会占用标准流中的位置，所以给相对定位的元素设置margin/padding属性值时会影响到标准流的布局（在给相对定位元素设置这两个属性值时，是给相对定位移动前在标准流的位置添加，不会给移动后所处的位置添加）
相对定位常用于对元素进行微调或配合绝对定位来使用

绝对定位（相对于body来定位）脱离标准流，不区分行内元素/块级元素/行内块级元素可以设置宽度高度

默认情况下所有的绝对定位元素，无论有没有祖先元素，都会以body作为参考点（是以网页首屏的宽度和高度作为参考点而不是整个网页的宽度和高度作为参考点）
如果一个绝对定位的元素有祖先元素，并且祖先元素也是定位流，那么这个绝对定位的元素就会以定位流的那个祖先元素作为参考点
定位流特指绝对定位/相对定位/固定定位
如果一个绝对定位的元素有祖先元素，并且祖先元素也是定位流，而且祖先元素中有多个元素都是定位流，那么这个绝对定位的元素会以离他最近的那个定位流的元素作为参考点
一个绝对定位的元素会忽略祖先元素的padding
为了保证需要定位的元素不占用标准流中的空间并且不会随着浏览器宽度高度的变化而变化所以开发时将绝对定位和相对定位结合使用--“子绝父相”

让绝对定位的元素水平居中

  <style>
    .box{
      width: 300px;
      height: 100px;
      position:absolute;
      left: 50%;
      margin-left: -150px;
    }
  </style>
</head>
<body>
  <div class="box">
  </div>
</body>

固定定位脱离标准流，不会占用标准流中的空间，不区分行内元素/块级元素/行内块级元素可以设置宽度高度, 可以让某个元素不随着滚动条的滚动而滚动

z-index属性（专门用于控制定位流元素的覆盖关系）

默认情况下所有元素都有一个默认的z-index属性，属性值为0
默认情况下定位流的元素会盖住标准流的元素
默认情况下后编写的定位流元素会盖住前面编写的定位流元素
如果定位流的元素设置了z-index属性，那么哪个元素的z-index属性大，哪个元素就会显示在上层

z-index从父现象

如果两个元素的父元素都没有设置z-index属性，那么哪个元素的z-index属性比较大，哪个元素就会显示在上层
如果两个元素的父元素设置了z-index属性，那么子元素的z-index属性会失效，哪个元素的父元素的z-index属性大，就会显示在上层

a标签的伪类选择器（用来修改a标签不同状态样式的）

a:link 选择所有未被访问的链接
a:visited 选择所有已被访问的链接
a:hover 选择鼠标指针位于其上的链接

a:active 选择活动链接（鼠标按下未弹起的链接）不一定都是a标签，需要添加伪类选择器的标签都可以例如，div：hover（就是当鼠标经过div时就会触发style）

<style>
     div {
         width: 200px;
         height: 200px;
         background-color: pink;
     }
     div:hover {
         background-color: red;
     }
 </style>

背景尺寸

通过指定具体像素控制背景尺寸 background-size: 200px 100px ; /* 第一个参数为宽度，第二个参数为高度 */
宽度等比拉伸（不改变原图比例）background-size: auto 100px；高度等比拉伸同理，仅需将第二个参数设置为auto

cover(background-size: cover;)告诉系统图片需要等比拉伸，直到拉伸到宽度！和！高度都填满元素

contain(background-size: contain;)告诉系统图片需要等比拉伸，直到拉伸到宽度！或！高度都填满元素

背景图片定位区域（指定背景图片从什么区域开始显示）

默认情况下从padding区域开始显示background-origin：padding-box

background-origin：border-box

background-origin：content-box

如果图片宽度大于父元素的宽度，不能使用margin：0 auto；或 text-align：center；进行居中显示,可以使用定位流使图片居中显示

  <style>
      .father{
        width: 500px;
        height: 500px;
        margin :0 auto;
        border: 5px solid red;
        box-sizing: border-box;
        text-align: center;
      }
      .son{
        position: absolute;
        left: 50%;
        margin-left: -532px;
        /* 需要知道背景图片的宽度 */
      }
    </style>

图片宽度大于父元素的宽度，使图片居中对齐的爽码 # margin：0 -100%；需注意，此法父元素必须设置text-align:center;

背景绘制区域属性（指定从哪个区域开始绘制背景）

默认情况下从border区域开始绘制背景，与背景图片定位区域用法效果相同 background-clip：border-box

多重背景图片

多张背景图片之间用逗号隔开即可
先添加的背景图片会盖住后添加的背景图片

建议在编写多重背景时拆开编写

 background-image: url(./something/timg.jpg),url(./something/下载.jpg);
 background-repeat: no-repeat,no-repeat;
 background-position: left top,right top;

浅记一下CSS布局方式