盒子模型

  1.    盒子模型 box model
  2.     盒子=容器
  4.     1、宽高所划分的区域 
  5.     2、边框
  6.     3 内边距 
  7.     4 外边距
  8.     <style>
  9.         /* .outer-box可视区域
  10.             200+50+50+10+10=320
  11.             width+padding+border
  12.         */
  13.         .outer-box {
  14.             width: 200px;
  15.             height: 200px;
  16.             border: 10px solid green ;
  17.             padding: 50px;
  18.             margin: 50px;
  19.         }
  21.         .outer-box .inner-box {
  22.             width: 100px;
  23.             height: 100px;
  24.             background-color: orange;
  25.         }
  26.     </style>
  27.     <div class="outer-box">
  28.         <div class="inner-box">
  30.         </div>
  31.     </div>

居中

方案1

  1.   <style>
  2.           .box {
  3.               width: 100px;
  4.               height: 100px;
  5.               border: 1px solid #000;
  6.           }
  8.           .box .box1{
  9.             width: 100px;
  10.             height: 100px;
  11.             background-color: orange;
  12.           }
  13.       </style>
  14.     <div class="box">
  15.         <div class="box1"></div>
  16.     </div>

image.png
子元素与父元素大小一致，父元素设置padding扩大可视区域

  1.         <style>
  2.           .box {
  3.               width: 100px;
  4.               height: 100px;
  5.               padding: 30px;
  6.               border: 1px solid #000;
  7.           }
  9.           .box .box1{
  10.             width: 100px;
  11.             height: 100px;
  12.             background-color: orange;
  13.           }
  14.       </style>
  15.     <div class="box">
  16.         <div class="box1"></div>
  17.     </div>

image.png

方案2

  1.       <style>
  2.           .box {
  3.               width: 100px;
  4.               height: 100px;
  5.               border: 1px solid #000;
  6.           }
  8.           .box .box1{
  9.             width: 100%;
  10.             height: 100%;
  11.             background-color: orange;
  12.           }
  13.       </style>
  14.     <div class="box">
  15.         <div class="box1"></div>
  16.     </div>

image.png

  1.    <style>
  2.         .box {
  3.             width: 100px;
  4.             height: 100px;
  5.             border: 1px solid #000;
  6.             padding: 30px;
  8.             /* overflow: hidden; */
  9.         }
  11.         .box .box1{
  12.             width: 100%;
  13.             height: 100%;
  14.             background-color:aqua;
  15.         }
  16.         .box .box2{
  17.             width: 100%;
  18.             height: 100%;
  19.             background-color:aliceblue;
  20.         }
  21.     </style>
  22.   <div class="box">
  23.       <div class="box1"></div>
  24.       <div class="box2"></div>
  25.   </div>

image.png

子元素100%会占满父元素的width、height

  1.       <style>
  2.           .box {
  3.               width: 100px;
  4.               height: 100px;
  5.               padding: 30px;
  6.               border: 1px solid #000;
  7.           }
  9.           .box .box1{
  10.             width: 100%;
  11.             height: 100%;
  12.             background-color: orange;
  13.           }
  14.       </style>
  15.     <div class="box">
  16.         <div class="box1"></div>
  17.     </div>

image.png

方案3

  1.    <style>
  2.         .box {
  3.             width: 200px;
  4.             height: 200px;
  5.             padding: 30px;
  6.             border: 10px solid #000;
  8.             box-sizing: border-box;
  10.             -moz-box-sizing: border-box;
  11.             /* firefox */
  12.             -webkit-box-sizing: border-box;
  13.             /* chrome safari*/
  14.             -ms-box-sizing: border-box;
  15.             /* IE8以下 */
  16.         }
  18.         .box .box1{
  19.           width: 100%;
  20.           height: 100%;
  21.           background-color: orange;
  22.         }
  23.     </style>
  24.   <div class="box">
  25.       <div class="box1"></div>
  26.   </div>

box-sizing: border-box;把pading、border算到width，width=元素大小+padding +border
元素内容大小随着width-减去-padding-border，自动计算计算大小

cntent-box 元素内容大小就是width大小，padding、border再叠加
image.png
image.png

  1.       -moz-box-sizing: border-box;
  2.             /* firefox */
  3.             -webkit-box-sizing: border-box;
  4.             /* chrome safari*/
  5.             -ms-box-sizing: border-box;
  6.             /* IE8以下 */

