上一篇中我们了解了块级元素与内联元素,今天将自己查阅的资料整理写出来,与大家一起理解什么是浮动,以及怎样清除浮动,本文以div元素为例。 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。所以浮动也有left、right、none三种。浮动元素是脱离文档流的,漂浮在文档流 ...
分类:
其他好文 时间:
2017-12-26 21:03:45
阅读次数:
133
盒模型,定位 1.盒模型用到的属性width,height,padding,border,margin 普通文档流的上下垂直margin会叠加 2.块级框 与 行内框, 利用display属性来改变特性,display:block,display:inlne-block 3. 3种基本的定位机制:普 ...
分类:
其他好文 时间:
2017-12-24 00:05:06
阅读次数:
278
1.float元素有继承属性:inherit. 2. 3. 此时在文档中显示。因为设置了浮动属性,会让span元素脱离标准文档流。 4. 使用浮动,可能出现的问题:①若父元素未设置高度,则父元素会塌陷,没有高度 ②网页中的临近元素出现异位。 问题解决:①给父元素设置高度 ②给父元素也设置浮动属性 ③ ...
分类:
其他好文 时间:
2017-12-23 23:06:21
阅读次数:
130
/*/!*绝对定位(脱离常规文档流)*!/*//*position: absolute;*//*/!*固定定位(脱离常规文档流)*!/*//*/!*position: fixed;*!/*//*/!*相对定位(元素原始位置进行偏移量的增减,并继续占用元素原有位置的空间)*!/*//*/!*posit ...
分类:
Web程序 时间:
2017-12-23 23:00:33
阅读次数:
257
关于定位 我们可以使用css的position属性来设置元素的定位类型,postion的设置项如下: relative 生成相对定位元素,元素所占据的文档流的位置不变,元素本身相对文档流的位置进行偏移 absolute 生成绝对定位元素,元素脱离文档流,不占据文档流的位置,可以理解为漂浮在文档流的上 ...
分类:
Web程序 时间:
2017-12-22 15:07:36
阅读次数:
189
首先我们要理解这个flaot 为什么要清除,作为小白来说直接颠覆了我之前学的内容,因为之前学的东西虽然碰到float后,脱离文档流后给兄弟元素或者父元素造成影响,但是都是通过option来定位 要么绝对 要么相对 ,都是能解决的. 这个概念才理解的时候,我都想为什么要清除,我都设置了还要清除干嘛? ... ...
分类:
Web程序 时间:
2017-12-19 01:21:00
阅读次数:
212
连我自己把float和绝对定位,都称为脱离文档流,想想概念又不那么清晰,于是寻找了W3C资料来理解,才发觉不应该叫文档流。 资料 英文:https://www.w3.org/TR/CSS22/visuren.html#normal-flow 中文:http://w3help.org/zh-cn/kb ...
分类:
其他好文 时间:
2017-12-17 17:02:26
阅读次数:
173
1.opacity:0 该元素隐藏起来了,但不会改变页面布局,如果它还绑定一些点击事件之类的,只要点中它也会触发事件。 2.visbility:hidden 该元素隐藏起来了,但不会改变页面布局,不会脱离文档流,如果它还绑定一些事件也不会触发。 3.display:none 把元素隐藏起来了,但是会 ...
分类:
Web程序 时间:
2017-12-14 03:57:39
阅读次数:
188
第七章 1.标准文档流 1.1 标准文档流:指元素根据块元素或行内元素的特性按从上到下,从左到右的方式自然排列。这也是元素默认的排列方式 1.2 标准文档流组成 a.块级元素(block) <h1>…<h6>、<p>、<div>、列表 b.内联元素(inline) <span>、<a>、<img/> ...
分类:
其他好文 时间:
2017-12-11 16:10:40
阅读次数:
105
CSS中有三种定位机制:普通文档流,浮动和绝对定位。除非指定,否则所有框都是在普通文档流中定位。 浮动:浮动框可以左右移动,直至外边缘碰到包含框或者另一个浮动框的边缘。当一个块级元素浮动起来后,相当于从普通流中抽走了这个块,因而下面的块会占据这个块原本所在的空间即跑到原来的块所在的那一行并占据。而浮 ...
分类:
其他好文 时间:
2017-12-10 15:16:26
阅读次数:
117