CSS进阶-浮动

最新推荐文章于 2024-06-16 02:10:48 发布
最新推荐文章于 2024-06-16 02:10:48 发布
阅读量93 收藏
点赞数
文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/voiley/article/details/128466776
版权

CSS进阶05

结构伪类选择器

根据元素在HTML中的结构关系查找元素

优势：减少对HTML中类的依赖
场景：常用于查找某父级选择器中的子元素

  • 选择器
选择器说明
nth-child(n){}匹配父元素的第n个元素
nth-last-child(n){}匹配父元素的倒数第n个元素

n的注意点

功能公式
偶数2n、even
奇数2n+1、2n-1
前五个-n+5
从第五个往后n+5

伪元素

一般页面中的非主体内容可以使用伪元素

区别：

元素：HTML设置的标签
伪元素：由CSS模拟出的标签效果

种类

伪元素作用
::before在父元素内容的最前添加一个伪元素
::after在父元素内容的最后添加一个伪元素

注意点：
必须设置content属性才能生效
伪元素默认时行内元素

标准流

默认采用的一套排版规则 规定了应该以何种方式排列元素

浮动

作用：网页布局

代码：float

  • 特点
  1. 浮动元素会脱离标准流 不占位置
  2. 比标准流高半个级别 可以覆盖元素
  3. 浮动找浮动 下一个浮动会在上一浮动后面
  4. 浮动有特殊的显示效果
    一行可以显示多个
    可以设置宽高

CSS的书写顺序

1.浮动 / display
2.盒子模型：margin border padding
3.文字样式

