CSS学习总结（五）：圆角边框、盒子阴影、文字阴影、浮动、常见网页布局、清除浮动、PS 切图_如何给盒子div中间加一行字并实现背景阴影的效果-程序员宅基地

技术标签： 学习  css  前端  

目录

一、其他样式

1、圆角边框

2、盒子阴影

3、文字阴影

二、浮动

1、传统网页布局的三种方式

2、标准流（普通流/文档流）

3、为什么需要浮动？

4、什么是浮动？

5、浮动特性

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

三、常见网页布局

浮动布局注意点

四、清除浮动

1、为什么需要清除浮动？

2、清除浮动本质

3、清除浮动样式

4、清除浮动的多种方式

4.1、额外标签法

4.2、父级添加 overflow 属性

4.3、父级添加after伪元素

4.4、父级添加双伪元素

总结

五、PS 切图

1、图层切图

2、切片切图

3、PS插件切图

一、其他样式

1、圆角边框

在 CSS3 中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。

border-radius 属性用于设置元素的外边框圆角。

语法：

 border-radius:length; 
 div {
            width: 300px;
            height: 150px;
            background-color: pink;
            border-radius: 10px;
        }

  • 参数值可以为数值或百分比的形式

  • 如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为 50%

  • 该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角

  • 分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和border-bottom-left-radius

  • 兼容性 ie9+ 浏览器支持, 但是不会影响页面布局,可以放心使用

2、盒子阴影

CSS3 中新增了盒子阴影，我们可以使用 box-shadow 属性为盒子添加阴影。

语法：

 box-shadow: h-shadow v-shadow blur spread color inset; 

        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;

            /* box-shadow: 10px 10px; */
        }

        div:hover {
            box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, .3);
        }

        /* 原先盒子没有影子,当我们鼠标经过盒子就添加阴影效果 */

3、文字阴影

在 CSS3 中，我们可以使用 text-shadow 属性将阴影应用于文本。

语法： 

 text-shadow: h-shadow v-shadow blur color;

    <style>
        div {
            font-size: 50px;
            color: orangered;
            font-weight: 700;
            text-shadow: 5px 5px 6px rgba(0, 0, 0, .3);

        }
    </style>
</head>

<body>
    <div>
        你是阴影,我是火影
    </div>
</body>

二、浮动

1、传统网页布局的三种方式

​ CSS 提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序)：

  • 普通流（标准流）

  • 浮动

  • 定位

    这三种布局方式都是用来摆放盒子的，盒子摆放到合适位置，布局自然就完成了。

注意：实际开发中，一个页面基本都包含了这三种布局方式（后面移动端学习新的布局方式） 。

2、标准流（普通流/文档流）

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

  1. 块级元素会独占一行，从上向下顺序排列。常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table

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

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

3、为什么需要浮动？

​ 总结： 有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。 因为浮动可以改变元素标签默认的排列方式.

​ 浮动最典型的应用：可以让多个块级元素一行内排列显示。

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

4、什么是浮动？

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

语法：

 选择器 { float: 属性值; }

