CSS浮动详细教学(CSS从入门到精通学习第四天)

news/2024/7/21 10:58:22/文章来源:https://blog.csdn.net/m0_49067926/article/details/139127673

css第04天

一、其他样式

1、圆角边框

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

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

语法:

 border-radius:length;    
  • 参数值可以为数值或百分比的形式
  • 如果是正方形,想要设置为一个圆,把数值修改为高度或者宽度的一半即可,或者直接写为 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; 

在这里插入图片描述

注意:

1.默认的是外阴影(outset),但是不可以写这个单词,否则导致阴影无效

2.盒子阴影不占用空间,不会影响其他盒子排列。

3、文字阴影

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

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

在这里插入图片描述

二、浮动

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

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

  • 普通流(标准流)

  • 浮动

  • 定位

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

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

2、标准流(普通流/文档流)

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

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

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

3、为什么需要浮动?

在这里插入图片描述

在这里插入图片描述

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

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

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

4、什么是浮动?

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

语法:

 选择器 { float: 属性值; }

在这里插入图片描述

5、浮动特性(重难点)

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

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

在这里插入图片描述

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

在这里插入图片描述

注意:

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

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

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

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

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

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

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

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

在这里插入图片描述

三、常见网页布局

浮动布局注意点

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

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

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

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

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

四、清除浮动

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

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

在这里插入图片描述

2、清除浮动本质

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

注意:

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

3、清除浮动样式

语法:

 选择器{clear:属性值;} 

在这里插入图片描述

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

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

4、清除浮动的多种方式

4.1、额外标签法

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

使用方式:

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

例如 <div style="clear:both"></div>,或者其他标签(如<br />等)。

​ 优点: 通俗易懂,书写方便

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

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

总结:

​ 1、清除浮动本质是?

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

​ 2、清除浮动策略是?

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

​ 3、额外标签法?

​ 隔墙法, 就是在最后一个浮动的子元素后面添加一个额外标签, 添加 清除浮动样式.

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

4.2、父级添加 overflow 属性

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

例如:

overflow:hidden | auto | scroll;

优点:代码简洁

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

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

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 所用格式” 以及使用切片工具进行挨个切图的繁琐流程。

官网:http://www.cutterman.cn/zh/cutterman

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

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.ldbm.cn/p/430732.html

如若内容造成侵权/违法违规/事实不符,请联系编程新知网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vscode:如何解决”检测到include错误,请更新includePath“

vscode:如何解决”检测到include错误&#xff0c;请更新includePath“ 前言解决办法1 获取includePath路径2 将includePath路径添加到指定文件3 保存 前言 配置vscode是出现如下错误&#xff1a; 解决办法 1 获取includePath路径 通过cmd打开终端&#xff0c;输入如下指令&a…

《中国人大》2024年第9期目录

制图:李洪兴编校:宫宜希责编:张钰钗

【Linux 网络编程】网络的基础知识详解!

文章目录 1. 计算机网络背景2. 认识 "协议"3. 协议分层 1. 计算机网络背景 网络互联: 多台计算机连接在一起, 完成数据共享; &#x1f34e;局域网&#xff08;LAN----Local Area Network&#xff09;: 计算机数量更多了, 通过交换机和路由器连接。 &#x1f34e; 广…

非量表题如何进行信效度分析

效度是指设计的题确实在测量某个东西&#xff0c;一般问卷中使用到。如果是量表类的数据&#xff0c;其一般是用因子分析这种方法去验证效度水平&#xff0c;其可通过因子分析探究各测量量表的内部结构情况&#xff0c;分析因子分析得到的内部结构与自己预期的内部结构进行对比…

Element-UI 入门指南:从安装到自定义主题的详细教程

Element-UI 是一个基于 Vue.js 的前端组件库&#xff0c;它提供了丰富的 UI 组件&#xff0c;可以帮助开发者快速构建高质量的用户界面。以下是使用 Element-UI 的快速入门指南&#xff1a; 安装 Element-UI Element-UI 是一个基于 Vue.js 的组件库&#xff0c;它提供了丰富的…

采用Java+ SpringBoot+ IntelliJ+idea开发的ADR药物不良反应监测系统源码

采用Java SpringBoot IntelliJidea开发的ADR药物不良反应监测系统源码 ADR药物不良反应监测系统有哪些应用场景&#xff1f; ADR药物不良反应监测系统有哪些应用场景&#xff1f; ADR药物不良反应监测系统具有广泛的应用场景&#xff0c;以下是一些主要的应用场景&#xff1a…

市场巨变,移动开发行业即将迎来“第二春”?

随着鸿蒙生态的不断壮大&#xff0c;越来越多的企业开始加入其中&#xff0c;对鸿蒙OS开发工程师的需求也越来越迫切。 年初时还只有200个APP宣布加入鸿蒙生态&#xff0c;而最近华为也已经官宣&#xff0c;已经有4000多个应用加入鸿蒙&#xff0c;短短三个月就增加了20倍。 …

【Linux】TCP协议【中】{确认应答机制/超时重传机制/连接管理机制}

文章目录 1.确认应答机制2.超时重传机制&#xff1a;超时不一定是真超时了3.连接管理机制 1.确认应答机制 TCP协议中的确认应答机制是确保数据可靠传输的关键部分。以下是该机制的主要步骤和特点的详细解释&#xff1a; 数据分段与发送&#xff1a; 发送方将要发送的数据分成一…

