【web前端】CSS笔记小结 浮动+清除浮动+PS切图（Day 5）

已于 2022-04-27 18:04:00 修改
阅读量2k 收藏 1
点赞数 2
分类专栏： web 文章标签： 浮动布局 清除浮动 CSS布局 PS切图 前端开发
于 2022-04-22 22:57:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_61096287/article/details/124325092
版权

来源：黑马程序员pink老师前端入门教程

目录

I. 传统网页布局的方式*3

❀标准流 (普通流/文档流）

II. 浮动

①需要浮动的原因

②什么是浮动

❀左右盒子

 ※※※疑惑→为什么right1盒子会被覆盖掉？ 

③浮动特性※

❀浮动元素会脱离标准流 (脱标)※​

※※图解

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

※※图解

​

 ※※※疑惑→为什么div里的5会跟着浮动的盒子移动？

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

※※图解

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

⑤练习

✿一大四小​

✿左小右大

✿左一右二 

⑥常见页面布局

✿最基础款

✿升级款

※※效果

​※※代码

⑦注意点

✿图解 

※※两浮一标

※※※※代码

※※浮标浮

※※※※代码→上一个浮标换位置即可

III. 清除浮动 

①原因

②本质

③方法*4

❀额外标签法→也叫隔墙法(W3C推荐)

​

❀父级添加overflow 属性

​

❀父级添加after 伪元素

 ​

❀父级添加双伪元素

总结

IV. PS 切图

①常见图片格式

​②图层切图

​ 

③切片切图

④PS插件切图→cutterman相关

✿安装

※※流程

✿使用

V. 案例的知识点

①CSS属性的书写顺序

②页面布局整体思路

I. 传统网页布局的方式*3

❀标准流 (普通流/文档流）

II. 浮动

①需要浮动的原因

②什么是浮动

❀左右盒子

※※左盒子在前

代码：

<!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;
        }
        
        div {
            height: 200px;
            width: 200px;
            background-color: burlywood;
            padding: 10px;
        }
        
        .left {
            float: left;
        }
        
        .left1 {
            width: 100px;
            height: 100px;
            background-color: blueviolet;
            float: left;
        }
        
        .right {
            float: right;
        }
        
        .right1 {
            width: 150px;
            height: 150px;
            background-color: aquamarine;
        }
    </style>
</head>

<body>
    <div class="left">
        <div class="left1">1</div>
        <div class="right1">测试一下</div>
    </div>
    <div class="left">2</div>
    <div class="right">3</div>
</body>

</html>

※※右盒子在前

代码： 

<!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;
        }
        
        div {
            height: 200px;
            width: 200px;
            background-color: burlywood;
            padding: 10px;
        }
        
        .left {
            float: left;
        }
        
        .left1 {
            width: 100px;
            height: 100px;
            background-color: blueviolet;
            float: left;
        }
        
        .right {
            float: right;
        }
        
        .right1 {
            width: 150px;
            height: 150px;
            background-color: aquamarine;
        }
    </style>
</head>

<body>
    <div class="left">
        <div class="right1">测试一下</div>
        <div class="left1">1</div>

    </div>
    <div class="left">2</div>
    <div class="right">3</div>
</body>

</html>

 ※※※疑惑→为什么right1盒子会被覆盖掉？ 

③浮动特性※

❀浮动元素会脱离标准流 (脱标)※

※※图解

代码：

<!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;
        }
        
        div {
            height: 300px;
            width: 200px;
            background-color: burlywood;
            padding: 10px;
        }
        
        .left {
            width: 100px;
            height: 100px;
            background-color: blueviolet;
            float: left;
        }
    </style>
</head>

<body>
    <div class="left">1</div>
    <div>2</div>
</body>

</html>

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

※※图解

缩小后↓ 

代码：

<!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;
        }
        
        div {
            height: 300px;
            width: 200px;
            background-color: burlywood;
            padding: 10px;
        }
        
        .left {
            width: 100px;
            height: 100px;
            background-color: blueviolet;
            float: left;
        }
        
        .left1 {
            width: 230px;
            height: 230px;
            background-color: aquamarine;
            float: left;
        }
    </style>
</head>

<body>
    <div class="left">1</div>
    <div class="left1">2</div>
    <div class="left">3</div>
    <div class="left1">4</div>
    <div>5</div>
</body>

</html>

 ※※※疑惑→为什么div里的5会跟着浮动的盒子移动？

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

※※图解

※※※※p不浮动

※※※※p右浮动

代码：

<!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;
        }
        
        div {
            height: 300px;
            width: 200px;
            background-color: burlywood;
            padding: 10px;
        }
        
        .left {
            width: 100px;
            height: 100px;
            background-color: blueviolet;
            float: left;
        }
        
        .left1 {
            width: 230px;
            height: 230px;
            background-color: aquamarine;
            float: left;
        }
        
        p {
            height: 300px;
            background-color: cornflowerblue;
            /* 第一张不打float即可 */
            float: right;
        }
    </style>
