一、浮动

1.传统网页三种布局

(1)标准流

（2).浮动

（3）什么是浮动

编辑

（4）浮动的特性

(5)浮动元素经常和标准流父级搭配使用

二、常见网页布局

三、清除浮动

1.为什么要清除浮动?

2.清除浮动的本质

3.清除浮动的方法

4.浮动总结

四、PS切图

1.常见的图像格式

2.图层切图

3.切片切图

4.Cutterman

五、学成在线案例

1.css属性书写顺序

2.页面布局整体思路

3.案例

（1）头部

目标

为什么需要浮动

浮动的排列特性

3种常见布局

为什么需要清除浮动

ps切图

学成在线页面布局

一、浮动

1.传统网页三种布局

网页布局的本质➡用 CSS 来摆放盒子。把盒子摆放到相应位置

CSS 提供了三种传统布局方式：

普通流（标准流）
浮动
定位

(1)标准流

所谓的标准流，就是标签按照规定好默认方式排列

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

常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table

2.行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。
常用元素：span、a、i、em 等

以上都是标准流布局，我们前面学习的就是标准流，标准流是最基

本的布局方式。

这三种布局方式都是用来摆放盒子的，盒子摆放到合适位置，布局

自然就完成了。

注意：实际开发中，一个页面基本都包含了这三种布局方式（后面

移动端学习新的布局方式）。

（2).浮动

提问：如何让多个块级盒子(div)水平排列成一行？

比较难，虽然转换为行内块元素可以实现一行显示，但是他们之间会有大的空白缝隙，很难控制。

提问：如何实现两个盒子的左右对齐？

总结：有很多的布局效果，标准流没有办法完成，此时就可以利用

浮动完成布局。因为浮动可以改变元素标签默认的排列方式.

浮动最典型的应用：可以让多个块级元素一行内排列显示。
网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动

（3）什么是浮动

float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘

选择器 {float: 属性值;
}

（4）浮动的特性

设置了浮动（float）的元素的最重要的特性：

脱标：浮动元素会脱离标准流

浮动的盒子不再保留原先的位置

2.如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列

3.浮动元素会具有行内块元素特性
任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后都具有行内块元素相似的特性。

如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定
如果行内元素有了浮动，则不需要转换块级\行内块元素就可以直接给高度和宽度
浮动的盒子中间是没有缝隙的，是紧挨着一起的

(5)浮动元素经常和标准流父级搭配使用

为了约束浮动元素位置, 我们网页布局一般采取的策略是:

先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置

案例1

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 1200px;height: 460px;background-color: pink;margin: 0 auto;}.left {float: left;width: 230px;height: 460px;background-color: purple;}.right {float: left;width: 970px;height: 460px;background-color: skyblue;}</style>
</head><body><div class="box"><div class="left">左侧</div><div class="right">右侧</div></div>
</body></html>

案例2

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}li {list-style: none;}.box {width: 2450px;/*1226*/height: 560px;/*285*/background-color: pink;margin: 0 auto;}.box li {width: 590px; /*296*/height: 560px;/*285*/margin-right: 30px;background-color: purple;float: left;}.box .last {margin-right: 0;}</style>
</head><body><ul class="box"><li>1</li><li>2</li><li>3</li><li class="last">4</li></ul>
</body></html>

案例3

right每个盒子margin-left设置

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 1226px;height: 615px;background-color: pink;margin: 0 auto;}.left {width: 234px;height: 615px;background-color: purple;float: left;}.right {width: 992px;height: 615px;background-color: skyblue;float: left;}.right>div {width: 234px;height: 300px;background-color: pink;float: left;margin-left: 14px;margin-bottom: 14px;}</style>
</head><body><div class="box"><div class="left"></div><div class="right"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div></div></div>
</body></html>

二、常见网页布局

只要是通栏的盒子（和浏览器一样宽）不需要指定宽度

盒子和盒子之间距离用margin

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}li {list-style: none;}.top {height: 50px;background-color: gray;/*宽度和浏览器一样高，可以不写，默认和浏览器一样高*/}.banner {width: 980px;height: 150px;margin: 10px auto;background-color: gray;}.box {width: 980px;height: 300px;margin: 0 auto;background-color: pink;}.box li {width: 237px;height: 300px;float: left;background-color: gray;margin-right: 10px;}.box .last {margin-right: 0;}/*只要是通栏的盒子（和浏览器一样宽）不需要指定宽度*/.footer {height: 200px;background-color: gray;margin-top: 10px;/*盒子和盒子之间距离用margin*/}</style>
</head><body><div class="top">top</div><div class="banner">banner</div><div class="box"><ul><li>1</li><li>2</li><li>3</li><li class="last">4</li></ul></div><div class="footer">footer</div>
</body></html>