<title>什么是浮动</title>
    <style>
        .left,
        .right {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .right {
            float: right;
        }
    </style>
</head>

<body>
    <div class="left">左青龙</div>
    <div class="right">右白虎</div>
</body>

5、浮动特性

加了浮动之后的元素,会具有很多特性,需要我们掌握的.

1、浮动元素会脱离标准流(脱标：浮动的盒子不再保留原先的位置)

 <title>浮动特性1</title>
    <style>
        /* 设置了浮动（float）的元素会：
        1. 脱离标准普通流的控制（浮）移动到指定位置（动）。
        2.浮动的盒子不在保留原先的位置 */
        .box1 {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .box2 {
            width: 300px;
            height: 300px;
            background-color: rgb(0, 153, 255);
        }
    </style>
</head>

<body>
    <div class="box1">浮动的盒子</div>
    <div class="box2">标准流的盒子</div>
</body>

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

注意：

​ 浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。

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

​ 浮动元素的大小根据内容来决定

​ 浮动的盒子中间是没有缝隙的

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

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

​ 先用标准流父元素排列上下位置, 之后内部子元素采取浮动排列左右位置. 符合网页布局第一准侧

   <title>浮动元素搭配标准流父盒子1</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>

三、常见网页布局

浮动布局注意点

1、浮动和标准流的父盒子搭配。

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

2、一个元素浮动了，理论上其余的兄弟元素也要浮动。

一个盒子里面有多个子盒子，如果其中一个盒子浮动了，其他兄弟也应该浮动，以防止引起问题。

浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流.

 <title>浮动注意点</title>
    <style>
      /* 如果一个子元素浮动了,尽量其他盒子也浮动,这样保证这些子元素一行显示 */
      .box {
        width: 900px;
        height: 300px;
        background-color: pink;
        margin: 0 auto;
      }

      .damao {
        float: left;
        width: 200px;
        height: 200px;
        background-color: purple;
      }

      .ermao {
        float: left;
        width: 200px;
        height: 150px;
        background-color: red;
      }

      .sanmao {
        float: left;
        width: 300px;
        height: 240px;
        background-color: blue;
      }
    </style>
  </head>

  <body>
    <div class="box">
      <div class="damao">熊大</div>
      <div class="ermao">熊二</div>
      <div class="sanmao">光头强</div>
    </div>
  </body>

四、清除浮动

1、为什么需要清除浮动？

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

2、清除浮动本质

清除浮动的本质是清除浮动元素造成的影响：浮动的子标签无法撑开父盒子的高度

注意：

  • 如果父盒子本身有高度，则不需要清除浮动

  • 清除浮动之后，父级就会根据浮动的子盒子自动检测高度。

  • 父级有了高度，就不会影响下面的标准流了

3、清除浮动样式

语法：

 选择器{clear:属性值;}

我们实际工作中， 几乎只用 clear: both;

清除浮动的策略是: 闭合浮动.

4、清除浮动的多种方式

4.1、额外标签法

额外标签法也称为隔墙法，是 W3C 推荐的做法。

使用方式：

​ 额外标签法会在浮动元素末尾添加一个空的标签。

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

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

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

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

总结:

​ 1、清除浮动本质是?

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

​ 2、清除浮动策略是?

​ 闭合浮动. 只让浮动在父盒子内部影响,不影响父盒子外面的其他盒子.

​ 3、额外标签法?

​ 隔墙法, 就是在最后一个浮动的子元素后面添

​ 4、加一个额外标签, 添加 清除浮动样式.

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

4.2、父级添加 overflow 属性

可以给父级添加 overflow 属性，将其属性值设置为 hidden、 auto 或 scroll 。

例如：

overflow:hidden | auto | scroll;

优点：代码简洁

缺点：无法显示溢出的部分

注意：是给父元素添加代码

 <title>为什么需要清除浮动</title>
    <style>
        .box {
            /* 清除浮动 */
            overflow: hidden;
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }

        .damao {
            float: left;
            width: 300px;
            height: 200px;
            background-color: purple;
        }

        .ermao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .footer {
            height: 200px;
            background-color: black;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="damao">熊大</div>
        <div class="ermao">熊二</div>
    </div>
    <div class="footer"></div>

</body>
4.3、父级添加after伪元素

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

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

优点：没有增加标签，结构更简单

缺点：照顾低版本浏览器

代表网站： 百度、淘宝网、网易等

4.4、父级添加双伪元素

给父元素添加

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

优点：代码更简洁

缺点：照顾低版本浏览器

代表网站：小米、腾讯等

总结

为什么需要清除浮动？

  1. 父级没高度。

  2. 子盒子浮动了。

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

五、PS 切图

1、图层切图

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

2、切片切图

2.1、利用切片选中图片

     利用切片工具手动划出

2.2、导出选中的图片

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

3、PS插件切图

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

官网：Cutterman - 最好用的切图工具

注意：Cutterman 插件要求你的 PS 必须是完整版，不能是绿色版，所以大家需要安装完整版本。
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_62764364/article/details/134660254

智能推荐

【新手科研指南5】深度学习代码怎么读-小白阶段性思路（以手写数字识别应用为例）_深度学习程序怎么读-程序员宅基地

文章浏览阅读6.2k次，点赞6次，收藏26次。我是一个深度学习代码小白，请你用中文写上注释，能让我能轻松理解下面这段代码。注意包含所有函数、调用和参数的注释。以同样的python代码块样式返回你写的代码给我。代码看累了，就看《动手学深度学习》文档：基于PyTorch框架，从底层函数实现基础功能，再到框架的高级功能。努力上路的小白一枚，麻烦路过的大佬指导一二，同时希望能和大家交流学习~争取更新学习这个文档的专栏，记录学习过程。量身定做了一套话术hhh，亲身测试还不错。这个感觉更浅一点儿，之后复习看吧。20天吃掉那只Pytorch。_深度学习程序怎么读

Java学习路线图，看这一篇就够了！-程序员宅基地

文章浏览阅读2.7w次，点赞126次，收藏1.2k次。耗废1024根秀发，Java学习路线图来了，整合了自己所学的所有技术整理出来的2022最新版Java学习路线图，适合于初、中级别的Java程序员。_java学习路线

PCL_Tutorial2-1.7-点云保存PNG_pcl::io:savepng-程序员宅基地

文章浏览阅读4.4k次。1.7-savingPNG介绍代码详情函数详解savePNGFile（）源码savePNGFile（）源码提示savePNGFile（）推荐用法处理结果代码链接介绍PCL提供了将点云的值保存到PNG图像文件的可能性。这只能用有有序的云来完成，因为结果图像的行和列将与云中的行和列完全对应。例如，如果您从类似Kinect或Xtion的传感器中获取了点云，则可以使用它来检索与该云匹配的640x480 RGB图像。代码详情#include <pcl / io / pcd_io.h>#incl_pcl::io:savepng

知乎问答：程序员在咖啡店编程，喝什么咖啡容易吸引妹纸？-程序员宅基地

文章浏览阅读936次。吸引妹子的关键点不在于喝什么咖啡，主要在于竖立哪种男性人设。能把人设在几分钟内快速固定下来，也就不愁吸引对口的妹子了。我有几个备选方案，仅供参考。1. 运动型男生左手单手俯卧撑，右手在键盘上敲代码。你雄壮的腰腹肌肉群活灵活现，简直就是移动的春药。2.幽默男生花 20 块找一个托（最好是老同学 or 同事）坐你对面。每当你侃侃而谈，他便满面涨红、放声大笑、不能自已。他笑的越弱_咖啡厅写代码

【笔试面试】腾讯WXG 面委会面复盘总结 --一次深刻的教训_腾讯面委会面试是什么-程序员宅基地

文章浏览阅读1.2w次，点赞5次，收藏5次。今天 （应该是昨天了，昨晚太晚了没发出去）下午参加了腾讯WXG的面委会面试。前面在牛客上搜索了面委会相关的面经普遍反映面委会较难，因为都是微信的核心大佬，问的问题也会比较深。昨晚还蛮紧张的，晚上都没睡好。面试使用的是腾讯会议，时间到了面试官准时进入会议。照例是简单的自我介绍，然后是几个常见的基础问题：例如数据库索引，什么时候索引会失效、设计模式等。这部分比较普通，问的也不是很多，不再赘述。现在回想下，大部分还是简历上写的技能点。接下来面试官让打开项目的代码，对着代码讲解思路。我笔记本上没有这部分代码，所_腾讯面委会面试是什么

AI绘画自动生成器：艺术创作的新浪潮-程序员宅基地

文章浏览阅读382次，点赞3次，收藏4次。AI绘画自动生成器是一种利用人工智能技术，特别是深度学习算法，来自动创建视觉艺术作品的软件工具。这些工具通常基于神经网络模型，如生成对抗网络（GANs），通过学习大量的图像数据来生成新的图像。AI绘画自动生成器作为艺术与科技结合的产物，正在开启艺术创作的新篇章。它们不仅为艺术家和设计师提供了新的工具，也为普通用户提供了探索艺术的机会。随着技术的不断进步，我们可以预见，AI绘画自动生成器将在未来的创意产业中发挥越来越重要的作用。

随便推点

Flutter ListView ListView.build ListView.separated_flutter listview.separated和listview.builder-程序员宅基地

文章浏览阅读1.7k次。理解为ListView 的三种形式吧ListView 默认构造但是这种方式创建的列表存在一个问题：对于那些长列表或者需要较昂贵渲染开销的子组件，即使还没有出现在屏幕中但仍然会被ListView所创建，这将是一项较大的开销，使用不当可能引起性能问题甚至卡顿直接返回的是每一行的Widget，相当于ios的row。行高按Widget（cell）高设置ListView.build 就和io..._flutter listview.separated和listview.builder

2021 最新前端面试题及答案-程序员宅基地

文章浏览阅读1.4k次，点赞4次，收藏14次。废话不多说直接上干货1.js运行机制JavaScript单线程，任务需要排队执行同步任务进入主线程排队，异步任务进入事件队列排队等待被推入主线程执行定时器的延迟时间为0并不是立刻执行，只是代表相比于其他定时器更早的被执行以宏任务和微任务进一步理解js执行机制整段代码作为宏任务开始执行，执行过程中宏任务和微任务进入相应的队列中整段代码执行结束，看微任务队列中是否有任务等待执行，如果有则执行所有的微任务，直到微任务队列中的任务执行完毕，如果没有则继续执行新的宏任务执行新的宏任务，凡是在..._前端面试

linux基本概述-程序员宅基地

文章浏览阅读1k次。（3）若没有查到，则将请求发给根域DNS服务器，并依序从根域查找顶级域，由顶级查找二级域，二级域查找三级，直至找到要解析的地址或名字，即向客户机所在网络的DNS服务器发出应答信息，DNS服务器收到应答后现在缓存中存储，然后，将解析结果发给客户机。（3）若没有查到，则将请求发给根域DNS服务器，并依序从根域查找顶级域，由顶级查找二级域，二级域查找三级，直至找到要解析的地址或名字，即向客户机所在网络的DNS服务器发出应答信息，DNS服务器收到应答后现在缓存中存储，然后，将解析结果发给客户机。_linux

JavaScript学习手册十三：HTML DOM——文档元素的操作（一)_javascript学习手册十三:html dom——文档元素的操作(一)-程序员宅基地

文章浏览阅读7.9k次，点赞26次，收藏66次。HTML DOM——文档元素的操作1、通过id获取文档元素任务描述相关知识什么是DOM文档元素节点树通过id获取文档元素代码文件2、通过类名获取文档元素任务描述相关知识通过类名获取文档元素代码文件3、通过标签名获取文档元素任务描述相关知识通过标签名获取文档元素获取标签内部的子元素代码文件4、html5中获取元素的方法一任务描述相关知识css选择器querySelector的用法代码文件5、html5中获取元素的方法二任务描述相关知识querySelectorAll的用法代码文件6、节点树上的操作任务描述相关_javascript学习手册十三:html dom——文档元素的操作(一)

《LeetCode刷题》172. 阶乘后的零（java篇）_java 给定一个整数n,返回n!结果尾数中零的数量-程序员宅基地

文章浏览阅读132次。《LeetCode学习》172. 阶乘后的零（java篇）_java 给定一个整数n,返回n!结果尾数中零的数量

php 公众号消息提醒,如何开启公众号消息提醒功能-程序员宅基地

文章浏览阅读426次。请注意，本文将要给大家分享的并不是开启公众号的安全操作风险提醒，而是当公众号粉丝给公众号发消息的时候，公众号的管理员和运营者如何能在手机上立即收到消息通知，以及在手机上回复粉丝消息。第一步：授权1、在微信中点击右上角+，然后选择“添加朋友”，然后选择“公众号”，然后输入“微小助”并关注该公众号。2、进入微小助公众号，然后点击底部菜单【新增授权】，如下图所示：3、然后会打开一个温馨提示页面。请一定要..._php微信公众号服务提示

推荐文章

热门文章

相关标签