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: 属性值;}

清除浮动

选择器{clear: 属性值;}

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

2.2 定位属性(position)

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

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

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

2.3 溢出属性(overflow)

选择器{overflow: 属性值;}

2.3 层叠属性(Z-index)

当对元素进行定位时，可能会出现堆叠现象；可以通过z-index属性来设置元素的堆叠顺序。

z-index的取值为整数(0、正整数、负整数)，默认值为0

3. 布局类型

3.1 单列布局

网页布局的基础，所有复杂的布局都是在此基础上演变而来的。

eg：一列固定宽度并居中：

	#d1{
        height: 120px;
        width: 1000px;
        background-color:blue;
        margin: auto;
    }

eg：一列自适应宽度：

  #d2{
        height: 200px;      
        background-color: greenyellow;
        margin: auto;
    }

3.2 两列布局

eg：两列固定宽度居中

	#main{
        width: 770px;
        margin: auto;
    }
    #d3{
        height: 300px;
        width: 120px;
        background-color: red;
        float: left;
    }
    #d4{
        height: 350px;
        width: 650px;
        background-color: blue;
        margin-left: 120px;
    }

eg：两列自适应宽度

	#d1{
        height: 300px;
        width: 120px;
        background-color: red;
        float: left;
    }
    #d2{
        height: 350px;
        width: 70%;
        background-color: blue;
        margin-left: 120px;
    }

3.3 三列布局

eg：三列固定宽度居中

 	#main{
        width: 900px;
        margin: auto;
    }
  	#d4{
        height: 200px;
        width: 300px;
        background-color: red;
        float: left;
    }
    #d5{
        height: 200px;
        width: 300px;
        background-color: green;
        float: left;
        
    }
    #d6{
        height: 200px;
        width: 300px;
        background-color: blue;
        float: left;
    }

eg：三列自适应宽度居中

	#d1{
        height: 200px;
        width: 300px;
        background-color: red;
        float: left;
    }
    #d2{
        height: 200px;
        width: 300px;
        background-color: green;
        float: right;      
    }
    #d3{
        height: 200px;
        width: 300px;
        background-color: blue;
        margin-left: 300px;
    }

4、html中的语义标签

<thead></thead>：表示表格的头部

<tbody></tbody>：表示表格的主体

<header></header>：表示页面的头部
该元素可以包含所有通常放在页面头部的内容。

<nav></nav>：表示导航栏 ，可用于传统导航条、侧边导航条、页内导航、翻页操作

<fotter></fotter>：表示页面或区域的底部

<article></article>：表示页面中独立的文档内容，该元素经常被定义一篇日志、一条新闻或用户评论

<section></section>：用于对页面内容进行分块，包括内容和标题

<aside></aside>：表示页面的附属信息(定义侧边栏、广告等等)

5、网页模块中的命名规范

原则：

• 避免使用中文命名
• 不能数字开头命名
• 不能占用关键字
• 用最少的字母达到最好理解的意义(见名知义)

命名方式：

• 驼峰式命名：除第一个单词外，其他单词首字母大写
• 帕斯卡命名：每个单词之间用下划线"_"连接

相关模块

CSS样式

最后

以上就是呆萌小伙为你收集整理的【CSS】DIV+CSS进行布局、命名规范1. DIV+CSS进行布局2. 布局属性3. 布局类型4、html中的语义标签5、网页模块中的命名规范的全部内容，希望文章能够帮你解决【CSS】DIV+CSS进行布局、命名规范1. DIV+CSS进行布局2. 布局属性3. 布局类型4、html中的语义标签5、网页模块中的命名规范所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。