</head>

<body>
    <div class="left">1</div>
    <div class="left1">2</div>
    <!--第二张图 <p>就一个3有点太小了，<br />多打几个字更明显doge</p> -->
    <p>就一个3有点太小了，多打几个字更明显doge</p>
    <div>5</div>
</body>

</html>

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

eg.

 

代码：

<!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;
        }
        
        div {
            height: 500px;
            width: 500px;
            background-color: burlywood;
            padding: 10px;
            margin: 100px auto;
        }
        
        .left {
            width: 100px;
            height: 100px;
            background-color: blueviolet;
            float: left;
        }
        
        .left1 {
            width: 230px;
            height: 230px;
            background-color: aquamarine;
            float: left;
        }
        
        p {
            height: 300px;
            width: 50px;
            float: right;
            background-color: chartreuse;
        }
    </style>
</head>

<body>
    <div>
        <div class="left">1</div>
        <div class="left1">2</div>
        <p>3</p>
    </div>
</body>

</html>

⑤练习

其实是把pink老师的练习改了一下hhh

✿一大四小

 代码：

<!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;
        }
        
        .box {
            width: 830px;
            height: 300px;
            background-color: deepskyblue;
            margin: 100px auto;
        }
        
        li {
            list-style: none;
        }
        
        .box li {
            float: left;
            width: 200px;
            height: 260px;
            margin-top: 20px;
            margin-right: 10px;
            background-color: bisque;
        }
        
        .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>

✿左小右大

代码：

<!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;
        }
        
        .box {
            width: 800px;
            height: 300px;
            background-color: deepskyblue;
            margin: 100px auto;
            line-height: 300px;
            font-size: 30px;
            text-align: center;
            color: aliceblue;
        }
        
        .left {
            float: left;
            width: 200px;
            height: 300px;
            background-color: dimgray;
        }
        
        .right {
            /* 这里left和right的效果是一样的 */
            float: left;
            width: 600px;
            height: 300px;
            background-color: darkorange;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="left">左 边 盒 子</div>
        <div class="right">右 边 盒 子</div>
    </div>
</body>

</html>

✿左一右二 

效 果 图
细  节  图

  代码：

<!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;
        }
        
        .box {
            width: 1000px;
            height: 300px;
            background-color: deepskyblue;
            margin: 100px auto;
            font-size: 30px;
            text-align: center;
            color: aliceblue;
            padding: 10px;
        }
        
        .left {
            float: left;
            width: 200px;
            height: 300px;
            line-height: 300px;
            background-color: dimgray;
        }
        
        .right {
            float: left;
            width: 800px;
            height: 300px;
            background-color: greenyellow;
        }
        
        .right .right1 {
            float: left;
            width: 180px;
            height: 120px;
            line-height: 130px;
            background-color: darkorange;
            /* 一定要记住四个数的顺序是 上 右 下 左！！！ */
            /* 写成margin-top: 20px  */
            /* margin-left: 16px 也行*/
            margin: 20px 0 0 16px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="left">左 边 盒 子</div>
        <div class="right">
            <div class="right1">1</div>
            <div class="right1">2</div>
            <div class="right1">3</div>
            <div class="right1">4</div>
            <div class="right1">5</div>
            <div class="right1">6</div>
            <div class="right1">7</div>
            <div class="right1">8</div>
        </div>
    </div>
</body>

</html>

⑥常见页面布局

✿最基础款

✿升级款

 top、footer 和浏览器一样宽→没有设置宽度 width！

※※效果

※※代码

<!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;
        }
        
        div {
            margin-bottom: 20px;
            font-size: 30px;
            color: aliceblue;
            font-weight: 700;
            text-align: center;
        }
        
        .top {
            height: 50px;
            line-height: 50px;
            background-color: coral;
        }
        
        .banner {
            margin-left: auto;
            margin-right: auto;
            width: 1000px;
            height: 100px;
            line-height: 100px;
            background-color: dimgray;
        }
        
        .box {
            width: 1000px;
            height: 500px;
            margin-left: auto;
            margin-right: auto;
            background-color: deepskyblue;
            margin-left: auto;
            margin-right: auto;
        }
        
        li {
            list-style: none;
        }
        
        .box li {
            float: left;
            width: 235px;
            height: 180px;
            line-height: 180px;
            margin-right: 20px;
            margin-bottom: 20px;
            background-color: lightsalmon;
        }
        
        .box .last {
            margin-right: 0;
        }
        
        .box div {
            float: left;
            width: 235px;
            height: 300px;
            line-height: 300px;
            margin-right: 20px;
            background-color: seagreen;
        }
        
        .box .final {
            margin-right: 0;
        }
        
        .footer {
            height: 150px;
            line-height: 150px;
            background-color: coral;
        }
    </style>