先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置
一个元素浮动了，理论上其余兄弟元素也要浮动
- 一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动
浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流

若2浮，则

若13浮，2 标准

三、清除浮动

我们前面浮动元素有一个标准流的父元素, 他们有一个共同的特点,

都是有高度的.但是, 所有的父盒子都必须有高度吗?

理想中的状态, 让子盒子撑开父亲. 有多少孩子,我父盒子就有多高.

但是不给父盒子高度会有问题吗?..…

1.为什么要清除浮动?

由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子

由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响
理想中的状态，让子盒子撑开父亲，有多少孩子，我父盒子就有多高

2.清除浮动的本质

清除浮动的本质是清除浮动元素造成的影响
如果父盒子本身有高度，则不需要清除浮动
清除浮动之后，父级就会根据浮动的子盒子自动检测高度，父级有了高度，就不会影响下面的标准流了。

选择器 {clear: 属性值;
}

我们实际工作中，几乎只用clear:both
清除浮动的策略是：闭合浮动
只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子。

3.清除浮动的方法

额外标签法也称为隔墙法，是W3C推荐的做法
父级添加 overflow 属性
父级添加 after 伪元素
父级添加双伪元素

（1）额外标签法

额外标签法会在浮动元素末尾添加一个空的标签,例如：

例如<div style="clear:both"></div>，或者其他标签（如</br>等）

注意：要求这个新的空标签必须是块级元素

优点：通俗易懂，书写方便

缺点：添加许多无意义的标签，结构化较差

实际工作可能会遇到,但是不常用

(2)overflow

可以给父级添加overflow属性，将其属性值设置为hidden,auto或scroll
优点：代码简洁
缺点：无法显示溢出的部分

(3)after伪元素法

:after 方式是额外标签法的升级版。也是给父元素添加

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

优点：没有增加标签，结构更简单
缺点：需要照顾低版本浏览器
代表网站：百度、淘宝、网易等

<div class="box clearfix"></div>

(4)双伪元素

也是给父元素添加
优点：代码更简洁
缺点：需要照顾低版本浏览器
代表网站：小米、腾讯等

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

父元素调用<div class="box clearfix"></div>

4.浮动总结

为什么清除浮动

①：父级没高度

②：子盒子浮动了

③：影响下面布局了，我们就应该清除浮动了。

四、PS切图

1.常见的图像格式

ps切图有很多切图方式:图层切图、切片切图、PS插件切图

2.图层切图

最简单的切图方式：右击图层 ➡导出 PNG 切片。

但是很多情况，需要合并图层再导出

1.选择需要的图层，图层菜单->合并图层

2.导出为png

（1)点击psd图片，找到对应的图层

