清除浮动 浮动元素会脱离文档流,使得行内元素环绕它的效果,但是它也会造成父元素塌陷、元素重叠的问题,所以这个时候就需要清除浮动带来的影响。清除浮动的方法主要有三种: 以这段代码为例: 上面的代码中,由于a、b脱离文档流并分别位于content的两侧,而此时content的高度仅仅只是文字的高度,这是 ...
分类:
其他好文 时间:
2018-07-29 16:24:59
阅读次数:
130
CSS页面布局允许我们拾取网页中的元素,并且控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置。主要对文档流的改变进行布局。假设你已经掌握了CSS的选择器、属性和值,并且可能对布局有一定了解可以往下看,如果没有可以先看这篇博客css解析。 css实现左右布局 css实现左右布局的方式大概 ...
分类:
Web程序 时间:
2018-07-27 21:09:09
阅读次数:
203
在说float(浮动)之前应该让大家了解下什么是浮动,其实浮动这个属性在没有被清除浮动之前它在文档流里面表现出来的现象就像我们生活中的河流或者大海,里面有水有鱼有各种沉积物比如船啊什么的,我们可以把鱼、水、和沉船都看成我们前端的文档流里面的元素,那么如果其中鱼自然死亡会从水里漂浮在水面上,那么之前鱼 ...
分类:
Web程序 时间:
2018-07-26 16:14:15
阅读次数:
1255
比如中间有空格的话,就会有文字分隔符。就会产生距离。 标签选择器的作用是初始化用的,改变元素本来的样式而用的。 通配符选择器是最好的初始化,标签了因为权重最小啊,其他的只要改一下就,他的样式就可以改变咯。 高级一点的前端编写,先是编写css先的,这是站在一个好高的角度上去编写咯。 所以想让里面的元素 ...
分类:
Web程序 时间:
2018-07-23 16:27:09
阅读次数:
192
需求: 两边栏固定宽度,中间宽度自适应,一般左边栏为导航,右边栏为广告,中间栏为主要内容的展示,div块上中间栏放在第一位,重要的东西放在文档流前面可以优先渲染。 圣杯布局和双飞翼布局的共同特点都是利用float+margin的负值来实现并列的结构。首先中间栏width 100%后,左右栏被挤在第二 ...
分类:
其他好文 时间:
2018-07-18 20:40:07
阅读次数:
119
绝对定位中当一个DIV块的位置被定义为绝对定位的时候,也就失去了文档流即失去原本的位置,并且以父级为基准(父级元素必须是相对定位如果不是则一直往上找,直到找到body为止)来进行偏移, 固定定位其实和绝对定位有很多相似之处只不过是基于当前页面来偏移。 绝对定位中当一个DIV块的位置被定义为绝对定位的 ...
分类:
Web程序 时间:
2018-07-15 11:23:16
阅读次数:
265
理解好文档流,有助于我们对css中定位和浮动的理解。什么是文档流呢,经过我看过的一些文章,加入自己的理解。我得出文档流的定义如下: 1、从左至右,从上至上的布局。 2、符合html中标签本身含义的布局,比如某些标签独占一行。有些标签属于行内元素等。 下面来讲一个css中的定位机制,共三种: 1、正常 ...
分类:
Web程序 时间:
2018-07-15 11:14:59
阅读次数:
249
原文 简书原文:https://www.jianshu.com/p/87677fd2ea34 大纲 1、负边距对元素自身的影响 2、负边距在普通文档流中的作用 3、负边距对绝对定位的元素的影响 1、负边距对元素自身的影响 1.1、对自身宽度的影响 利用margin为负值添加增加宽度——可用于多列布局 ...
分类:
Web程序 时间:
2018-07-14 20:38:41
阅读次数:
214
float 浮动 float : left | right | none | inherit 向左浮动 | 向右浮动 | 无样式 (默认)| 继承 · 默认宽度为内容宽度 · 脱离文档流 · 向指定方向一直移动 · float的元素在同一文档流 · float元素半脱离文档流 对元素,脱离文档流;对 ...
分类:
Web程序 时间:
2018-07-14 13:09:17
阅读次数:
233