</head>

<body>
    <div class="top">t o p</div>
    <div class="banner">b a n n e r</div>
    <div class="box">
        <ul>
            <li>小 盒 子 区1</li>
            <li>2</li>
            <li>3</li>
            <li class="last">4</li>
        </ul>
        <div>大 盒 子 区1</div>
        <div>2</div>
        <div>3</div>
        <div class="final">4</div>
    </div>
    <div class="footer">f o o t e r</div>
</body>

</html>

⑦注意点

✿图解 

※※两浮一标

※※※※代码

<!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;
        }
        
        div {
            width: 1000px;
            height: 1000px;
            margin: 100px auto;
            background-color: blanchedalmond;
        }
        
        div div {
            font-size: 30px;
            font-weight: 700;
            color: aliceblue;
            margin: 0;
        }
        
        .box {
            width: 450px;
            height: 450px;
            background-color: aquamarine;
        }
        
        .box1 {
            float: left;
            width: 300px;
            height: 150px;
            background-color: coral;
        }
        
        .box2 {
            float: left;
            width: 200px;
            height: 300px;
            background-color: blueviolet;
        }
    </style>
</head>

<body>
    <div>
        <div class="box1">浮 动</div>

        <div class="box2">浮 动</div>
        <div class="box">标 准</div>

    </div>

</body>

</html>

※※浮标浮

※※※※代码→上一个浮标换位置即可

<div>
    <div class="box1">浮 动</div>
    <div class="box">标 准</div>
    <div class="box2">浮 动</div>
</div>

III. 清除浮动 

①原因

图看不明白的话这个建议看视频w→为什么清除浮动

②本质

③方法*4

 

❀额外标签法→也叫隔墙法(W3C推荐)

※常见块级元素→盒子div、段落p、标题h1~h6、无列ul、有列ol、自定义列表里的dt、dd

❀父级添加overflow 属性

❀父级添加after 伪元素

 

❀父级添加双伪元素

 

总结

IV. PS 切图

①常见图片格式

 PSD不能直接放到页面里！ 

②图层切图

③切片切图

④PS插件切图→cutterman相关

✿安装

※※流程

双击exe文件→安装后重启ps→在窗口，扩展功能里能看到

✿使用

直接看视频吧，感觉不太好总结orz→使用技巧

V. 案例的知识点

因为没有案例的那些图，所以没做←其实就是懒吧啊喂！！！

①CSS属性的书写顺序

②页面布局整体思路

恭喜看到这的小伙伴，你已经完成 CSS第五天的学习了嗷呜 ~！

下面进入第六天的学习吧(★ ω ★)→第六天！

有用的话就点赞评论收藏嗷！！

这一篇真的写了好久的qwq！

