【CSS】DIV+CSS进行布局、命名规范

1. DIV+CSS进行布局

1.1 布局目的

将各部分模块有序排列，使网页的排版变得丰富、美观。

1.2 如何布局

• 确定“版心”：页面主题内容所在的位置，通常在浏览器窗口中水平居中。
• 分析页面中的模块：最简单的页面布局，主要由头部（header）、导航（nav）、焦点图（banner）、内容（content）、页面底部（footer）五部分组成。
• 控制页面中的模块：通过盒子模型，使用div+css进行模块控制

1.3 页面元素的定位机制

流式布局

按照元素的类型和在HTML源文件中出现的顺序进行定位

• 块(block)：从上到下依次排列
• 水平布局(inline)：在一行中进行水平布局

浮动布局

当元素浮动时，它将不再处于普通文档流中，相当于附在文档之上，不占据空间，但是会缩进行框,产生文字环绕的效果

定位布局

• 绝对定位(position:absolute)：通过页面坐标（页面左上角）的方式来定位元素。使用绝对定位后元素不会占用普通流空间
• 相对定位(position:relative)：如果一个元素进行相对定位，它将以它所在的位置（即它在普通流中的位置）为初始位置，然后可以通过设置垂直或水平位置，让这个元素“相对于”它的初始点进行移动

2. 布局属性

2.1 浮动属性(float)

浮动

选择器{float: 属性值;}

属性值	描述
left	元素向左浮动
right	元素向右浮动
none	元素不浮动(默认值)

清除浮动

选择器{clear: 属性值;}

属性值	描述
left	不允许左侧有浮动元素（清除左侧浮动的影响）
right	不允许右侧有浮动元素（清除右侧浮动的影响)

both 同时清除左右两侧浮动的影响

2.2 定位属性(position)

在CSS中，通过CSS定位（CSS position）可以实现网页元素的精确定位。
元素的定位属性主要包括定位模式和边偏移两部分。
定位模式：
选择器{position: 属性值;}

属性值	描述
static	自动定位（默认定位方式）、无法通过边偏移属性（top、bottom、left或right）来改变元素的位置
relative	相对定位、相对于其原文档流的位置进行定位,普通文档流中的位置保存
absolute	绝对定位、相对于其上一个已经定位的父元素进行定位,已经脱离普通文档流，在普通文档流中的位置不保存
fixed	固定定位、相对于浏览器窗口进行定位绝对定位的一种特殊形式、已经脱离普通文档流

相对定位：将元素相对于它在标准文档流中的位置进行定位
绝对定位：将元素依据最近的已经定位（绝对、固定或相对定位）的父元素进行定位，若所有父元素都没有定位，则依据body根元素（浏览器窗口）进行定位。

边偏移：
通过边偏移属性top、bottom、left或right，来精确定义定位元素的位置，其取值为不同单位的数值或百分比

属性值	描述
top	顶端偏移量
bottom	底部偏移量
left	左侧偏移量
right	右侧偏移量

2.3 溢出属性(overflow)

选择器{overflow: 属性值;}

属性值	描述
visible	内容不会被修剪，会呈现在元素框之外（默认值）
hidden	溢出内容会被修剪，并且被修剪的内容是不可见的
auto	在需要时产生滚动条，即自适应所要显示的内容<