XML 关于使用CSS显示

在XML中,显示XML的两种常见的样式表:

一种是CSS   另一种是XSL

本文章基于CSS中的浮动和定位来讲解如何显示·XML文档

浮动和定位
浮动和定位是用于控制元素布局和位置的重要技术。在XML中,我们可以使用CSS中的浮动(float)和定位(position)属性来实现这些效果。

浮动:通过将元素设为浮动状态,使其脱离正常的文档流,从而使其他元素环绕它。例如,可以将图片浮动到文本的左侧或右侧。
定位:通过设置元素的定位属性,可以将元素放置在页面的特定位置。常见的定位属性包括relative、absolute和fixed。
这些布局技术可以帮助我们创建各种复杂的界面和排版效果。

在CSS中, 任何元素都可以浮动(现多用来做网页布局)
float属性可以实现浮动效果
利用div{float: left;}可以使< div>元素基于父级元素向左浮动(最左端)
利用div{float: right;}可以使< div>元素基于父级元素向右浮动(最右端)
浮动的元素不会覆盖行级元素, 行级元素会为浮动的元素自动让位, 实现环绕效果. 但是浮动的元素会覆盖块级元
素(浮动的副作用, 即所谓的塌陷问题, 浮动元素所占有的原空间塌陷, 导致其后的块级元素进行补位, 产生覆盖
现象)。
值 描述
left 向左浮动
right 向右浮动
none 默认值, 不浮动
  ##清除浮动
浮动主要有三种方法
(1)加高法
(2)overflow:hidden
(3)利用clear属性固定高度法
将具有clear属性的空的(高度为0)块级元素与具有浮动属性的元素包裹于同一父元素内。
##定位(position)
position(定位)一般用来做一些小的布局, 大范围的布局一般用float(浮动)来做。
值 描述
relative 相对定位
absolute 绝对定位
fixed 固定
“定位属性”(需要确切理解概念)
属性 描述
top 相对原始位置或参照元素位置(盒子模型)上边界的偏移量
right 相对原始位置或参照元素位置(盒子模型)右边界的偏移量
bottom 相对原始位置或参照元素位置(盒子模型)下边界的偏移量
left 相对原始位置或参照元素位置(盒子模型)左边界的偏移量。

偏移量为正值即向反方向偏移, 偏移量为负值即向同方向偏移。相对定位相对于原始位置(盒子模型), 绝对定位与固定定位相对于参照元素位置(盒子模型)。
##相对定位
relative相对于元素的原始(盒子模型)位置, 并且即使发生偏移, 元素仍占有原始空间(与浮动不同, 空间不会塌陷)。
##绝对定位
absolute删除元素的原始空间(空间塌陷), 相对于距离最近的已定位父元素定位, 若没有已定位父元素则相对于body元素定位。无论先前属于行级元素还是块级元素, 元素定位后变为块级元素。
##固定定位
fixed固定元素的位置, 不受页面滚动影响。可通过top, right, bottom, left等偏移属性定位。理论上, 被设置为fixed的元素会被定位于浏览器窗口的一个指定位置, 不论窗口是否滚动, 它都会固定在这个位置。
4.引用: 在XML中使用CSS,我们可以通过引用外部的CSS文件将样式应用于XML文档。这样做的好处是可以将样式与内容分离,使得样式的修改更加方便和集中化。通过使用@import语句或链接外部样式表,我们可以将样式表应用于整个XML文档或特定的元素。这为多个XML文档共享相同的样式提供了便利。
    css的三种引入方式:
1.行内式引入
2.嵌入式引入
3.外部引入

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值