h5学习之8(html中的盒模型)

盒模型

每一个html元素都可以看做成为一个盒模型。

    1.一个盒子的特点（border,padding,内容区域）

    2.盒子与盒子之间的关系(margin)

盒子的特点：

    1.content(内容区域)：展示文字跟图片的

    2.padding(内边框)：内容与边框线的距离

    3.border(边框):元素的边框

    4.margin(为边框)：元素与元素之间的距离（兄弟元素，父子级关系元素）

content知识点：

   1.width:内容的宽度

   2.height:内容的高度

   3.overflow:当内容超出规定的宽高后的处理

    两个值：

         overflower:hidden；超出部分影藏

         overflower:scroll；在水平跟垂直方向产生滚动条

 

元素的宽高计算

元素的高度=border-top + padding-top + height + padding-bottom + border-bottom

元素的宽度=border-left + padding-left + width + padding-right + border-right

margin:

margin-top    上边距

margin-right  右边距

margin-bottom 下边距

margin-left    左边距

margin符合写法

margin:10px           表示上下左右的边距都是10px

margin:10px 20px      第一个值表示上下 ,第二个值表示左右 

margin:10px 20px 30px 第一个值表示上, 第二个值表示右, 第三个值表示下，第四个没有, 就与第二个值保持一致

margin:10px 20px 30px 40px  按上右下左一次赋值

特性：

1.margin只会影响元素的位置，不会影响自身的宽高的，不占空间区域的，可以接受负值

<div class="class">

<div>我是嵌套div</div>

</div>

margin小bug

当两个元素垂直排列

   1.当父元素嵌套子元素垂直排列时，他们的margin-top就会取其中一个margin-top的最大的一个值。会造成整                个父级元素下移。

   2.当两个兄弟元素垂直排列时，上面的一个元素的margin-bottom与下一个元素的margin-top取值取其中一个                 的最大值。

buf解决方式：

   1）给父级加边框

   2）在父级叫overflow:hidden

   3）不要用margin-top 用父级的pidding-top来代替

   3.当两个兄弟元素垂直排列时,上面的一个元素的margin-bottom与下一个元素的margin-top取值取其中一个的                 最大值.

border 标签元素的边框

border-width：边框的宽度

border-style:边框线的样式

值： solid: 实线    dashed:虚线    dotted:点线（IE6不识别）

border-color: 边框线的颜色

border复合写法:

border:border-width border-style  border-color

border-radius:圆角

border-radius:100px      表示四个角半径都是100

border-radius:100px 5px  表示左上角与右下角一样，半径都是100；右上角和左下角一样，半径都是5 

border-radius:100px 5px 20px  表示左上角半径是100；右上角半径是5；右下角半径是20；左下角和右上角一                                                     样 

border-radius:100px 5px 20px 30px  表示左上角半径是100；右上角半径是5；右下角半径是20；左下角半径是                                                            30

padding

padding  内边距或内填充
padding-top  上内边距
padding-right 右内边距
padding-borttom  下内边距
padding-left     左内边距
padding复合写法：
padding:10px           表示上右下左的边距都是10px
padding:10px 20px      第一个值表示上下10 ,第二个值表示左右 20
padding:10px 20px 30px 第一个值表示上10, 第二个值表示右20, 第三个值表示下30，第四个没有, 就与第二个                                           值保持一致
padding:10px 20px 30px 40px  按上右下左一次赋值
特点：
padding 占元素标签的空间