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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_36423639/article/details/53589372

盒模型

每一个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 占元素标签的空间


阅读更多
换一批

没有更多推荐了,返回首页