11世纪的传闻俊生的剧
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
相关浮动的基础.txt
11-08
相关浮动的基础.txt
07-CSS浮动
weixin_44431329的博客
06-25 69
1、标准流：又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素。作用：伪元素一般页面中的非主体内容可以使用伪元素。结构伪类选择器中的n可以组成常见的公式。/* 选中倒数第一个 *//* 选中最后一个 *//* 选中第一个 *//* 选中第三个 */2、解决浮动带来的影响。1、为什么要清除浮动。
CSS3:CSS3 知识点提炼整理
05-08
CSS进阶顺序 基础 能还原设计稿、兼容各种主流浏览器 盒子模型、浮动、定位 进阶 CSS 分层架构、CSS3 、响应式、预处理 圆角、动画、个性边框、媒体查询 固定布局、流式布局、响应式布局 适应移动设备的发展 Reset....
css基础、选择器介绍、样式介绍
12-29
内容涵盖css样式问题， ...CSS布局：结构伪类选择器、伪元素、标准流、浮动； 定位：绝对定位、相对定位、固定定位、子绝父相； 装饰：垂直对齐方式、光标类型、边框圆角、overflow溢出部分显示效果
前端进阶试题.pdf
10-04
本资源摘要信息是关于前端进阶试题的知识点总结，涵盖了CSS盒子模型、DOCTYPE类型、布局技术等多个方面。 一、CSS盒子模型 CSS盒子模型是CSS技术中一个重要的概念，它将网页中的元素看作一个个盒子，然后使用CSS...
fedbook:前端修炼小册（Wenyuan's frontend developer book. Including HTML, CSS, JavaScript, etc.）
04-13
编程进阶 手写系列 面试相关 计划 支持 版权信息 鸣谢 文章 持续更新，学习不止。 风格指南 文档规范 代码风格 HTML 规范 CSS 规范 JavaScript 规范 Vue 项目规范 :up_arrow: 返回顶部 前端语言 HTML HTML 基本结构 ...
什么是CSS的:target选择器
ggq53219的博客
06-13 235
选择器只影响URL中当前的目标元素。如果用户刷新页面或者导航到另一个页面，然后再回来，之前的选中状态将不会保留，除非使用JavaScript或其他技术来保持状态。选择器用于选择当前活动的目标元素。当页面上的一个链接被点击，并且该链接指向一个页面内的元素（通过ID）时，被链接的元素就会成为目标元素，此时。这种选择器常常与页面内的导航（如Tab导航、折叠面板等）和“返回顶部”功能一起使用。下面是一个简单的例子，展示了如何使用。的元素）就会被选中，并且。，从而显示该元素的内容。在这个例子中，所有的。
vite配置unocss
YuShiYue的博客
06-13 327
unocss官方文档 具体开发中使用遇到的问题可以参考不喜欢原子化CSS得我，还是在新项目中使用了Unocss - 掘金 (juejin.cn)UnoCSS 是即时原子 CSS 引擎，其设计灵活且可扩展。核心是不固定的，所有 CSS 工具都是通过预设提供的。 这个因人而异，最直接的就是可以应付面试，如果面试官问， 安装 vite.config.ts配置 新建 vscode安装插件，有助于开发的时候有提示，以及显示编译后的css 使用技巧 给提供了一个样式编译查看地址， unocss.d
【Css】纯css展开、收起超出的文本
此人太懒，没有任何简介
06-13 424
* 颜色必须与背景相同 *//* 超过的行数隐藏 *//* 和文本大小一样 */
HTML-CSS练习例子
pacong的博客
06-09 1128
HTML CSS 练习 https://icodethis.com 作为前端练习生。不敲代码只看，入门是很慢的，所以直接实战是学习前端最快的途径之一。 这个网站练习HTML CSS的，可以打开了解一下，可以每天打卡，例子简单，循序渐进，设计的也比较好看。 下面是练习，当然布局的方法有很多，下面是一种。 01基础 这是第一个练习，但是很多大佬做出了，很多不一样的效果 比如： 设计稿 代码 <!DOCTYPE html> <html lang="en"> <head&
px转rem插件postcss-plugin-px2rem使用方法（浏览器缩放页面自适应）
x_XDGS的博客
06-13 505
浏览器缩放自适应，px转rem，postcss-plugin-px2rem插件
使用ant-design/cssinjs向plasmo浏览器插件的内容脚本content中注入antd的ui组件样式
06-14 571
但是方法就是比较繁琐，需要将antd的样式拷贝出来，然后贴到一个单独的css样式文件中，然后引入到内容脚本中。
CSS从入门到精通——动画:CSS3动画执行次数和逆向播放
最新发布
m0_73614626的博客
06-16 312
因为这里的动画比较简单，这样写没什么问题。但动画效果比较复杂时，需要计算的东西就比较多了，也比较麻烦。为了完成本关任务，你需要掌握：1.动画执行次数，2.动画反向播放。可以看出，这里动画只执行了一次。）称为一个动画的周期，也就是说，动画执行了一次。看作动画的一个周期。为了方便评测， CSS 都是需要以分号。时是直接消失的，怎么让它逐渐消失呢？根据提示，在右侧编辑器补充代码，实现。本关任务：用 CSS3 实现。让动画第二次反向播放。先创建一个动画名称为。然后把这个动画绑定到。，它规定了动画是否在。
vue在hash路由模式下实现点击定位滑动
IT_moshang的博客
06-12 345
hash路由模式下实现点击滑动
css3中有哪些新属性（特性）？
tianxianghuiwei的博客
06-13 333
这些新属性和特性使得开发者能够更加灵活和精确地控制页面的外观和行为，提升用户体验和视觉吸引力。及其相关属性，实现灵活的布局方式，使得元素在容器中可以自动调整大小和位置。属性，实现在状态改变时，元素样式平滑过渡的效果，如颜色、大小、位置等。属性，为元素添加阴影效果，可以设置阴影的颜色、大小、模糊度和偏移量。属性，实现元素的旋转、缩放、倾斜和移动，而无需改变文档布局。属性，实现更复杂的动画效果，可以控制元素的逐帧动画行为。函数，实现背景色的渐变效果，可以创建平滑过渡的色彩效果。
css3新增的伪类有哪些
ggq53219的博客
06-12 373
CSS3 引入了许多新的伪类选择器，这些选择器为开发者提供了更多的样式控制选项。）可能并不是所有浏览器都支持，或者可能需要特定的API（如全屏API）才能触发。并不是真正的 CSS3 伪类，但它们在这里被提及是为了完整性。请注意，某些伪类（如。
HTML静态网页成品作业(HTML+CSS)—— 环保主题介绍网页(5个页面)
weixin_42283461的博客
06-10 1158
HTML静态网页成品作业(HTML+CSS)—— 环保主题介绍网页(5个页面)
HTML初体验
linux423的博客
06-14 348
可参考jd.com官网，ctrl+u查看当前页面源代码找到你的项目，在项目中创建html类型的网页文件标准的HTML正确书写格式效果如下。
html实现粘贴excel数据，在页面表格中复制
weixin_43805439的博客
06-13 427
Html table 实现Excel多格粘贴
css clip-path path
01-07
CSS的clip-path属性用于创建元素的可显示区域，可以通过裁剪方式来显示区域内的部分，而隐藏区域外的部分。clip-path属性的基本语法如下： ```css clip-path: clip-source | basic-shape | geometry-box | none; ``` 其中，clip-source可以是以下几种类型之一： 1. URL：可以使用SVG图像作为裁剪路径。例如： ```css clip-path: url(path/to/clip-path.svg); ``` 2. 基本形状（basic-shape）：可以使用基本形状来定义裁剪路径。基本形状包括矩形（rectangle）、椭圆（ellipse）、圆（circle）、多边形（polygon）等。例如： ```css clip-path: circle(50% at 50% 50%); ``` 3. 几何框（geometry-box）：可以使用元素的边界框或者视口的边界框作为裁剪路径。例如： ```css clip-path: padding-box; ``` 4. none：表示不进行裁剪，元素将完全显示。 下面是一个使用clip-path属性的示例： ```css div { width: 200px; height: 200px; background-color: red; clip-path: circle(50% at 50% 50%); } ``` 以上代码将创建一个宽高为200px的红色正方形，并将其裁剪为一个圆形。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值