方案4

  1.    <style>
  2.         div{
  3.             /* div都写成这样,以后就不用动了，也好计算宽度 */
  4.             box-sizing: border-box;
  5.             -moz-box-sizing: border-box;
  6.             /* firefox */
  7.             -webkit-box-sizing: border-box;
  8.             /* chrome safari*/
  9.             -ms-box-sizing: border-box;
  10.             /* IE8以下 */
  11.             -moz-box-sizing: border-box;
  12.             /* presto opera */
  13.         }
  14.         .box {
  15.             width: 200px;
  16.             height: 200px;
  17.             padding: 30px;
  18.             border: 10px solid #000;
  20.             /* 内容，就解开上面设置的div的样式，回归正常盒子模型了 
  21.             content-box是以盒子的内容固定盒子尺寸，border、padding都是盒子内容，
  22.             把这些都算到盒子的尺寸内部，所以盒子尺寸=width+padding+border所以盒子就扩大，
  23.             border-box是以边界为基准固定盒子的尺寸，盒子尺寸=width=盒子内容+padding+border*/
  24.             /* box-sizing: content-box; */
  25.         }
  27.         .box .box1 {
  28.             width: 100%;
  29.             height: 100%;
  30.             background-color: orange;
  31.         }
  32.     </style>
  33.     <div class="box">
  34.         <div class="box1"></div>
  35.     </div>
  1.  <style>
  2.         ul,
  3.         li,
  4.         div {
  5.             /* div都写成这样,以后就不用动了，也好计算宽度 */
  6.             box-sizing: border-box;
  7.             -moz-box-sizing: border-box;
  8.             /* firefox */
  9.             -webkit-box-sizing: border-box;
  10.             /* chrome safari*/
  11.             -ms-box-sizing: border-box;
  12.             /* IE8以下 */
  13.             -moz-box-sizing: border-box;
  14.             /* presto opera */
  15.         }
  17.         /* 想要修改,想能不能写个类出来,或能不能标签初始化,这样才能复用高 */
  18.         .content-box {
  19.             box-sizing: content-box;
  20.             -moz-box-sizing: content-box;
  21.             /* firefox */
  22.             -webkit-box-sizing: content-box;
  23.             /* chrome safari*/
  24.             -ms-box-sizing: content-box;
  25.             /* IE8以下 */
  26.             -moz-box-sizing: content-box;
  27.             /* presto opera */
  28.         }
  30.         /*
  31.         *padding： 30px 20px 10px 5px
  32.         *           上  下    左    右
  33.         *padding： 30px 20px 10px
  34.         *           上  左右 下
  35.         *padding  20px 10px
  36.         *         上下  左右
  37.         *padding  30px
  38.         *           上下左右
  39.         */
  40.         .box {
  41.             width: 200px;
  42.             height: 200px;
  43.             padding: 30px;
  44.             border: 10px solid #000;
  46.             /* 内容，就解开上面设置的div的样式，回归正常盒子模型了 
  47.             content-box是以盒子的内容固定盒子尺寸，border、padding都是盒子内容，
  49.             把这些都算到盒子的尺寸内部，所以盒子尺寸=width+padding+border所以盒子就扩大，
  50.             border-box是以边界为基准固定盒子的尺寸，盒子尺寸=width=盒子内容+padding+border*/
  51.             /* box-sizing: content-box; */
  52.         }
  54.         .box .box1 {
  55.             width: 100%;
  56.             height: 100%;
  57.             background-color: orange;
  58.         }
  59.     </style>
  60.     <div class="box content-box">
  61.         <div class="box1"></div>
  62.     </div>

margin

  1.     <style>
  2.         .text1{
  3.             margin-right: 30px;
  4.         }
  5.         .text2{
  6.             margin-left: 30px;
  7.         }
  8.     </style>
  9.     <span class="text1">123</span>
  10.     <span class="text2">234</span>

image.png
60px=30+30

居中

在html中margin居中

  1.   <style>
  2.         .box{
  3.             width: 100px;
  4.             height: 100px;
  5.             background-color: orange;
  6.             margin:0 auto;
  7.             /*左右为自动，居中*/
  8.         }
  9.     </style>
  11.     <div class="box"></div>
  1.   <style>
  2.         .box{
  3.             width: 200px;
  4.             height: 200px;
  5.             background-color: orange;
  6.         }
  7.         .box1{
  8.             width: 50px;
  9.             height: 50px;
  10.             background-color: green;
  11.             margin: 0 auto;
  12.             margin-top: 100px;
  13.             /* margin-top塌陷,margin塌陷 */
  14.         }
  15.     </style>
  16.     <div class="box">
  17.         <div class="box1"></div>
  18.     </div>

