码迷,mamicode.com
首页 > 其他好文 > 详细

盒子模型

时间:2015-10-21 00:18:39      阅读:246      评论:0      收藏:0      [点我收藏+]

标签:

一、块级元素

1、默认显示在父标签的左上角

2、块级元素默认占满一行(整个文档流)

3、常见的块级元素:p、h1~h6、ol li、ul li、div、table、hr、center

二、行内元素特点

1、大小受到文字区域影响,不受到width、height影响

2、行内元素不单独占满一行

3、常见的内联元素(行内元素):a、img、span、input

三、元素之间转换

1、行内元素变成块元素:display:block;

2、块元素变成行内元素:display:inline;

3、display:inline-block;手height和width影响但不占满一行

四、浮动

1、float:left;(左漂浮,使元素在同一行)

2、清除左右浮动:clear:both;

五、盒子模型

1、padding内间距(上、右、下、左)

     特点:padding:10px;四方各撑开10PX,如果要修改height和width那么只有下边和右边分别减少20PX

  特点:padding对于行内元素是有作用的

  总结:padding的各种情况都支持

2、块与块之间的间距

margin外间距(上、右、下、左)

  特点:margin行内元素只支持左右不支持上下,但对于块级元素都支持

六、定位

1、绝对定位:position:absolute;

    特点1:设置绝对定位脱离文档流,不会占满一行,不会受到浮动的影响

    特点2:当设置据对定位,元素的方位就受到窗体的上、下、左、右的影响

2、相对定位:position:relative;

 

盒子模型

标签:

原文地址:http://www.cnblogs.com/cd115703/p/4896446.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!