文章目录

布局概述网页布局页面元素定位机制布局常用属性浮动属性（float）清除属性（clear）定位属性（position）溢出属性（overflow）层叠属性（Z-index）布局类型常见类型单列布局双列布局三列布局通栏布局HTML5中语义标签命名规范常见布局技巧margin负值运用文字围绕浮动元素CSS 三角强化

布局概述

DIV+CSS布局：网页html通过DIV标签+CSS样式表代码开发制作的（html）网页的统称

网页布局

目的：使页面结构清晰、有条理、易读

思想：

确定"版心"：页面主体内容所在位置 （通常在页面中水平居中）分析页面中的模块：头部(header)、导航(nav)、焦点图(banner)、内容(content)、页面底部(footer)控制页面中的模块：通过盒子模型，使用DIV+CSS进行模块的控制

过程：

准备好相关网页元素，基本都是盒子box利用CSS设置好盒子样式，摆放到相应位置往盒子里装内容

页面元素定位机制

1.流式布局：按照元素的类型和HTML源文件出现的顺序进行定位

块布局（block）：从上到下依次排列水平布局（inline）：从左到右一行中布局

文档流（标准流、普通流）：浏览器根据元素在html文档中出现的顺序，从左向右，从上到下依次排列

块级元素会独占一行，从上向下顺序排列

常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table行内元素会按照顺序，从左到右顺序排列，碰到父元素则自动换行

常用元素：span、a、i、em等

2.浮动布局（float）：当元素浮动时，不再处于普通文档中，不占据空间，但是会缩短行宽，产生文字环绕的效果

典型应用：多个块级元素一行内排列显示

网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动

注意：

浮动和标准流的父盒子搭配。先用标准流的父元素排列上下位置，内部子元素采取浮动排列左右位置一个元素浮动后，理论上其余兄弟元素也应浮动。浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流

3.定位布局（position）：

组成：定位模式+边偏移

定位模式：用于指定一个元素在文档的定位方式

绝对定位（position：absolute）：通过页面坐标（页面左上角为初始点）方式来定位元素。使用绝对定位后元素不会占用文档流空间相对定位（position：relative）：将它所在的位置（文档流位置）为初始点，通过设置垂直和水平位置

边偏移：决定了该元素最终位置

注意：

使用相对定位，原来在标准流的位置继续占有。使用绝对定位，不再占有原先位置如果没有父元素或者父元素没有定位，则以浏览器为准定位（Document文档）如果父元素有定位，则以最近一级有定位的父元素为参考父容器使用相对定位。子元素使用绝对定位 页面左上角则不是初始定位而是父容器的左上角与定位相关的属性left、top、right、bottom只有使用了定位属性（position）后才有效，只能同时使用相邻的两个坐标属性，不能同时使用相对两个属性

子绝父相：

子元素使用绝对定位，不占有位置，可以放到父元素任何一个地方，不影响其它兄弟元素父元素需要加定位限制子元素在父元素显示，因此要使用绝对定位，占有位置

总结：相对定位经常用来作为绝对定位的父级

布局常用属性

浮动属性（float）

指设置了浮动属性的元素会脱离标准文档流的控制，移动到其父元素中指定位置，浮动的盒子不再保留原先的位置浮动的元素互相贴靠在一起（不会有缝隙），父级宽度装不下浮动盒子则会另起一行对齐浮动的元素会具有行内块元素的特性。

①行内元素有浮动后，不需要转换块级/行内块元素就可以直接给高度和宽度

②块级盒子没有设置宽度，默认和父级一样宽，添加浮动后，大小根据内容来确定

选择器{float：属性值;}

清除属性（clear）

由于浮动元素不再占用原文档流中的位置，所以会对页面中其他元素的排版产生影响，如果要避免这种影响，就需要对元素清除浮动。

清除浮动原因：①父级没高度 ②子盒子浮动 ③影响下面布局，清除浮动

清除浮动策略:让浮动只在父盒子内部影响，不影响父盒子外的其他盒子

选择器{clear：属性值;}

清除浮动方法（4种）：

额外标签法：在浮动元素末尾添加空标签（必须为块级元素） 设置clear：both属性

优：通俗易懂、书写方便 缺：结构化差，无意义标签父级添加overflow：overflow：hidden、auto或者scroll

优：代码简洁 缺：无法显示溢出部分：after 伪元素法：给父元素添加

优：没有增加标签，结构更简单 缺：照顾低版本浏览器

.clearfix:after{content:"";disply:block;height:0;clear:both;visibility:hidden;}.clearfix{/* IE6、7专有*/*zoom:1;}

双伪元素清除浮动：给父元素添加

优：代码更简洁 缺：照顾低版本浏览器

clearfix:before,.clearfix:after{content:"";display:table;}.clearfix:after{clear:both;}.clearfix{*zoom:1;}

定位属性（position）