【微机原理及接口技术】可编程计数器/定时器8253

【微机原理及接口技术】可编程计数器/定时器8253 文章目录 【微机原理及接口技术】可编程计数器/定时器8253前言一、8253的内部结构和引脚二、8253的工作方式三、8253的编程总结 前言 本篇文章就8253芯片展开&#xff0c;详细介绍8253的内部结构和引脚&#xff0c;8253的工作方…

M功能-支付平台(六)

target&#xff1a;离开柬埔寨倒计时-217day 今天突然发现我在csdn居然把我ip属地搞出来了&#xff0c;之前都没注意到&#xff0c;哎 前言 M功能演示版本做到后期(也就是第二周的后面3天)真的很心酸&#xff0c;这边安排的4后端后面都放弃了&#xff0c;觉得做不出来&#…

香港优才计划找中介是否是智商税,靠谱中介又该如何找?

关于香港优才计划的申请&#xff0c;找中介帮助还是自己DIY&#xff0c;网络上充斥的声音太多&#xff0c;对不了解的人来说&#xff0c;难以抉择的同时还怕上当受骗。 这其中很容易误导人的关键在于——信息差&#xff01; 今天这篇文章的目的就是想让大家看清一些中介和DIY…

磁带存储:“不老的传说”依然在继续

现在是一个数据指数增长的时代&#xff0c;根据IDC数据预测&#xff0c;2025年全世界将产生175ZB的数据。 这里面大部分数据是不需要存储的&#xff0c;在2025预计每年需要存储11ZB的数据。换算个容易理解的说法&#xff0c;1ZB是10^18Bytes, 相当于要写5556万块容量18TB的硬盘…

新火种AI|寻求合作伙伴,展开豪赌,推出神秘AI项目...苹果能否突破AI困境?

作者&#xff1a;小岩 编辑&#xff1a;彩云 2024年&#xff0c;伴随着AI技术的多次爆火&#xff0c;不仅各大科技巨头纷纷进入AI赛道展开角力&#xff0c;诸多智能手机厂商也纷纷加紧布局相关技术&#xff0c;推出众多AI手机。作为手机领域的龙头老大&#xff0c;苹果自然是…

web刷题记录(1)

[GXYCTF 2019]Ping Ping Ping 进入页面&#xff0c;发现有一个传入参数的框&#xff0c;目的就是为了让我们通过参数传入内容来执行代码。这里先传入本地ip&#xff0c;方便后面的ping命令运行 ls命令来查看&#xff0c;目录中的文件 传入后&#xff0c;发现目录下有flag.php,…

摩尔线程MTT S4000 AI GPU助力30亿参数大模型训练,性能比肩英伟达同类解决方案

中国国产GPU制造商摩尔线程(Moore Threads)在AI加速器领域取得了显著进展&#xff0c;其最新推出的MTT S4000 AI GPU在训练大规模语言模型时表现突出&#xff0c;据称相较于其前代产品有着显著的性能提升。根据cnBeta的报道&#xff0c;搭载S4000 GPU的全新“酷鹅千卡智能计算集…

npm : 无法加载文件 D:\Program Files\nodejs\npm.ps1,因为在此系统上禁止运行脚本

安装npm时出现如下提示&#xff1a; 出现这个错误信息&#xff0c;是系统禁止执行PowerShell的脚本。 出现的原因是&#xff0c;系统默认的执行策略是Restricted&#xff08;默认设置&#xff09;&#xff0c;限制执行&#xff0c;所以会出现如上提示。 解决方法&#xff1a;…

【产品经理】技术知识

引言&#xff1a;        在最近频繁的产品管理职位面试中&#xff0c;我深刻体会到了作为产品经理需要的不仅仅是对市场和技术的敏锐洞察&#xff0c;更多的是在复杂多变的环境中&#xff0c;如何运用沟通、领导力和决策能力来引导产品从概念走向市场。这一系列博客将分享…

记录使用 Vue3 过程中的一些技术点

1、自定义组件&#xff0c;并使用 v-model 进行数据双向绑定。 简述&#xff1a; 自定义组件使用 v-model 进行传参时&#xff0c;遵循 Vue 3 的 v-model 机制。在 Vue 3 中&#xff0c;v-model 默认使用了 modelValue 作为 prop 名称&#xff0c;以及 update:modelValue 作为…

C++笔试强训day36

目录 1.提取不重复的整数 2.【模板】哈夫曼编码 3.abb 1.提取不重复的整数 链接https://www.nowcoder.com/practice/253986e66d114d378ae8de2e6c4577c1?tpId37&tqId21232&ru/exam/oj 按照题意模拟就行&#xff0c;记得从右往左遍历 #include <iostream> usi…

2024 年 5 个 GO REST API 框架

什么是API&#xff1f; API是一个软件解决方案&#xff0c;作为中介&#xff0c;使两个应用程序能够相互交互。以下一些特征让API变得更加有用和有价值&#xff1a; 遵守REST和HTTP等易于访问、广泛理解和开发人员友好的标准。API不仅仅是几行代码&#xff1b;这些是为移动开…