网页布局入门

网页布局的本质就是通过CSS把盒子摆到相应位置。

网页布局方式

网页布局有以下三种方式：

• 普通流布局
• 浮动布局
• 定位布局

网页布局准则

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

网页布局第二准则：先设置盒子大小，再设置盒子位置

网页布局流程

• 确认页面版心(可视区)，可视区水平居中
• 分析页面中行模块，以及每个行中的列模块
• 一行中列模块经常浮动布局，先确定列大小，再确定列位置
• 先制作 html 结构。先结构，后样式。

标准流/普通流

标准流就是元素按照规定的默认方式排序

• 行内元素
• 块元素
• 行内块元素

浮动布局

为什么需要浮动

• 使多个<div></div>在同一行展示：在标准流中使用display: inline-block，但是盒子之间会有缝隙
• 实现两个盒子左右对齐：标准流很难实现

什么是浮动

float属性用于创建浮动框，将其移动到一边，直至左边缘/右边缘遇到其他块，或者是另一个浮动框的边缘

浮动语法：float: 属性值

• none(默认值)
• left
• right

浮动的特性

• 加了浮动的元素会脱离标准流
• 浮动的元素会一行显示并且元素顶部对齐
• 浮动的元素具有行内块元素特性

浮动的注意点

• 浮动和标准流父盒子搭配使用
• 一个元素浮动，其他元素也要浮动
• 浮动的盒子只会影响后面的标准流

清除浮动

不一定需要给父盒子设置高度

理想的状态：子盒子撑开父盒子

浮动的元素不占位置(浮动布局中没有子盒子撑开父盒子)

因此需要清除浮动，清除浮动有以下几种方式：

• 额外标签法(w3c 推荐)：在最后一个浮动的元素添加块级元素并添加属性clear: left/right/both(推荐)
• 父级元素添加overflow: hidden/auto/scroll属性
• 父级添加after伪元素
• 父级添加双伪元素

1
2
3
4
5

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

1
2
3
4
5
6

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

切图

常见的图片格式

• jpg：对色彩保留信息好，产品类图片
• gif：显示简单的图形及字体，图片动画。特点：保存透明背景和动画效果
• png：结合 jpg 与 gif
• psd：photoshop 的专用格式

切图方式

• 图层切图：移动工具、合并图层(ctrl + e)
• 切片切图：切片工具
• 插件切图：Cutterman
• 其他软件：蓝湖、幕客

定位

为什么需要定位

• 盒子自由移动，并且压住其他盒子
• 盒子位置固定

定位组成

• 定位方式
  • static(默认值)
  • relative
  • absolute
  • fixed
  • sticky
• 边偏移
  • top
  • right
  • bottom
  • left

相对定位：relative

• 相对定位是相对于盒子自己原来位置
• 相对定位原来位置继续占有(不脱标，保留原来位置)

绝对定位：absolute

• 没有父元素/父元素没有定位则相对浏览器进行移动
• 父元素有定位(相对/决定/固定)则相对最近一级有定位的父元素进行移动
• 绝对定位脱标，不占有原来位置

子绝父相

子级使用绝对定位，父亲需要相对定位

• 子级绝对定位，不会占有位置，可以放在任何地方
• 父级相对定位，约束子级相对自己移动，并且相对定位占有原来位置

固定定位

• 固定定位是固定于浏览器可视区的位置
• 固定定位会脱标，可以看做是特殊的绝对定位
• 固定版心右侧：left: 50%; margin-left: 1/2版心宽度

粘性定位

• position: sticky
• 必须设置top/right/bottom/left中的一个
• 不脱标

定位的叠放顺序

z-index，值越大，越在上面

绝对定位的盒子水平/垂直居中

• left: 50%; margin-left: -1/2自己宽度
• top: 50%; margin-top: -1/2自己宽度

定位特性

• 加了绝对/固定定位/浮动的盒子会变成行内块元素
• 加了绝对/固定定位/浮动的元素默认宽度是内容宽度
• 绝对/固定定位/浮动的盒子不会发生外边距合并
• 绝对/固定定位会压住标准流所有(盒子+文字)，浮动不会压住文字

元素的显示与隐藏

display

通过display控制隐藏的元素不会占有原来位置，有以下几个主要可选的值：

• none(隐藏元素)
• block(显示元素/更改为块元素)

visibility

通过visibility控制隐藏的元素还会占有原来位置，有以下几个可选的值：

• inherit(继承，默认值)
• visible(可见的)
• hidden(隐藏)
• collapse(隐藏表格)

overflow

overflow主要控制溢出部分的显示策略，有以下几个可选的值：

• hidden(隐藏)
• visible(可见的，默认值)
• auto(有溢出，才展示滚轮。textarea元素的默认值)
• scroll(总是展示滚轮)