CSS布局

CSS有三种基本的定位机制:普通流,浮动和绝对定位。

  • 普通流

普通流是默认定位方式,在普通流中元素框的位置由元素在html中的位置决定,元素position属性为static或继承来的static时就会按照普通流定位,这也是我们最常见的方式。

  • 相对定位

相对定位比较简单,对应position属性的relative值,如果对一个元素进行相对定位,它将出现在他所在的位置上,然后可以通过设置垂直或水平位置,让这个元素相对于它自己移动,在使用相对定位时,无论元素是否移动,元素在文档流中占据原来空间,只是表现会改变。

  • 绝对定位 相对定位可以看作特殊的普通流定位,元素位置是相对于他在普通流中位置发生变化,而绝对定位使元素的位置与文档流无关,也不占据文档流空间,普通流中的元素布局就像绝对定位元素不存在一样。 绝对定位的元素的位置是相对于距离他最近的非static祖先元素位置决定的。 如果元素没有已定位的祖先元素,那么他的位置就相对于初始包含块儿(body或html神马的)元素。 因为绝对定位与文档流无关,所以绝对定位的元素可以覆盖页面上的其他元素,可以通过z-index属性控制叠放顺序,z-index越高,元素位置越靠上。
    • 固定定位

    fixed属性了,应用fixed也叫固定定位,固定定位是绝对定位的中,固定定位的元素也不包含在普通文档流中。

  • 浮动布局

首先介绍一些浮动模型的基本知识:浮动模型也是一种可视化格式模型,浮动的框可以左右移动(根据float属性值而定),直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘。浮动元素不在文档的普通流中,文档的普通流中的元素表现的就像浮动元素不存在一样.

�下面看几个例子:

  • 不浮动
  • �红块向右移动
  • 红块向左移动,绿块被覆盖
  • 都向左浮动,父元素宽度为0
  • 卡住的情况
  • 行框和清理 前面指出浮动会让元素脱离文档流,不影响不浮动元素.实际上并不完全如此,如果浮动的元素后面有一个文档流中元素,那么这个元素的框会表现的像浮动元素不存在,但是框的<u>文本内容</u>会受到浮动元素的影响,会移动以留出空间.用术语说就是浮动元素旁边的行框被缩短,从而给浮动元素流出空间,因而行框围绕浮动框。 e.g <div class="container2"> <div class="item1">item1</div> <div class="item2">hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh</div> </div> <style> .container2 { margin-top: 30px; height: 300px; width: 300px; border: 1px solid red; } .item1 { float: left; height: 100px; width: 100px; background-color: rebeccapurple; } .item2 { height: 200px; width: 200px; background-color: gold; word-wrap: break-word; } </style>

demo

>文本内容会收到影响。
> 可以看出浮动后虽然黄色div布局不受浮动影响,正常布局,但是文字部分却被挤到了紫色浮动div下边。要想阻止行框围绕在浮动元素外边,可以使用clear属性,属性的left,right,both,none表示框的哪些边不挨着浮动框。

> 在�`item2`的样式中添加`clear:both;`就可以解决这个问题了。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏数据小魔方

打破常规的图表制作新思维!!!

上一篇给大家讲了一个专业、规范、完善的商务图表的元素应该如何布局! 可能很多小伙伴儿会有疑问,默认的输出图表样式跟最终我们想要达到的效果相差十万八千里。想要在...

3567
来自专栏编程

前端学习自学笔记:day06

今天是第六天的笔记,主要是HTML和CSS的,希望大家支持~ ? 在此之前先为大家显示下前端工程师的路线图: ? 第六天的笔记:HTML AND CSS: te...

2085
来自专栏Rindew的iOS技术分享

iOS 自定义相机页面

我们今天先来说说第一种。也就是类似我文章头部的这种界面怎么画出来。额~这时候还是给心急的上个Demo吧。在文中,顺便说下我碰到的两个问题:拍摄页灰色透明遮罩绘制...

4011
来自专栏进步博客

CSS表格布局实践

如何实现上图所示效果:左右两列的列宽由列内最宽单元格的宽度决定,进度条列占据剩余空间。(兼容到IE8就好了)

1303
来自专栏smy

事件委托与阻止冒泡

简单说下事件委托与阻止冒泡 html: <ul class="clearfix" data-type="cityPick"> <li class="...

38310
来自专栏编程之路

羊皮书APP(Android版)开发系列(二十四)不常用但是很有用的两个属性:clipToPadding 和 clipChildren

1502
来自专栏练小习的专栏

关于IE6下绝对定位元素莫名消失的问题

这是个很老的bug了,我想一般大家都遇到过,以前我是纯凭经验,让绝对定位的元素不挨着浮动元素就OK了,不过一直没去研究它形成的原因。今天做页面又遇到了这个可爱的...

18410
来自专栏彭湖湾的编程世界

【CSS】思考和再学习——关于CSS中浮动和定位对元素宽度/外边距/其他元素所占空间的影响

一.width:auto和width:100%的区别 1.width:100%的作用是占满它的参考元素的宽度。(一般情况下参考元素 == 父级元素,这里写成参考...

26011
来自专栏前端说吧

CSS3-实现单选框radio的小动画

3013
来自专栏HTML5学堂

轮播图效果,不再局限于JS制作!

HTML5学堂(码匠):网页的轮播图一直都是个比较精美的制作,同时也是用户体验较佳的效果。在开发工程师进行制作的时候往往会选择使用JS来书写,由此不禁会问,难道...

6956

扫码关注云+社区

领取腾讯云代金券