CSS布局浮动和定位属性的区别

float: left|right; 可以自动排列自动折行, 但需要clear来配合清除浮动;display: inline-block 有些时候可以替代float实现相同的效果.

position: absolute|relative; 要配合top,left等定位;

使用:  position: absolute会导致元素脱离文档流,被定位的元素等于在文档中不占据任何位置,在另一个层呈现,可以设置z-index。PS的图层效果就是position: absolute。

  float也会导致元素脱离文档流,但还在文档或容器中占据位置,把文档流和其它float元素向左或向右挤,并可能导致换行。图片的文字环绕布局效果就是float。

  display的inline-block不脱离文档流,将block元素当作大型字符嵌入文档流内,类似于img或者input默认效果。
时间: 2024-10-14 19:48:58

CSS布局浮动和定位属性的区别的相关文章

CSS清除浮动和定位

1.原来在一行中的两个块,会因为浏览器窗口的大小改变而改变其原来的位置(变成多行),浏览器窗口宽度不够容纳解决方法:加个父div,并且设置宽度 .father {width:500px;height:300px;}<div class="father">   <div class="left">左</div>   <div class="right">右</div></div>

DIV CSS布局容易忽略的属性

1 white-space:pre //保留空格,不然又多个空格值显示一个 2 white-space:nowrap //强制不换行,知道遇到</br> 3 letter-spacing //字母间的间距 4 text-indent //缩进文本 5 line-height //设置行高 6 backgroud-attachment:fixed; //拖动滚动条,图片不滚动 7 backgroud-attachment:scroll //不锁住图片 8 table-layout:fixed /

前端学习(14)~css学习(八):定位属性

CSS的定位属性有三种,分别是绝对定位.相对定位.固定定位. position: absolute; <!-- 绝对定位 --> position: relative; <!-- 相对定位 --> position: fixed; <!-- 固定定位 --> 相对定位 相对定位:让元素相对于自己原来的位置,进行位置调整(可用于盒子的位置微调). 格式: position: relative; left: 50px; top: 50px; 相对定位的举例: <!do

CSS布局(二) 盒子模型属性

盒子模型的属性 宽高width/height 在CSS中,可以对任何块级元素设置显式高度. 如果指定高度大于显示内容所需高度,多余的高度会产生一个视觉效果,就好像有额外的内边距一样: 如果指定高度小于显示内容所需高度,取决于overflow属性,需要滚动条需要设置为overflow:auto. auto 宽高和margin可以设置auto.对于块级元素来说,宽度设置为auto,则会尽可能的宽.详细来说,元素宽度=包含块宽度-元素水平外边距-元素水平边距宽度-元素水平内边距: 高度设置为auto,

CSS层级(浮动,定位的层级提升)

总结: 浮动提升半层,只有在浮动的时候 才需要考虑元素分两层 定位元素提升一层 相对定位会有残留 参考文章:https://blog.csdn.net/houyanhua1/article/details/79558136?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task 原文地址:https://www.cnblogs.com/xiaohaodeboke

CSS区块、浮动、定位、溢出、滚动条

CSS中区块的使用 CSS中浮动的使用 CSS中定位的使用 CSS中溢出的使用 CSS中滚动条的使用 17.1 CSS中区块的使用 属性名称            属性值                说明 width              像素/百分比            区块的宽度 auto height              像素/百分比            区块的高度 auto min-height            像素/百分比             区块最小高度 a

百度前端技术学院--零基础CSS布局

怎么预览 GitHub 项目里的网页? 一. 在项目源代码页面链接前缀那加上http://htmlpreview.github.com/?举个例子:需要打开的项目页面https://github.com/aisinvon/aisinvon.github.io/blob/master/index.html给加上前缀http://htmlpreview.github.com/?最终链接http://htmlpreview.github.io/?https://github.com/aisinvon/

CSS div和css布局

一.div和span DIV和SPAN在整个HTML标记中,没有任何意义,他们的存在就是为了应用CSS样式 DIV和span的区别在于,span是内联元素,div是块级元素.div占用整行,span只会占用内容大小的部分.div可以改变size,span不可以改变size 二.盒模型 margin 盒子外边距,增加的话,内盒大小不会变 padding 盒子内边距,增加的话,border向外扩大,内盒大小本身不会变 border 盒子边框宽度 width 盒子宽度 height 盒子高度 三.布局

css的浮动以及如何清除浮动

css的浮动是经常会在实际中运用到,之前我对浮动的理解就是使用float,除此之外没有深入理解,后来发现对于浮动还是有必要深入理解一下. css浮动 css的浮动是float属性,该属性没有继承性,默认值为none,该属性有四个值,以下一一解释: 1)right:向右浮动 2)left:向左浮动 3)none:没有浮动 4)inherit:规定继承父元素的浮动 css的浮动实际上就是打破标准流,如果说没有浮动的元素是在一个标准流里,那么浮动的元素将脱离原本的标准流浮动. 元素的浮动效果 例子:以