浮动布局虽然灵活，但是却无法对元素的位置进行精确的控制。在CSS中，通过定位属性可以实现网页中元素的精确定位。

选择器{position：属性值;}

注意：absolute和relative的区别

定位的拓展：

1、固定定位盒子在版心右侧位置：

让固定定位的盒子left：50%让固定定位的盒子margin-left：版心宽度的一半

2、绝对定位盒子居中：

加了绝对定位盒子不能通过margin：0 auto水平居中

让盒子左侧移动到父元素水平中心位置：left：50%让盒子向左移动到自身宽度一半：margin-left：- px（注意是负值）

（垂直居中同理）

3、脱标的盒子不会触发外边距塌陷：

浮动元素、绝对定位（固定定位）元素都不会触发外边距合并问题

4、绝对定位（固定）会压住盒子：

浮动元素不会压住标准流盒子里的文字（图片） 。因为浮动元素目的最初是文字环绕效果。绝对定位（固定）会压住下面标准流的内容

5、定位特殊性：

绝对定位和固定定位和浮动类似

行内元素添加绝对或固定定位，可直接设置高度和宽度块级元素添加绝对或固定定位，如果不给高度或宽度，默认大小是内容的大小

偏移量：精确定位元素的位置，取值是数值或百分比

溢出属性（overflow）

用于指定当CSS内容溢出元素框时发生的情况。

选择器{overflow：属性值;}

层叠属性（Z-index）

当对元素进行定位时，可能会出现堆叠现象，用该属性设置元素的堆叠顺序。

取值：正整数、负整数、0（默认）不能加单位如果属性值相同，按照书写顺序，越往后越大只有定位盒子才有z-index属性

布局类型

常见类型

分为以下四种：

单列布局

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

<div id="d1"></div><div id="d2"></div>

一列固定宽度并自动居中

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

一列自适应宽度（盒子模型随浏览器变化）

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

双列布局

和“一列布局”类似，只是网页内容被分为了左右两部分。

<div id="main"><div id="d3"></div><div id="d4"></div></div>

两列自适应宽度

#d3{height: 350px;width: 120px;background: red;float: left;}

#d4{height: 350px;width: 70%;background: blue;}

两列固定宽度居中

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

三列布局

对于一些大型网站，特别是电子商务类网站，由于内容分类较多，通常需要采用“三列布局”的页面布局方式。

<div id="main"><div id="d1"></div><div id="d2"></div><div id="d3"></div></div>

三列自适应宽度

#d1{height: 200px;width: 300px;background: red;float: left;}#d2{height: 200px;width: 300px;background: blue;float: left;}#d3{height: 200px;width: 300px;background: greenyellow;float: left;}

三列固定宽度居中

#d1{height: 200px;width: 300px;background: red;float: left;}#d2{height: 200px;width: 300px;background: blue;float: left;}#d3{height: 200px;width: 300px;background: greenyellow;float: left;}#main{width: 900px;margin:0 auto;}

通栏布局

无论布局类型是单列布局、两列布局或者多列布局，为了网站的美观，网页中的一些模块，例如头部、导航、焦点图或页面底部等经常需要通栏显示。

上图导航栏、页面底部设置为通栏后，无论页面放大或缩小，该模块都将横铺于浏览器窗口中。

HTML5中语义标签

命名规范

遵循规则：

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

两种命名方式：

驼峰式命名：除第一个单词外，其他首字母大写例如：navOne帕斯卡命名：每个单词间用“_”连接 例如：table_1

网页模块命名规范：

相关模块：

CSS文件：

常见布局技巧

margin负值运用

让每个盒子margin 往左侧移动 -1px 正好压住相邻盒子边框鼠标经过某个盒子的时候，提高当前盒子的层级即可（①如果没有有定位，则加相对定位（保留位置），②如果有定位，则加z-index）

ul li{float: left;list-style: none;width: 150px;height: 200px;border: 1px solid red;margin-left: -1px;}ul li:hover{/* 加相对定位 *//* position: relative;border: 1px solid blue; *//* 加z-index */z-index: 1;border: 1px solid blue;}

文字围绕浮动元素

巧妙运用浮动元素不会压住文字的

特性

文字用p标签，图片采用float属性，排版时，可调整间距，即可让文字围绕浮动元素

CSS 三角强化

<div class="price"><span class="miaosha">¥1650<i></i></span><span class="origin">¥5650</span></div>

.price {width: 160px;height: 24px;line-height: 24px;border: 1px solid red;margin: 0 auto;}.miaosha {position: relative;float: left;width: 90px;height: 100%;background-color: red;text-align: center;color: #fff;font-weight: 700;margin-right: 8px;}.miaosha i {position: absolute;right: 0;top: 0;width: 0;height: 0;border-color: transparent #fff transparent transparent;border-style: solid;border-width: 24px 10px 0 0;}.origin {font-size: 12px;color: gray;text-decoration: line-through;}