前端学习笔记-CSS系列(四)布局

这章主要讲一下CSS的布局方式

|display设置元素的显示方式

display:block|inline|inline-block|none

block块级元素

主要特点

1. 默认宽度为父元素宽度
2. 可设置宽高
3. 换行显示

换行显示的display:block

默认display:block元素-div,p,h1-h6,ul,form,...

inline行级元素

主要特点

1. 默认宽度为内容宽度
2. 不可设置宽高
3. 同行显示

默认display:inline元素-span,a,label,cite,em...

inline-block 兼容块行级特点

主要特点

1. 默认宽度为内容宽度
2. 可以设置宽高
3. 同行显示
4. 宽度不够可整块换行

默认display:inline-block元素-input,textarea,select,button,...

none

用来设置元素不显示

应用

|块级元素水平居中

    
    
    


    
content area

```
##### |布局-居中导航

• 导航一


• 导航二


• 导航三


• 导航四

##### |布局-定位

- 设置位置(确定要先设置定位方式才会起作用)
      top/bottom/left/right
      这四个属性分表代表上下左右距离参照元素的距离
      z-index
      表示各元素在浏览器上Z轴的层级
      优先级:父元素>子元素


 - 设置定位方式(参照物) 

       positon:static|relative|absolute|fixed
- ###### static:默认值
- ###### relative:相对位置
**属性值特点:**
1.在文档流中
2.参照物为元素本身
文档流代表页面中的br等换行对元素起作用
**应用**:
1.改变层级
2.绝对定位元素的参照物
- ###### absolute
1.默认宽度为内容宽度
2.脱离文档流(后续元素会占据他当前的位置)
3.参照物为第一个定位祖先/根元素
**应用**
1.布局-轮播头图
![轮播头图效果](http://upload-images.jianshu.io/upload_images/689998-4b66198ae6dedecd.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
**代码是这样的**

老徐视线:北京潮女逛街不穿内衣

2.布局-三行自适应布局(固定顶栏和底栏模式)
代码是这样的

我是前序元素

我是内容区域

我是后续元素

- fiexd 固定定位
1.默认宽度为内容宽度
2.脱离文档流
3.参照物为视窗
**应用：**
固定顶栏、遮罩
**兼容性**
position:fixed 在ie6及以下不支持

有的时候我们想让两部分块级元素同行显示又不脱离文档流这时候就要用到float这个定位属性
- 浮动布局
      float:left|right 
**特点**
1.float的元素在同一文档流
2.默认宽度为内容宽度
3.向指定方向一直移动
4.float元素半脱离文档流
 - 对元素，脱离文档流
 - 对内容，在文档流

清除浮动效果

    clear:both|left|right
1. 应用于后续元素
2. 应用于块级元素