DIV与CSS布局

一、内联元素和区块元素

内联元素

• 内联元素和其他元素显示在同一行上。
• 他的宽度是根据他的显示文本和图像的宽度，且他的高度，和上下边距是不可以改变的。
• <span>、<br>、<img>、<i>等，这些都为内联元素。

区块元素

• 总是在新的一行上显示。
• 高度、行高、宽度、内外边距都是可以控制的。
• 高度默认为0，是根据元素里的内容而决定的，宽度是父元素的宽度，但是可以通过css来控制宽度和高度，可以利用浮动和定位使得他与其他块元素显示在同一行。
• <div>、<form>、<p>、<ul>等，这些都是区块元素。

二、display元素和实例

1、元素的显示和隐藏

• 使用display:none将元素隐藏起来，此时元素不占用页面空间。
• 使用visibility:hidden也可以隐藏起来，此元素会占用空间。

2、通过display改变内联元素或块级元素

（1）display:block就是将元素显示为块级元素

block元素的特点：

• 总是在新行上开始
• 高度、宽度、行高以及上下边距都可控制
• 宽度开始时默认为容器的100%，除非自定义宽度

（2）display:inline就是将元素显示为行内元素

inline元素的特点是：

• 和其他元素都在一行上
• 高度、宽度、行高和上下边距不可改变

（3）display:inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。此特性的元素呈现为内联对象，周围元素保持在同一行，且可以设置宽度和高度地块元素的属性。

三、浮动和清除浮动

1、什么是浮动

浮动元素的特点：浮动元素会脱离文档流并向左/向右浮动，知道碰到父元素或者另一个浮动元素。

2、清除浮动

由于浮动会脱离文档流，这个问题对整个页面布局有很大的影响。

清除浮动的底层原理是在被清除浮动元素上边或者下边添加足够的清除空间。

注意：通过在别的元素上清除浮动来实现撑开高度，而不是在浮动元素上。

四、CSS positiion属性

positiion属性设置元素定位类型，可以通过top,bottom,right,left属性，控制元素的定位位置。

position属性值有static,relative,absolute,fixed四个值

1、static静态定位

• HTML元素的默认值，既没有定位，元素出现在正常文档流中。
• 静态定位的元素不会受到top,bottom,right,left属性的影响。

2、fixed固定定位

• 脱离标准流，在页面中不占位置。
• 不管页面有多大，永远相对浏览器的边框来定位。

3、relative相对定位

• 不脱离标准流，在页面中占位置。
• 相对于自己原来的位置来进行定位。

4、absolute绝对定位

• 脱离标准流，在页面中不占位置（漂浮）。
• 如果没有父元素，则现对于body定位；有父元素，但没有定位，还是相对于body定位；如果父元素有定位，则相对于父元素来定位。