CSS中定位机制的想法
对于一个刚刚接触css的新手而言,CSS的定位机制可能是最让人头疼的一件事情了, 接下来我们了解一下CSS的定位机制。
position:static | relative | absolute | fixed
适用于:除 <' display '> 属性定义为「table-column-group | table-column」之外的所有元素。
继承性:无。
归类总结一下定位的四种属性特点:
绝对定位:
1:单独标签设置定位的时候,以浏览器左上角为基准设置定位的。
2:盒子嵌套的时候,如果父盒子设置了定位,那么子盒子是以父盒子左上角为基准设置定位的。如果父盒子没有设置定位,那么子盒子以浏览器左上角为基准设置定位的。
3:设置了绝对定位的盒子,不占原来的位置。
4:设置了绝对定位的盒子可以实现模式的转换)
相对定位:
1:以自己左上角为基准设置定位。
2:相对定位占原来的位置
3:相对定位不能实现模式的转换
4:子绝父相(子元素设置绝对定位,父元素设置相对定位))
固定定位(1:固定定位不占位置;
2:可以实现模式的转换;
3:以浏览器为基准进行定位;
4:在屏幕上的位置固定不动。
静态定位:(元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。
尤其有一点要说明的是z-index:设置元素的堆叠顺序,只有设置了绝对定位或者相对定位的元素才会使z-index的值起作用。
那么定位和浮动又有什么关系和区别呢?
首先,定位和浮动都会使元素脱离标准文档流,定位往往会更加精确的使元素在某个特定的区域显示,而浮动则会有许多不确定性。这些不确定性往往会使页面产生一下超出我们预期范围的影响。
而且浮动往往是针对网页中盒子布局的时候使用,或者在li标签中。定位往往针对的是某个具体的元素或者块。
总而言之,不管白猫黑猫能够抓到老鼠的就是好猫,所以,不管浮动还是定位,能够达到预期效果的都是可取的。所以要多看多写代码,将这些结构布局熟记于心,才能更加流畅的运用。
CSS中定位机制的想法的更多相关文章
- css的定位机制
牛腩新闻发不系统中遇到了CSS(Cascading style sheets),第一次接触,比较陌生还!因为CSS很多关于元素定位的问题,并且很多情况下元素的位置以像素精度计.一个不小心就很头疼,为此 ...
- CSS 中定位的使用
position relative 设置区块基准点为左上角(相对定位 以区块的左上角为基准点 仍然会暂居原来的位置) a.不影响元素本身的特性: b.不使元素脱离文档流: c.如果没有定位偏移量,对元 ...
- css中定位
一切皆为框div.h1或p元素尝尝被称为块级元素.这意味着这些元素显示为一块内容,即“块框”.与之相反,span和strong等元素称为“称为”行内元素“,这是因为他们的内容显示在行中,即”行内框“. ...
- CSS中定位position
毋庸置疑的是,pisition是css中是最重要的属性之一. 一共有四种定位方式,static.relative.absolute.fixed. 默认的定位方式static 页面中所有的元素默认都是s ...
- CSS中定位和浮动对行内元素的宽高的影响
行内元素的大小是由元素里面的内容撑开的宽高决定的,就算在css中对行内元素设置width,height.行内元素也会忽略宽高的设置. 但是当行内元素使用position:absolute或者posit ...
- CSS学习笔记——CSS中定位的浮动float
昨天在解决了盒模型的问题之后又出现了新的知识模糊点:浮动和绝对定位?今天先解决浮动相关的问题,首先列举出想要解决的问题: 1.浮动到底是怎么样的? 2.浮动对元素的影响有什么? 3.浮动主要用来干什么 ...
- css中定位功能的特性
它有四大特性,页面找不到盒子的情况 1.z-index值表示谁压着谁,数值大的压盖数值小的 2.只有定位了的元素,才有z-index.也就是说,不管相对定位,绝对定位,固定定位,都可以使用z-inde ...
- CSS 中定位方式有几种,说明他们的意义
1.static 默认定位方式 显示为没有设置定位时的位置 2.fixed(固定定位) 他所相对固定的对象是可视窗口,与其他无关.以浏览器窗口作为参考进行定位 3.relative(相对定位) 元 ...
- 认识CSS中布局之文档流、浮动、定位以及叠放次序
前端之HTML,CSS(七) CSS CSS布局的核心就是盒子的摆放,即CSS定位.而CSS中定位机制分为:普通流(nomal flow).浮动(float).定位(position). 普通流 普通 ...
随机推荐
- Installing Intellij IDEA sublime-text-2 on Ubuntu
he installation on Linux is traditionally more complicated. I wonder why people complain about the l ...
- firebug常用工具
1.console.group("第一组"); console.log(1); console.groupend(); 2.console.dir(对象);//输出对象的所有信息 ...
- 《疯狂Java讲义》(三) ---- JDK&JRE&JVM&CLASSPATH
JDK: Java SE Development Kit, Java标准版开发包.包括Java编译器,JRE,以及常用的Java类库等. JRE: Java Runtime Environment,运 ...
- AX7: Quick and easy debugging
This purpose of this blog is to show how you can get quickly get started with debuggingin AX7, speci ...
- 常用 C#操作字符串方法
staticvoid Main(string[] args) { string s =""; //(1)字符访问(下标访问s[i]) s ="ABCD"; Co ...
- 最新原创:Power8伴随云计算横空出世
Power8伴随云计算横空出世 自从IBM将并不赚钱的x86服务器业务转手给联想之后,从此IBM便开始了硬件转型的新里程碑.伴随此事继续发酵的还有Power System Linux落户北京,从此IB ...
- IT在线笔试总结(二)
1. 循环队列的长度计算:对于非循环队列,尾指针与头指针的差值便是队列长度,而对于循环队列,差值可能为负数,因此需要将差值加上MAXQSIZE再与MAXQSIZE求余. 2. 算法的时间复杂度取决于: ...
- HTML的FormData对象
FormData是HTML5标准制定的一个新的封装对象,有了FormData对象,可以方便地通过javascript创建表单数据,直接以ajax发送到服务器中. 目前浏览器的支持情况为: 详细的介绍与 ...
- JS動態綁定下拉單內容
function req00_Line1_onChange(obj) { //if ($(obj).val() != "" && $(obj).val() ...
- linux 命令总结
①用find命令查找并删除文件 用脚本创建测试数据: [root@greymouster ceshidata]# for n in `seq 10`> do > date -s " ...