【网页布局形式----浮动】

网页布局形式----浮动

  • css浮动:
  • 一、常见的三种网页布局形式:
    • 1.1 网页布局两大准则:
  • 二 、浮动:
    • 2.1 浮动语法:
    • 2.2 浮动特性(重难点):
      • 浮动元素通常与标准流的父级元素搭配使用:
    • 2.3 浮动注意事项:
    • 2.4 清除浮动!!!
      • 2.4.1 为什么清除浮动:
      • 2.4.2 清除浮动语法:
      • 2.4.3 清除浮动总结
  • 三、PS:
    • 3.1 常见的图片格式:
    • 3.2 ps切图:
      • (1) 图层切图(使用最多)
      • (2) 切片切图:
      • (3) 添加ps插件cutter插件快速切图
      • 蓝湖,像素大厨app:

css浮动:

学习目标:【网页布局形式----浮动】_第1张图片

一、常见的三种网页布局形式:

网页布局的本质----CSS摆放盒子

CSS中三种传统布局方式(盒子排列顺序)

((1)标准流(普通):标签按照默认规定的方式排列

  • 块状元素独自占一行
  • 行内元素按照顺序从左往右排列

(2)浮动:

(3)定位

实际开发中,一般一个页面需要同时包含这三种布局方式

1.1 网页布局两大准则:

网页布局第一准则:多个块级元素纵向排列用标准流,多个块级元素横向排列用浮动

网页布局的第二准则:先设置盒子的大小,再设置盒子的位置

二 、浮动:

为什么需要浮动?改变标签默认的排列方式

多个盒子怎么占同一行:将盒子设置为行内块元素:样式中设置display-block

但是这样盒子之间会有比较大的空隙,比较难控制。

2.1 浮动语法:

float属性创建浮动框,浮动的意思是将他们移到一边,靠着浏览器的边缘或者其他浮动框的边缘

浮动的语法:
【网页布局形式----浮动】_第2张图片
浮动属性值:
【网页布局形式----浮动】_第3张图片

2.2 浮动特性(重难点):

1 脱标:浮动元素会脱离标准流,不再保留原来的位置(让出位置)

可以实现叠加效果

2 多个浮动的盒子:会按照属性值,一行内显示并且顶端对齐

注:如果父级元素装不下这些浮动的盒子,多出的会另起一行显示

3 任何元素浮动之后都有行内块元素相似特性:

  • 行内元素加浮动后具有行内块元素的特性

  • 块元素加浮动后具有行内块元素的特性

浮动元素通常与标准流的父级元素搭配使用:

目的:约束浮动元素的位置(符合网页布局第一准则)

步骤一:先用标准流的父元素排列上下位置

步骤二:再在父元素中采取浮动排列左右位置(以父元素为基准浮动子盒子)
【网页布局形式----浮动】_第4张图片

2.3 浮动注意事项:

1 浮动常与标准流的父元素搭配使用:

先用标准流排列上下,之后内部的元素通过浮动排列左右

2 一个元素浮动,理论上其余的兄弟元素也需要浮动(一浮全浮)

记住:浮动的盒子只会影响这个盒子后面的标准流不会影响前面的标准流

2.4 清除浮动!!!

引入: 所有父盒子都需要设置高度吗?

由于父盒子很多情况下不便给出高度,但是浮动后的子盒子是不占位置,导致父盒子的高度为0,会影响下面的标准流的盒子(浮动的元素不占原文档流的位置,会对后面元素的排版产生影响)

最理想的状态是由子盒子来决定(自动撑开)

2.4.1 为什么清除浮动:

1 父级没有设置高度

2 子盒子浮动(脱标)

3 影响了下面的布局,需要清除浮动

因此要清除浮动:

清除浮动的本质:清除浮动元素脱离标准流造成的影响

清除之后,父元素就能根据浮动的子盒子检测到高度

2.4.2 清除浮动语法:

在这里插入图片描述
属性值:
【网页布局形式----浮动】_第5张图片

清除的方法:闭合浮动,只让浮动在父盒子中产生影响

(1) 额外标签法(隔墙法):在最后一个浮动的盒子添加空标签(必须是块级元素)----不常用

(2) 父级添加overflow属性:属性值设置为hidden,auto或者scroll

(3) after伪元素法:百度,淘宝,网易的网页使用的这种清除浮动的方法
【网页布局形式----浮动】_第6张图片

只需要将这段代码调用就可以

4 双伪元素清除浮动:给父元素添加:小米,腾讯的网站使用
【网页布局形式----浮动】_第7张图片

在父元素(父盒子)的前后都插入一个盒子:前后闭合

2.4.3 清除浮动总结

清除浮动的四种方式:
【网页布局形式----浮动】_第8张图片

三、PS:

3.1 常见的图片格式:

1 jpg图像格式:色彩信息比较好,颜色丰富,产品类图片

2 gif图像格式:颜色比较少,可以保存透明背景和动画

3 png图像格式:结合jpg和gif的特点,一般背景透明的图片选择png格式

4 PSD图像格式:是ps的专用格式,方便前端测量,也可以选中文字,网页设计稿

3.2 ps切图:

(1) 图层切图(使用最多)

右击图层,快速当初为PNG

如果需要图片上的文字,先进行合并图层:

(1)选中需要的图层,图层菜单点击合并图层(ctrl+e)

(2)右键快速导出图层

(2) 切片切图:

(1)使用切片工具(左边栏第一列第三个)手动划出

(2)导出选中的图片:文件->导出->存储为web所用格式

(3) 添加ps插件cutter插件快速切图

Cutterman是一个运行再Photoshop中的插件,非常好用

完整版本的ps才可以安装

蓝湖,像素大厨app:

将psd文件直接拖动到像素大厨当中

你可能感兴趣的:(Web前端(网页设计),css,css3,html)