image.png

  1.     <style>
  2.         .bigbox{
  3.             width: 100%;
  4.             height: 100%;
  5.             background-color: aqua;
  6.         }
  7.         .box{
  8.             width: 100px;
  9.             height: 100px;
  10.             background-color: orange;
  11.             margin:auto auto;
  12.             /*左右为自动，居中
  13.             第一个在html中为auto也不会在html中居中，
  14.             height100%并不会执行，真的占满html的100%，
  15.           但父子元素可以执行
  16.           */
  17.         }
  18.     </style>
  20.     <div class="bigbox">
  21.         <div class="box"></div>
  22.     </div>

image.png

  1.  <style>
  2.         .bigbox{
  3.             width: 100%;
  4.             height: 800px;
  5.             background-color: aqua;
  6.             border-top: 1px solid transparent;
  7.         }
  8.         .box{
  9.             width: 100px;
  10.             height: 100px;
  11.             background-color: orange;
  12.             margin:auto auto;
  13.             /*左右为自动，居中*/
  14.         }
  15.     </style>
  17.     <div class="bigbox">
  18.         <div class="box"></div>
  19.     </div>

image.png

body margin 默认边距

  1.   <style>
  2.         .header{
  3.             width: 100%;
  4.             height: 60px;
  5.             background-color: #000;
  6.         }
  8.     </style>
  9.    <div class="header"></div>

image.png
这空隙是什么？

  1.    <style>
  2.         body{
  3.             padding: 0;
  4.             margin: 0;
  5.             /*是body的margin属性的默认值，与padding无关*/
  6.         }
  8.         html{
  9.             padding: 0;
  10.             margin: 0;
  11.             /* 都不是 */
  12.         }
  13.         .header{
  14.             width: 100%;
  15.             height: 60px;
  16.             background-color: #000;
  17.         }
  19.     </style>
  20.    <div class="header"></div>

image.png
没有空隙了，当body margin为0时没有空隙，其它的依次试验，都有空隙，对照实验，控制变量法。
body的默认样式，与h1的默认样式同理，都有默认样式

不同浏览器不一样：
ie8 上下16 左右8
ie7 上下16 左右11

定位

  1.    <style>
  2.        .box1{
  3.            width: 100px;
  4.            height: 100px;
  5.            background-color: green;
  6.        }
  7.        .box2{
  8.            width: 200px;
  9.            height: 200px;
  10.            background-color: orange;
  11.        }
  12.    </style>
  15.    <div class="box1"></div>
  16.    <div class="box2"></div>

image.png

  1.     <style>
  2.         .box1 {
  3.             position: absolute;
  4.             width: 100px;
  5.             height: 100px;
  6.             background-color: green;
  7.         }
  9.         .box2 {
  10.             width: 200px;
  11.             height: 200px;
  12.             background-color: orange;
  13.         }
  14.     </style>
  16.     <!-- 绝对定位 -->
  17.     <!-- position: absolute; -->
  18.     <!-- left/right  top/bottom 只有定位元素才有，left right只能取其一-->
  20.     <div class="box1"></div>
  21.     <div class="box2"></div>

image.png
定位新开了一个层，定位元素在新开的层上面，相当于新开图层，像ps新建图层，ps新建图层拖动它
他本来像上上面的图一样，如果加定位，就不在以前的图层上了，就不在以前的位置上了，在别的图层上面。未被定位的元素就会把定位了的元素的位置占了

脱离文档流

相对定位

  1.    <style>
  2.         .box1 {
  3.             position: relative;
  4.             width: 100px;
  5.             height: 100px;
  6.             background-color: green;
  7.         }
  8.         .box2{
  9.             width: 200px;
  10.             height: 200px;
  11.             background-color: orange;
  12.         }
  14.     </style>
  16.     <div class="box1"></div>
  17.     <div class="box2"></div>

image.png

  1.    <style>
  2.         .box1 {
  3.             position: relative;
  4.             top: 10px;
  5.             left: 20px;
  6.             width: 100px;
  7.             height: 100px;
  8.             background-color: green;
  9.         }
  11.         .box2 {
  12.             width: 200px;
  13.             height: 200px;
  14.             background-color: orange;
  15.         }
  16.     </style>
  18.     <div class="box1"></div>
  19.     <div class="box2"></div>

也会开新的图层，但是之前的位置在老图层依然保留
image.png

定位综合

  1.     <style>
  2.         .box1 {
  3.             width: 400px;
  4.             height: 400px;
  5.             margin: 100px 0 0 100px;
  6.             border: 1px solid #000;
  7.         }
  8.         .box1 .box2{
  9.             width: 200px;
  10.             height: 200px;
  11.             background-color: green;
  12.         }
  13.         .box1 .box2 .box3{
  14.             position: absolute;
  15.             top: 0;
  16.             left: 0;
  17.             width: 50px;
  18.             height: 50px;
  19.             background-color: orange;
  20.         }
  21.     </style>
  23.     <div class="box1">
  24.         <div class="box2">
  25.             <div class="box3"></div>
  26.         </div>
  27.     </div>

