CSS第四节

最新推荐文章于 2023-06-29 20:02:31 发布

打码的张同学

最新推荐文章于 2023-06-29 20:02:31 发布

阅读量217

点赞数

分类专栏： CSS学习笔记文章标签： css html css3

本文链接：https://blog.csdn.net/m0_70849322/article/details/125127463

版权

CSS学习笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS中的浮动布局，包括浮动的定义、特性以及为何需要浮动。接着讨论了清除浮动的原因和多种方法，如额外标签法、overflow法和伪元素法。最后讲解了PS切图，包括常见图片格式、图层切图、合并图层、切片切图以及使用Cutterman插件进行自动化切图。

摘要由CSDN通过智能技术生成

1.浮动(float)

css提供了三种传统的布局方式：普通流、浮动、定位；

1.1标准流（普通流/文档流）

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

块级元素会独占一行，从上到下顺序排列。
常用元素：div、hr、p、h1-h6、ul、ol、dl、form、table
行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。
常用元素：span、a、i、em

普通流是最基本的布局方式。

1.2为什么需要浮动？

很多布局效果，标准流没有办法完成，此时就可以利用浮动布局。浮动可以改变元素标签的默认排序方式。
浮动最典型应用：多个块级元素一行显示。
页面布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。
网页布局第二准则：先设计盒子大小，在设置盒子位置。

1.3什么是浮动？

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

选择器 {
    float:属性值；
}

属性值	描述
none	不浮动
left	向左浮动
right	向右浮动

1.4浮动特性

1.浮动元素会脱离标准流

2.浮动元素会一行内显示并且元素顶部对齐

3.浮动元素会具有行内块元素的特性

注意：

脱离标准流浮动到指定位置，不保留原来的位置。
若多个盒子设置浮动，会按照属性值一行显示并顶端对齐排列，浮动元素相互贴在一起（没有间隙），若父级宽度放不下盒子，多出的盒子会另起一行显示。
任何元素都可以设置浮动，浮动元素具有行内块的属性。
- 若块级元素没有设置宽度，则默认和父级一样宽。
- 浮动盒子无间隙
- 行内块性质可应用
- 浮动元素经常作为子级和标准流父元素搭配在一起使用。一般采用标准流先布局网页上下排列，浮动布局网页左右排列的网页布局第一准则。

总结：

总而言之，浮动元素就好像单独列出一个上图层，未浮动元素就像是一个下图层，除了下图层对上图层有范围的限制外，浮动元素和未浮动元素形同陌路，分别参与排列。

2.清除浮动

2.1为什么清除浮动？

父级盒子很多情况下，不方便给高度，盒子浮动不占有位置，父级盒子高度为 0 时，就会影响下面的标准流，对后面元素排版产生影响。

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

2.2清除浮动的方法

1.额外标签法（隔墙法）

W3C推荐：

在最后一个浮动元素末尾加一个空块级元素，给其赋以属性clear:both。

<style> 
.clear {
    clear：both;
}
</style>
<body>
<div class="clear"></div>
</body>

优点：通俗易懂，书写方便。
缺点：添加许多无意义标签，结构化差。

2.overflow法

可以给父级元素添加overflow属性，将其属性设置为：hidden auto scroll中任意一个。

优点：代码简洁
缺点：无法显示溢出部分

3.`:after`伪元素法

可以认为是额外标签法的一种。

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

4.双伪元素法

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

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

总结：

清除浮动的主要原因是布局的需求，父级没有高度，子盒子浮动异常。

3.PS切图

3.1 常见的图片格式

JS 图像格式：JPEG（JPG）对色彩的信息保留较好，高清，颜色较多，产品类的图片经常用到 jpg 格式的。
gif 图像格式，GIF 格式最多只能存储 256 色，所以通常用来显示简单图形及字体，但是可以保存透明背景和动画效果，实际上经常用于一些图片小动画效果。
png 图像格式是一种新兴的网络图形格式，结合了 GIF 和 JPEG 的特点，具有存储形式的特点，能够保存透明背景。如果想要切成背景透明的图片，请先择 png 格式。
PSD 图像格式是 Photoshop 的专用格式，里面可以存放图层、通道、遮罩等多种设计稿。对我们前端人员来说，最大的优点是我们可以上面复制文字，获得图片，还可以测量大小和距离。