JSP之网页元素定位

爱被打了一巴掌 2022-05-11 14:06 557阅读 0赞

**1.bottom——定位元素外边距底边界的偏移**

参数

--------------------

**auto：** 默认值，通过浏览器来计算边缘的位置

**length： **利用px、cm单位设置元素的底边位置，可为负值

**%**：设置元素的百分比计的底边位置，可为负值

--------------------

demo：

![0_wx_fmt_png][]

![0_wx_fmt_png 1][]

2.clear——设置元素侧面是否允许其他浮动元素

参数

--------------------

**none：**默认值，允许两边都可以有浮动对象

**left：**不允许左边有浮动对象

**right ：**不允许右边有浮动对象

**both：**不允许有浮动对象

--------------------

demo：略，自己想一个啦。

3.clip——设置处理内容溢出

参数

--------------------

**auto：**默认值，无剪切

**rect（num,num,num,num）：** 根据4个参数，计算上，右，左，下的偏移量，其中任何一个参数都可以用auto代替

--------------------

demo：

![0_wx_fmt_png 2][]

![0_wx_fmt_png 3][]

4.direction——设置排列对象

参数

--------------------

**ltr：**默认值，按照从左到右的顺序

**rtl：** 按照从右到左的顺序

--------------------

demo：略，自己想一个啦。

**5.float——给某个单一元素指定样式**

参数

--------------------

**none：** 默认值，没有浮动

**left： **元素浮动在父元素的左边

**right： **元素浮动在父元素的右边

**inherit： **元素浮动在父元素中出现的位置

--------------------

demo：

![0_wx_fmt_png 4][]

![0_wx_fmt_png 5][]

![0_wx_fmt_png 6][]

6.left——设置元素外边距左边界的偏移

参数

--------------------

**auto：**默认值

**length：**利用px、cm单位设置元素的边缘到最近一个具有定位设置的父元素边缘的位置，可为负值

**%**：设置元素的百分比边缘到最近一个具有定位设置的父元素边缘的位置，可为负值

--------------------

demo：略，自己想一个啦。

7.right——设置元素外边距右边界的偏移

参数

--------------------

**auto：**默认值

**length：**利用px、cm单位设置元素的边缘到最近一个具有定位设置的父元素边缘的位置，可为负值

**%**：设置元素的百分比边缘到最近一个具有定位设置的父元素边缘的位置，可为负值

--------------------

demo：略，自己想一个啦。

8.overflow——设置元素溢出的处理

参数

--------------------

**visible：**默认值，不会剪切元素的内容也不会加滚动条，若内容溢出，会展示在元素之外

**auto：** 若溢出，内容会被剪切，但会有滚动条

**hidden：**若溢出，内容会被剪切，不会有滚动条

**scroll: **若溢出，内容会被剪切，但会有滚动条

--------------------

demo：

![0_wx_fmt_png 7][]

![0_wx_fmt_png 8][]

9.position——设置元素的定位方式

参数

--------------------

**static：**默认值，设置其他定位属性是无效的

**relative：** 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行定位，不可叠层

**absolute：** 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行绝对定位，可叠层

**fixed：** 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行绝对定位，可叠层

**inherit：** 元素的位置继承父类的值

--------------------

demo：略，在“JSP之网页元素定位（一）”这篇文章里面有哦。

[0_wx_fmt_png]: /images/20220505/4fd2f3c0caae4a44a7227328658699dd.png
[0_wx_fmt_png 1]: /images/20220505/24521ebf52304e23baa824b4b7db0951.png
[0_wx_fmt_png 2]: /images/20220505/3b34ccd3e5854696a9c4994a293661b4.png
[0_wx_fmt_png 3]: /images/20220505/d531346895864107a62bf22717aed8d9.png
[0_wx_fmt_png 4]: /images/20220505/aa00e93606024400a60256fd81d0d48f.png
[0_wx_fmt_png 5]: /images/20220505/aa06fa84b1a3417d8a0f5f1823bca819.png
[0_wx_fmt_png 6]: /images/20220505/d0522db5cb9c4cb1a20893ffe9040af2.png
[0_wx_fmt_png 7]: /images/20220505/366d927c170f4369b0ee8b5bdf329ad9.png
[0_wx_fmt_png 8]: /images/20220505/0a3577896c2640dc9ae7303e10145919.png