浮动因素在静态网页制作中经常被应用到,比如要让块级元素不独占一行,常常应用设置float的方式来实现。但是应用的时候会发现,设置了子类浮动后,未给父类清除浮动,这样就会造成一下问题: 1.浮动的元素会相对于父容器或者是前面已经定位的元素进行浮动,浮动的元素脱离文档流,也就是不再占有原有的位置,会影响 ...
分类:
Web程序 时间:
2017-10-25 11:32:16
阅读次数:
192
在文档流中,若父元素未设置高度,那么父元素的高度默认是被子元素撑开的,即子元素多高,父元素就有多高。但是当子元素设置浮动之后,子元素就会完全脱离文档流,父元素还在文档流中,此时父元素的高度就没有子元素撑起,从而导致父元素的高度塌陷。简单来说,就是包含含有浮动的元素的上一级的高度变为0了,下面的元素会 ...
分类:
其他好文 时间:
2017-10-22 01:41:14
阅读次数:
342
这块内容涉及较多,先上一些概念的解释 CSS定位(positioning):属性的一种,允许对元素进行定位,也就是让你可以自由设置你的元素框出现在你想让它出现的地方 定位机制有3种:普通流、浮动和定位。 1、普通流就是正常的文档流,在HTML里面的写法就是从上到下,从左到右的排版布局。 2、浮动:( ...
分类:
Web程序 时间:
2017-10-20 13:28:03
阅读次数:
170
特性: absoulte 与 float 具有相同的特性:包裹性,与破坏性 absoulte 与 float 可以交替使用 不受 relative 限制的 absoulte 定位,行为表现上可以不使用 left/right/top/button/auto 等属性 行为表现 脱离文档流去浮动( flo ...
分类:
Web程序 时间:
2017-10-19 14:07:17
阅读次数:
444
<!--end: blogStats --> <!--end: navigator 博客导航栏 --> <!--end: header 头部 --> <!--done--> 前端基础之CSS CSS 语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。 ''' selector { ...
分类:
Web程序 时间:
2017-10-16 21:57:10
阅读次数:
217
在网页设计时经常要对网页中的元素进行排版和优化。这时就要用到定位和浮动,来帮我们达到理想的效果。所以要清楚各种定位之间的关系和用法。 css中的相对定位: 如果对一个元素进行相对定位,它将出现在它所在的位置上。这个元素的移动是“相对于”它的起点进行移动。 书写格式: 选择器 { position:r ...
分类:
Web程序 时间:
2017-10-16 00:16:51
阅读次数:
202
绝对定位(absolute):要脱离文档流,使用left,right,top, bottom等属性相对于其最接近的一个最有定位设置的父级对象进行绝对定位,如果对象的父级没有设置定位属性,即还是遵循HTML定位规则的,则依据 body 对象左上角作为参考进行定位。绝对定位对象可层叠,层叠顺序可通过 z ...
分类:
其他好文 时间:
2017-10-15 21:22:11
阅读次数:
188
1.浮动是一种脱离标准文档流的形式。 作用:浮动就是用来制作多个盒子并排显示,也能设置宽高,负责网页排版 1 float:left; 左浮动 2 float:right; 右浮动 3 float:none; 不浮动 浮动的元素,会自动贴着父元素盒子的边。 左浮动:贴左边; 右浮动:贴右边; 重点:浏 ...
分类:
其他好文 时间:
2017-10-15 15:00:58
阅读次数:
120
定位的属性: 1.position:static 静态定位 定位的默认属性 2.position:relative 相对定位 要占据位置,根据自己的本来位置进行相应的移动,也就是说以自己为起点。 3.position:absolute 绝对定位 脱离文档流, 不占据位置,以离他最近的的非静态定位为起 ...
分类:
Web程序 时间:
2017-10-15 14:16:07
阅读次数:
163
float从字面上的意思就是浮动,float能让元素从文档流中抽出,它并不占文档流的空间,典型的就是图文混排中文字环绕图片的效果了。不过需要注意的是清除浮动是我们可能需要注意的地方。而position顾名思义就是定位。他有以下这几种属性:static(默认),relative(相对定位),absol ...
分类:
其他好文 时间:
2017-10-15 00:35:28
阅读次数:
208