CSS3-文档流简介与元素的转换

最新推荐文章于 2025-11-25 14:29:34 发布
原创 最新推荐文章于 2025-11-25 14:29:34 发布 · 95 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css3 #前端 #css

本文详细介绍了CSS的display属性如何将元素从块元素转换为行内元素、行内元素转换为块元素，以及行内块元素的特点。同时讨论了元素如何脱离文档流以实现布局控制。

一、文档流简介

二、CSS的display属性实现元素的转换

代码演示

1、块元素转换成行内元素

2、行内元素转换成块元素

3、行内元素转换成行内块元素

行内块元素既有行内元素的属性，在同一行显示；也具有块元素的属性，可以设置宽度和高度。

三、脱离文档流

 

CSS知识点汇总(五)--文本对齐&脱离文档流
qq_42445025的博客
06-29 1656
什么是 Fouc(文档样式短暂失效)？在引用 css 的过程中，如果方法不当或者位置引用不对，会导致某些页面在 windows 下的 ie 出现一些奇怪的现象，以无样式显示页面内容的瞬间闪烁，这种现象称之为文档样式短暂失效，简称 FOCU。使用 import 方法导入样式表将样式表放在页面底部有几个样式表，放在 html 结构的不同位置当样式表晚于结构性 html 加载，当加载到此样式表时，页面将停止之前的渲染。此样式表被下载和解析后，将重新渲染页面，也就出现了短暂的花屏现象。
CSS3 2D 转换
qq_48763502的博客
09-02 1589
2D 转换方法函数描述定义 2D 转换，沿着 X 和 Y 轴移动元素。定义 2D 转换，沿着 X 轴移动元素。定义 2D 转换，沿着 Y 轴移动元素。scale(x,y)定义 2D 缩放转换，改变元素的宽度和高度。scaleX(n)定义 2D 缩放转换，改变元素的宽度。scaleY(n)定义 2D 缩放转换，改变元素的高度。定义 2D 旋转，在参数中规定角度。定义 2D 倾斜转换，沿着 X 和 Y 轴。定义 2D 倾斜转换，沿着 X 轴。定义 2D 倾斜转换，沿着 Y 轴。
CSS3--美若天仙！？
金灰的博客
10-03 2626
浮动属性 float，left 表示左浮动，right 表示右浮动l特点1.浮动后的盒子顶对齐2.浮动后的盒子具备行内块特点3.父级宽度不够，浮动的子级会换行4.浮动后的盒子脱标l清除浮动：子级浮动，父级没有高度，子级无法撑开父级高度，影响布局效果推荐双伪元素法清除浮动。l拓展：浮动本质作用是实现图文混排效果。
CSS-块级元素和行内元素
weixin_41342791的博客
08-27 2339
标签分为两种等级： 　　1，行内元素。2，块级元素。 行内元素和块级元素的区别：　 行内元素：　　 与其他行内元素并排 不能设置宽高，默认的宽度就是文字的宽度 块级元素： 霸占一行，不能与其他任何元素并列。 能接受宽高，如果不设置宽度，那么宽度将默认变为父级的100%。 块级元素和行内元素的分类： 　　在HTML的角度来讲，标签分为： 　　　　文本级标签：p , span , a , b , i , u , em 　　　　容器级标签：div , h系列 , li , dt ,dd 　　
CSS3---选择器分类，最全版
yiran1919的博客
03-29 2173
此选择器与 :nth-child(n) 选择器计算顺序刚好相反，但使用方法都是一样的，其中 :nth-last-child(1) 始终匹配最后一个元素，与 last-child 等同。其中 n 可以是整数（1，2，3）、关键字（even，odd）、也可以是公式（2n+1）,而且 n 值起始值为 1，而不是 0。标签选择器，是指用HTML标签名称作为选择器，按照标签名称分类，为某一类标签指定统一的CSS样式。父元素的最后一个子元素的元素。为p标签设置样式，则当前页面，所有的p标签的样式，都生效。
CSS box-shadow 详解
Jiapan_Yu的博客
01-17 3126
box-shadow 的值定义为 none | [ inset? && <length>{2,4} && <color>?]#，默认是 none. 后半部分 [ inset? && <length>{2,4} && <color>?]# 的理解是 # 指前面的实体可以出现一次也可以多次，当是多次的时候需要用逗号隔开， && 指两边的实体都必须出现但是可以是任意顺序， ? 指前面的
屏幕适配方案 - postcss-pxtorem
weixin_41618917的博客
07-10 1830
postcss-pxtorem是一个PostCSS插件，用于将CSS中的像素值转换为rem单位，已实现响应式布局和适配不同屏幕尺寸的需求。它的适配原理是将CSS中的像素值除以一个基准值，通常是设计稿的宽度，然后将结果转换为rem单位。这样，不同屏幕尺寸下，rem单位的大小是相同的，从而实现了响应式布局和适配的效果。
CSS3的transform之3d转换、CSS3动画
m0_46324704的博客
07-18 2792
transform的3d转换和动画的基本使用方法
CSS3参考文档
雅的博客
03-17 2907
CSS3 动画属性（Animation） 属性 描述 CSS @keyframes 规定动画。 3 animation 所有动画属性的简写属性，除了 animation-play-state 属性。 3 animation-name 规定 @keyframe
css3详解
2301_79683791的博客
03-03 2962
CSS新手指南，CSS3必会知识，css3该怎么学，CSS入门技巧
HTML 与 CSS3 各种文档
04-09
6. **CSS3新属性**：例如`transform`用于2D/3D转换，`opacity`控制透明度，`filter`实现图像滤镜效果等。 此外，"10 HTML5、CSS3应用教程之 跟DIV说Bey!Bey! .doc"可能是一个关于HTML5和CSS3实际应用的教程，特别是...
前端CSS基础-常规流练习.rar
04-09
例如，可以使用`display`属性来改变元素的行为，将一个内联元素转换为块级元素，或者创建一个内联块级元素。此外，`width`、`height`、`margin`和`padding`等属性也会影响元素在常规流中的布局。 `test.css`文件很...
CSS文档流与块级元素,css
08-12
### CSS文档流与块级元素、内联元素详解 #### 文档流的概念 在CSS布局中，**文档流**是一个核心概念，它指的是HTML文档中元素的自然流动方式。想象一下，网页就像一条河流，其中的元素就像河中的船只，顺流而下，...
css-xpath-converter:简单的在线工具，可从CSSXPath转换为
05-05
CSS（层叠样式表）选择器用于样式化网页元素，而XPath（XML路径语言）则用于在XML文档中查找信息。尽管两者主要用途不同，但有时开发者可能需要在它们之间进行转换，以适应不同的场景。"css-xpath-converter"就是一...
style.width是指dev的宽度还是指dev宽度+内边距
qq_40453972的博客
11-21 327
CSS盒模型有两种类型：标准盒模型（默认）和边框盒模型。标准盒模型中，width仅定义内容宽度，总宽度=width+padding+border。边框盒模型中，width包含内容、内边距和边框的总宽度。现代开发更推荐使用边框盒模型（通过box-sizing:border-box设置），因其布局计算更直观。默认情况下style.width不包含内边距，但在边框盒模型中包含。
flex垂直布局，容器间距相等
最新发布
weixin_44601930的博客
11-25 138
【代码】flex垂直布局，容器间距相等。
Vue开发工具使用技巧
2509_93946471的博客
11-24 275
打开DevTools的"Events"标签页，所有组件间传递的事件都会按时间顺序列出来，连事件负载数据都能展开看详情。更绝的是，你还能手动触发事件——比如在父组件里模拟一个事件，直接测试子组件的响应逻辑，省得反复修改代码来调试。如果组件用了作用域插槽，可以在"Scoped Slots"子面板里实时查看slot传递的数据内容，比在模板里写调试代码清爽得多。路由调试经常被忽略。热重载调试时，如果发现修改代码后页面没及时更新，可以到DevTools的"Settings"里勾选"Log reloads"选项。
Python全栈开发项目——AI智能聊天机器人
qiao_yue的博客
11-24 785
本项目实现了AI聊天功能，具有语音输入和聊天背景自定义等亮点功能
Vue3的生命周期
分享学习网络的点点滴滴
11-21 132
Vue3生命周期详解：从创建到卸载的全过程 Vue3的生命周期分为四个主要阶段：创建、更新、卸载和错误处理。创建阶段包含setup()、onBeforeMount()和onMounted()；更新阶段有onBeforeUpdate()和onUpdated()；卸载阶段包括onBeforeUnmount()和onUnmounted()。setup()替代了Vue2的初始化阶段，是组合式API的入口。子组件的生命周期会先于父组件执行。错误处理可使用onErrorCaptured()捕获和阻止错误传播。这些钩子函
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

python_198

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

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

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

打赏作者

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

抵扣说明：

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

余额充值