image.png
box3定位了，当没有其它元素也是定位元素时，会相对于整个html文档去定位
定位元素都会相对于什么什么去定位

  1.     <style>
  2.         .box1 {
  3.             position: relative;
  4.             /* position: absolute; */
  5.             /* absolute relative都可以达到效果 */
  6.             width: 400px;
  7.             height: 400px;
  8.             margin: 100px 0 0 100px;
  9.             border: 1px solid #000;
  10.         }
  11.         .box1 .box2{
  12.             width: 200px;
  13.             height: 200px;
  14.             background-color: green;
  15.         }
  16.         .box1 .box2 .box3{
  17.             position: absolute;
  18.             bottom:  0;
  19.             left: 0;
  20.             width: 50px;
  21.             height: 50px;
  22.             background-color: orange;
  23.         }
  24.     </style>
  26.     <div class="box1">
  27.         <div class="box2">
  28.             <div class="box3"></div>
  29.         </div>
  30.     </div>

box1绝对定位，找box2，没有定位元素，box2不是定位元素，找box1，box1是定位元素，有position属性就是定位元素，是定位元素，是相对于定位元素的相对
相对元素是相对于定位元素，或者默认相对于html元素
找相对的的那个元素是向上找，找父级，找到的第一个，之后的就不找了，一直找到html
总结:相对于最近的、有定位的父元素绝对定位
image.png
相对定位是相对于之前的自己的位置，发生的改变
相对它本身定位的

absolute相对于第一个父级定位元素去定位，不管是absolute，还是relative都可以
定位就是去top、left、right、button等

  1.    <style>
  2.         .box1 {
  3.             position: relative;
  4.             /* position: absolute; */
  5.             /* absolute relative都可以达到效果 */
  6.             width: 400px;
  7.             height: 400px;
  8.             margin: 100px 0 0 100px;
  9.             border: 1px solid #000;
  10.         }
  11.         .box1 .box2{
  12.             position: absolute;
  13.             width: 200px;
  14.             height: 200px;
  15.             background-color: green;
  16.         }
  17.         .box1 .box2 .box3{
  18.             position: absolute;
  19.             bottom:  0;
  20.             left: 0;
  21.             width: 50px;
  22.             height: 50px;
  23.             background-color: orange;
  24.         }
  25.     </style>
  27.     <div class="box1">
  28.         <div class="box2">
  29.             <div class="box3"></div>
  30.         </div>
  31.     </div>

image.png

  1.    <style>
  2.         .box1 {
  3.             position: relative;
  4.             /* position: absolute; */
  5.             /* absolute relative都可以达到效果 */
  6.             top: 30px;
  7.             right: 20px;
  8.               /*right 不可以，left top可以*/
  10.             width: 400px;
  11.             height: 400px;
  12.             margin: 100px 0 0 100px;
  13.             border: 1px solid #000;
  14.         }
  15.     </style>
  17.     <div class="box1">
  18.         <div class="box2">
  19.             <div class="box3"></div>
  20.         </div>
  21.     </div>
  1.     <style>
  2.         .box1 {
  3.             /* position: relative; */
  4.             /* position: absolute; */
  5.             /* absolute relative都可以达到效果 */
  6.             width: 400px;
  7.             height: 400px;
  8.             margin: 100px 0 0 100px;
  9.             border: 1px solid #000;
  10.         }
  12.         .box1 .box2 {
  13.             width: 200px;
  14.             height: 200px;
  15.             background-color: green;
  16.         }
  18.         .box1 .box2 .box3 {
  19.             position: relative;
  21.             top: -30px;
  22.             bottom: 30px;
  24.             left: 30px;
  25.             right: 30px;
  26.             /* bottom right没有用
  27.               值可以设置为负值
  28.           */
  33.             width: 50px;
  34.             height: 50px;
  35.             background-color: orange;
  36.         }
  37.     </style>
  39.     <div class="box1">
  40.         <div class="box2">
  41.             <div class="box3"></div>
  42.         </div>
  43.     </div>

image.png

总结

  1.            /* top: 30px;
  2.             left: 30px; */
  4.             bottom: 30px;
  5.             right: 30px;

在relative定位中上面这两个效果一样，bottom：30变成了top：30的效果
image.png

absolute有4个方位：top、bottom、right、left
不占有文档流

relative只有2个方位：top、left
根据元素之前的位置去定位，占据文档流空间，但只是之前的位置占有，定位之后的元素不占有