(2）如何图层保存为图片

参考:https://www.taoxuemei.com/chuli/ps/355.html

①隐藏其他图层再保存

②点击图层，右键转换为智能对象。之后双击图层名称，会打开该图层，即可保存

3.切片切图

利用切片选中图片

利用切片工具手动划出

导出选中的图片

文件菜单➡存储为 web 设备所用的格式➡选择我们要的图片格式➡存储

选择切片选择工具，可以挪动切片，del删除切片

4.Cutterman

Cutterman 是一款运行在 Photoshop 中的插件，能够自动将你需要的图层进行输出，以替代传统的手工 “导出 web 所用格式” 以及使用切片工具进行挨个切图的繁琐流程。

官网：https://www.cutterman.cn/zh/cutterman

注意：Cutterman 插件要求你的 PS 必须是完整版，不能是绿色版，所以大家需要安装完整版本

cutterman下载之后是pkg,双击使用默认安装器安装

五、学成在线案例

1.css属性书写顺序

布局定位属性:display/position/float/clear/vicibility/overflow(建议display第一个写)
自身属性：width/height/margin/padding/border/background
文本属性：color/font/text-decoration/text-align/veeertical-align/white-space/break-word
其他属性(CSS):cont/cursor/border-radius/box-shadow/text-shadow/backgroud:linear-gradient

2.页面布局整体思路

确定页面的版心（可视区），测量可知
分析页面中行模块，以及每个行模块的列模块。页面布局第一准则
一行中的列模块经常浮动布局，先确定每个列大小，之后确定列的位置。页面布局第二准则
制作HTML结构。遵循现有结构，后有样式原则，结构最重要
先理清楚布局结构

3.案例

（1）头部

导航栏开发注意

实际开发中，不会直接用链接a而是用li 包含链接(li+a)的做法

li+a语义更清晰，一看就是有条理的列表型内容
如果直接用a，搜索引擎容易辨别为有堆砌关键字嫌疑

【CSS】笔记4-浮动、切图、学成在线相关推荐

web前端入门学习 css（5）（浮动）（ps切图）（css属性书写顺序）（学成在线网站案例）
文章目录传统网页布局的三种方式标准流(普通流.文档流) 浮动(为什么需要浮动?) 浮动特性浮动元素会脱离标准流,可以与普通流的元素相重叠如果多个盒子都设置了浮动,则它们会按照属性值一行内显示并 ...
CSS浮动、PS切图、学成在线案例前期准备
传统网页布局的三种方式网页布局的本质--用CSS来摆放盒子,把盒子摆放到相应位置 CSS提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序): 普通流(标准流) 浮动定位标准流所谓标准流 ...
CSS学习笔记7PS切图与仿学成在线例子
PS切图常见的图片格式 jpg,产品类的图片经常使用 gif,实际经常用于一些图片小动画效果 png,如果想要切成背景透明的图片,请选择png格式 PSD,可以直接从上面复制文字,获得图片,还可以测 ...
【HTML CSS】笔记4日 [ 学成在线素材 ]
准备素材和工具学成在线PSD源文件. 开发工具:PS(切图)/cutterman插件 + VScode(代码)+ Chrome(调试). 创建study目录文件夹(用于存放我们这个页面的相关内容), ...
学成在线首页——静态页面基础项目（HTML+CSS）【学习笔记】
来源:黑马前端难度:⭐(简单)--适合刚学习html和css的新手小白源码和素材:链接: https://pan.baidu.com/s/1Qf6OuMNyFDswJOcB93NCrw 提取码: ...
html制作课程导航页面,学成在线页面制作（HTML+CSS部分）（顶部+轮播图部分）...
学成在线页面制作(HTML+CSS部分)(顶部+轮播图部分) 成品截图前期准备素材一.项目页面PSD源文件二.前期准备工作三.CSS属性书写顺序四.布局分析五.布局流程开始页面制作头部 ...
CSS浮动/常见网页布局/清除浮动/学成在线案例
CSS 04 1. 浮动(float) 1.1 传统网页布局的三种方式网页布局的本质--用 CSS 来摆放盒子. 把盒子摆放到相应位置. CSS 提供了三种传统布局方式(简单说,就是盒子如何进行排列 ...
CSS学习笔记之学成在线项目（下） 3.3
1.1 机器学习工程师模块本人思路:定义一个content大盒子,里面包含top和ugui上下两个小盒子,小盒子里的布局以及样式与前面的模块是一致的,这里不再赘述,可直接套用style样式. 结构代 ...
黑马程序员前端-CSS练手之学成在线页面制作
前端学习笔记教程不定期更新中,传送门: 前端HTML第一天:什么是网页?什么是HTML?网页怎么形成? 黑马程序员前端-CSS入门总结黑马程序员前端-CSS之emmet语法黑马程序员前端-CSS的 ...
css布局与ldquo;切图rdquo;
CSS布局与"切图" 很多朋友问到关于在网页设计中,特别是使用CSS布局的时候,如何切图的问题,今天就来说说这个问题. 在过去,使用表格布局的时候,通常是整个页面在Photosho ...

【CSS】笔记4-浮动、切图、学成在线

一、浮动

1.传统网页三种布局

(1)标准流

（2).浮动

（3）什么是浮动

（4）浮动的特性

(5)浮动元素经常和标准流父级搭配使用

二、常见网页布局

三、清除浮动

1.为什么要清除浮动?

2.清除浮动的本质

3.清除浮动的方法

4.浮动总结

四、PS切图

1.常见的图像格式

2.图层切图

3.切片切图

4.Cutterman

五、学成在线案例

1.css属性书写顺序

2.页面布局整体思路

3.案例

（1）头部

【CSS】笔记4-浮动、切图、学成在线相关推荐

最新文章

热门文章