position:absolute、float、display:inline-block

  • 绝对定位position:absolute 完全脱离了普通流,无法跟普通流建立交互关系(普通流能影响绝对定位,但绝对定位不影响普通流)。这样来说,在弹性布局的场景中,绝对定位就存在缺陷。但也因为它完全脱离文档流,定位绝对很擅长做层叠布局。另外,绝对定位对于元素位置的控制也是最为灵活的。
  • 浮动,本身不是用来做布局的,而是做文字环绕效果。但是CSS2.1好像也就这个属性能够快速地满足一些需求,因此才有了浮动布局。浮动相对绝对定位好处是,它可以影响IFC,也可以通过 clear 清除浮动影响块级布局,可以与普通流建立良好的交互。 而且浮动本身是脱离普通流的,在顶端对齐和右对齐上有特别的优势。而 inline-block 的垂直对齐上有更多选择。
  • inline-block,这个属性也不是用来布局的(偏向于排版),但是在 CSS3 普及之前,它的用处也很大。该元素的盒子在行框中进行格式化,其顺序与源HTML中的顺序一一对应。 同时该元素不脱离普通流,这比浮动来说有更大的优势,它可以跟普通流产生自然交互,而不必要借助去其他属性。而且相比浮动,相邻元素间的垂直对齐方式,inline-block 比 float 更加灵活, float 格式化时有一条规则,就是越高越好(因此常常表现为顶端对齐),而 inline-block 在行内格式化,拥有更灵活的垂直对齐方式。

应用:

  • 如果使用了浮动,清除浮动就会成为你的副作用,而且如果你没有良好的HTML/CSS 结构的话,清除浮动是一个很复杂的事情。
  • inline-block 虽然避免了清除浮动的事情,但是会有另一个副作用,即空白符问题。
  • 当居右(右浮动)时, float是按先后顺序来的, 先写的排子右边; 而inline-block则保持左右顺序不变。
  • 推荐网站http://learnlayout.com/了解CSS布局。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ul.head{ border-style: groove; position: fixed; top:0; width:99%; list-style-type: none; margin-top:0; padding-left: 0px; /*创建一个新的BFC*/ overflow: hidden; background:indianred; border-radius:8px;/*圆角边框*/ font-size:18px; } li a{ /* !*实现横向导航栏, display:inline;也可,如果你想链接到具有相同的大小,你必须使用浮动的方法*!*/ float:left; height:20px; text-align: center; color: white; background-color: darksalmon; padding: 12px 20px; text-decoration: none; } li a:hover{ background-color: coral; color: black; } body{ background-attachment: fixed; background-image: url(../resources/image/blue_pink.jpg); background-size:100%; } iframe{ height:300px; width:400px; float:right; } select{ font-size: 20px; color:olive; background-color:cornsilk; } div{ margin-top:60px; } input{font-size: 16px;} button { border-radius:5px;/*圆角边框*/ font-size: 18px; background-color: #4CAF50; color: white; cursor: pointer; transition: background-color 0.3s ease; } #pauseBtn{ position:absolute; bottom:17%; left:40%; } #startBtn{ position:absolute; bottom:59%; left:15%; } #increase-btn1 { position:absolute; left: 17%; bottom:9%; } #decrease-btn1 { position:absolute; left: 19%; bottom:9%; } #increase-btn2 { position:absolute; right: 19%; bottom:25%; } #decrease-btn2 { position:absolute; right: 17%; bottom:25%; } #speedRange{ position:absolute; bottom:17%; left:50%; } button:hover { background-color: #3e8e41; } #introduction{ margin-top: 20px; width:300px; border-style: groove; font-size: 14px; color:darkred; overflow: auto; min-height:300px; max-height:300px; } footer{ position:absolute; bottom:0; width:100%; height:30px; text-align: center; } #canvas{ /*width: 880px;*/ /*height: 440px;*/ width: 100%; height: 100%; /*margin: -210px auto;*/ /*border: 2px solid yellowgreen;*/ /*display: block;*/ overflow: scroll; } .container { height: 440px; width: 880px; margin: -225px auto; border: 2px solid yellowgreen; /*display: block;*/ box-sizing:border-box; overflow: scroll; } #log{ border:2px palegoldenrod; position:absolute; top:9%; right:0.5%; background-color:lightyellow; height: 430px; /* 设置固定高度 */ width: 310px; /* 设置固定宽度 */ font-size: 16px; /* 设置默认字体大小 */ resize: none; /* 其他样式属性 */ } .red-text { color: red; }
06-01
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值