html中的盒子模型认知（1）

一.文档流

 网页是一个多层的结构,设置样式样式，也是一层一层的设置，最终我们看到的最上面的一层

           文档流是网页最底层

          我们创建的元素默认情况下，都在文档流中

          元素分为两种状态：在文档流中，脱离文档流

             

      元素在文档流中的特点

        块元素

           1:会独占一行

           2:块元素的宽度默认是父元素的100%

           3:块元素的高度默认是被内容撑开的

        内联元素（行内元素）

           1:不会独占一行

           2:宽度高度默认都是被内容撑开的，不能自己定义宽高

        行内块元素

           1、可以设置宽高

           2、而且不会独占一行

      元素脱离文档流后，就不再区分块元素，行内元素，也就不具有元素在文档流中具有的特点

      脱离文档流的元素会更加类似行内块元素

二.盒子模型

 把元素布局到页面，就像想买个桌子，放到家里，要知道桌子的大小，形状，然后才能放到家里

       所以我们把所有的元素都想成盒子，矩形 

       盒模型、盒子模型、框模型（box model）

      

      内容区  content

      内边距  padding

      边框    border

      外边距   margin

      盒子模型的大小  跟内容区，内边距  边框有关系

      跟外边距没有关系

      

 

   1:内容区(content)  元素中所有的子元素和文本内容都在内容区中排列

        width   设置内容区的宽度

        height  设置内容区的高度

3.盒子模型-边框

边框（border）元素设置边框

      边框属于盒子边缘，边框里面属于盒子内部，出了边框都是盒子的外部

        设置边框必须指定三个样式

          大小   样式  颜色

1:border-width  默认值一般是3px

使用border-width可以分别指定四个边框的宽度

可以跟多个值

   4个值  上  右  下  左

   3个值  上  左右  下

   2个值  上下   左右

   1个值   上下左右

 

除了border-width，CSS中还提供了四个border-xxx-width

  xxx的值可能是top right bottom left

专门用来设置指定边的宽度  

2:border-color  设置边框的颜色  默认值是黑色

和宽度一样，color也提供四个方向的样式，可以分别指定颜色

border-xxx-color

补充小箭头的写法

3:border-style   设置边框的样式

*   可选值：

*     none，默认值，没有边框

*     solid 实线

      double 双线

      dashed [dæʃt] 虚线

*     dotted ['dɔtid] 点状边框

* style也可以分别指定四个边的边框样式，规则和width一致，

*   同时它也提供border-xxx-style四个样式，来分别设置四个边

* border

*   - 边框的简写样式，通过它可以同时设置四个边框的样式，宽度，颜色

*   - 而且没有任何的顺序要求

*   - border一指定就是同时指定四个边不能分别指定

*

* border-top border-right border-bottom border-left

*   可以单独设置四个边的样式，规则和border一样，只不过它只对一个边生效

四.盒子模型-内边距

内边距（padding），指的是盒子的内容区与盒子边框之间的距离

  一共有四个方向的内边距，可以通过：

    padding-top

    padding-right

    padding-bottom

    padding-left

      来设置四个方向的内边距

 总结：

 内边距会影响盒子的可见框的大小，元素的背景会延伸到内边距,

  盒子的大小由内容区、内边距和边框共同决定

使用padding可以同时设置四个边框的样式，规则和border-width一致

五.盒子模式-外边距

外边距指的是当前盒子与其他盒子之间的距离，

  他不会影响可见框的大小，而是会影响到盒子的位置。

 盒子有四个方向的外边距：（边演示，边总结）

  margin-top

      上外边距，设置一个正值，元素会向下移动,设置一个负值，元素会向上移动

  margin-right

     默认情况下设置margin-right不会产生任何效果

  margin-bottom

      下外边距，设置一个正值，自己不动，其下边的元素会向下移动，挤别人

  margin-left

      左外边剧，设置一个正值，元素会向右移动,设置一个负值，元素会向左移动

 由于页面中的元素都是靠左靠上摆放的，

  所以当我们设置上和左外边距时，会导致盒子自身的位置发生改变，

  而如果是设置右和下外边距会改变其他盒子的位置（挤别人）

外边距也可以指定为一个负值，

如果外边距设置的是负值，则元素会向反方向移动

外边距同样可以使用简写属性 margin，可以同时设置四个方向的外边距,

规则和padding一样

六.默认样式

默认样式：

           浏览器为了在页面中没有样式时，也可以有一个比较好的显示效果，

           所以为很多的元素都设置了一些默认的margin和padding，

         而它的这些默认样式，正常情况下我们是不需要使用的。

           所以我们往往在编写样式之前需要将浏览器中的默认的margin和padding统统的去掉

方式一：

         1:清除浏览器的默认样式

         方式二：

         2:引入重置样式表

重置样式代码

/**
 * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
 * http://cssreset.com
 */
 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, input,button,label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video{
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section{
  display: block;
}
ol, ul, li{
  list-style: none;
}
blockquote, q{
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after{
  content: '';
  content: none;
}
table{
  border-collapse: collapse;
  border-spacing: 0;
}
 
/* custom */
a{
  color: #7e8c8d;
  text-decoration: none;
  -webkit-backface-visibility: hidden;
}
::-webkit-scrollbar{
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track-piece{
  background-color: rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:vertical{
  height: 5px;
  background-color: rgba(125, 125, 125, 0.7);
  -webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:horizontal{
  width: 5px;
  background-color: rgba(125, 125, 125, 0.7);
  -webkit-border-radius: 6px;
}
html, body{
  width: 100%;
  font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", "微软雅黑", sans-serif;
}
body{
  line-height: 1;
  -webkit-text-size-adjust: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
html{
  overflow-y: scroll;
}
 
/*清除浮动*/
.clearfix:before,
.clearfix:after{
  content: " ";
  display: inline-block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.clearfix{
  *zoom: 1;
}
 
/*隐藏*/
.dn{
  display: none;
}