进击的文文文
关注
专栏目录
【前端】vue光标悬浮样式
洛尧的博客
10-24 804
vue光标悬浮样式
CSS浮动+常见网页布局+清除浮动+PS切图
不爱吃菜的菜菜的博客
03-26 209
1. 浮动 1.1传统网页布局的三种方式 网页布局的本质---用CSS来摆放盒子，把盒子摆放到相应位置。 CSS提供了三种传统布局方式：普通流（标准流 ） 浮动 定位 1.2 标准流（普通流/文档流） 就是标签按照规定好默认方式排列 块级元素会独占一行，从上向下顺序排列 div p h1~h6 ul ol 行内元素会按照顺序从左到右顺序排列，碰到父元素边缘会自动换行 span a em 标准流是最基本的布局方式 实际开发...
13、前端开发：CSS知识总结——浮动及高度塌陷
不迁怒，不贰过。小知识，大智慧。
08-20 456
float（浮动），会使元素向左或者向右移动，其周围的元素也会重新排列。
前端-CSS-8-浮动与清楚浮动（重点）
weixin_30607659的博客
10-21 143
<!-- 浮动是css里面布局最多的一个属性 效果： 两个元素并排了，并且两个元素都能够设置宽度和高度 浮动想学好：一定要知道它的四个特性： 1.浮动的元素脱标 2.浮动的元素互相贴靠 3.浮动的元素有“字围”效果 4.收缩的效果 ...
web前端开发之浮动标签设置
m0_58371965的博客
07-09 1427
文档流 • 文档流指的是文档中可现实的对象在排列时所占用的位置。 • 将窗体自上而下分成一行行，并在每行中按从左至右的顺序排 放元素，即为文档流。 • 也就是说在文档流中元素默认会紧贴到上一个元素的右边，如 果右边不足以放下元素，元素则会另起一行，在新的一行中继 续从左至右摆放。 • 这样一来每一个块元素都会另起一行，那么我们如果想在文档 流中进行布局就会变得比较麻烦。 浮动 • 所谓浮动指的是使元素脱离原来的文本流，在父元素中浮动起来。 • 浮动使用float属性。 • 可选值： –
js浮漂
weixin_30569153的博客
09-03 155
Element.clientWidth属性表示元素的内部宽度，以像素计。该属性包括内边距，但不包括垂直滚动条（如果有）、边框和外边距。 获取画布宽度的方式如下 canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidt 获取窗口的高度与宽度(不...
CSS浮动（PS切图）
最新发布
07-26
ps切图，Cutterman插件
web前端期末大作业：基于HTML+CSS+JavaScript制作我的音乐网站（带设计.md
08-10
该项目主要面向的是教育领域内的学生群体，旨在帮助他们完成学期末的web前端大作业。根据标题“web前端期末大作业：基于HTML+CSS+JavaScript制作我的音乐网站”，我们可以看出这是一项结合了HTML、CSS以及JavaScript...
HTML+CSS学成在线案例的素材和源码以及切图工具cutterman
07-22
适合人群：具有一定的前端基础，CSS学完浮动可以尝试做一下这个案例 能学到什么：做完这个案例，还是很有成就感的，也可以巩固一下自己的知识点，同时了解去写一个网站的流程 阅读建议：可以自己先想一下思路，再看...
web2.0css+xhtml+js+ps源文件的网站制作实例
09-02
在本项目中，“web2.0css+xhtml+js+ps源文件的网站制作实例”是一个全面的教程，旨在教你如何构建一个符合Web 2.0标准的网站，利用CSS（层叠样式表）、XHTML（可扩展超文本标记语言）和JavaScript技术，同时包含了...
JS控制HTML元素的显示和隐藏+网站浮标
伍六七的博客
10-11 2389
1）JS控制div位置，举例：浮标 img2.style.left = xPos + document.body.scrollLeft; img2.style.top = yPos + document.body.scrollTop;2）js控制DIV的显示和隐藏 document.getElementById("img2").visibility = "visible"; documen
小程序map实现 浮标、定位
tekabo的博客
11-29 2662
浮标 就是地图上不随地图移动的图标，直接在map标签外设置cover-view，里面包裹cover-image，样式使用绝对定位即可。比如地图缩小按钮标签显示在地图右上角： wxml <!-- 缩小 --> <view class='cover-smaller'> <cover-image class='icon-set' bindtap='set...
前端之悬浮按钮（1）
weixin_40841731的博客
11-25 1894
自己做的样式，保存下来以免以后使用并分享出来，如果不适合你，请不要吐槽 <div style="text-align: center; border-radius:50%;position: fixed;right: 5%;top: 80%;z-index: 4; width: 50px;height: 50px;box-shado...
通过JavaScript实现漂浮
In_Zihuatanejo的博客
06-21 952
web前端
html5 实现可拖拽移动的悬浮图标
weixin_34301132的博客
05-10 1万+
h5 上经常会有这样的需求：需要在页面上加上一个悬浮图标，大致是如下图的最终实现但是往往按照设计稿是不会遮住主体区域的，但是实际上有时候偏偏会遮挡主体区域，但是为了更好的点击量，又不得不悬浮在页面上...如果能让图标可拖拽移动，这样在遮住主体区域之后，用户可自由移动，这种方案及可以兼顾了。实现的效果如下：（和微信的浮窗效果类似，左右位置靠边显示，上下位置随意放）话不多说，上代码了<div c...
HTML 固定div于页面固定位置，实现悬浮按钮。
热门推荐
J1ANZ
12-14 8万+
一个小需求，页面过长，业务希望将按钮悬浮于页面上，不要一下拉就盖掉操作按钮。
css第4天笔记-圆角边框；盒子阴影；文字阴影；浮动；PS切图
weixin_51353891的博客
04-14 355
学习内容：圆角边框；盒子阴影；文字阴影；浮动；PS切图 css第03天 一、其他样式 1、圆角边框 在 CSS3 中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。 border-radius 属性用于设置元素的外边框圆角。 语法： border-radius:length; 参数值可以为数值或百分比的形式 如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为 50% 该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角 分开写：bor.
HTML5+CSS3在触屏网站开发的实践与挑战
3. 小结：触屏设计需注重操作区域大小，HTML5简化代码，CSS3提升视觉效果，但需关注老旧设备的兼容性问题。 四、前端JavaScript经验分享 1. 调研：评估了iUI、jQTouch、Sencha Touch和jQuery Mobile等移动Web开发...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

进击的文文文

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值