DDR爱好者之家

css(display,float,position)深入理解
站长资源 2024/11/24 佚名
41 1538
DDR爱好者之家 Design By 杰米

display 用来设置元素的显示方式

display : block | none | inline | inline-block

inline：指定对象为内联元素

block：指定对象为块元素

inline-block：指定对象为内联块元素

none：隐藏对象

float 控制元素是否浮动显示

float : none | left | right

none：设置对象不浮动

left：设置对象浮在左边

right：设置对象浮在右边

浮动的目的：

就是要打破文档流的默认显示规则。如果要让元素按照我们的布局要求进行显示。这时就要利用float属性

1.任何申明为 float 的元素自动被设置为一个“块级元素”

2.在标准浏览器中浮动元素脱离了文档流 ，所以浮动元素后的元素会占据浮动元素本来应该所处的位置

3.如果水平方向上没有足够的空间容纳浮动元素，则转向下一行

4.文字内容会围绕在浮动元素周围

5.浮动元素只能浮动至左侧或者右侧

clear 清除浮动

clear : none | left | right | both

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

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

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

both：不允许有浮动对象

position 对象的定位方式

position : static | absolute | fixed | relative

static：默认值。无定位，对象遵循常规流。此时4个定位偏移属性不会被应用

relative：相对定位，对象遵循常规流，并且参照自身在常规流中的位置通过top，right，bottom，left这4个定位偏移属性进行偏移时不会影响常规流中的任何元素

absolute：绝对定位，对象脱离常规流，此时偏移属性参照的是离自身最近的定位祖先元素，如果没有定位的祖先元素，则一直回溯到body元素。盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠

fixed：固定定位，与absolute一致，但偏移定位是以窗口为参考。当出现滚动条时，对象不会随着滚动

absolute 说明：

1.脱离文档流

2.通过 top,bottom,left,right 定位

3.如果父元素 position 为 static 时，将以body坐标原点进行定位

4.如果父元素 position 为 relative 时，将以父元素进行定位

例：div { position: absolute; left:100px; top:100px;}

relative 说明：

1.相对定位（相对自己原来的位置而言）

2.不脱离文档流

3.参考自身静态位置通过 top,bottom,left,right 定位

例：div { position: relative; left:100px; top:100px;}

fixed 说明：

固定定位实际上只是绝对定位的特殊形式，固定定位的元素是相对于浏览器窗口而固定，而不是相对于其包含元素，即使页面滚动了，它们仍然会处在浏览器窗口中跟原来完全一 样的地方

例：div { position: fixed; right:0; bottom:0;}

z-index 对象的层叠顺序

z-index : auto | number

当元素发生重叠时，可以通过 z-index 属性，设置其层叠的先后顺序

较大 number 值的对象会覆盖在较小 number 值的对象之上

css(display,float,position)深入理解

以上这篇css(display,float,position)深入理解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米