sticky 和 fixed区别 fixed:固定的位置。一般用作悬浮按钮的设计。不管当前页面如何滚动,它的位置始终相对于窗体不变。元素从普通文档流中删除,并没有空间为页面中的元素创建布局。 它是相对于初始定位包含块建立的视窗,除非其祖先之一transform, perspective,或filte ...
分类:
其他好文 时间:
2018-10-13 02:52:25
阅读次数:
188
布局方式 1 布局:设置元素在网页中的排列方式及显示效果 2 分类: 1 标准流布局(文档流,普通流,静态流) 是默认的布局方式 特点:将元素按照书写顺序及元素类型,从上至下,从左至右排列 2 浮动布局 设置元素浮动 属性:float 取值:left / right / none (默认值) 浮动元 ...
分类:
Web程序 时间:
2018-10-12 21:23:17
阅读次数:
202
注:本文章是参考千锋网学习视频总结得出。 最近在学习一个前端项目,项目中多处用到了浮动和定位。为此,通过看查找资料和看学习视频,从浮动、清除浮动、相对定位、绝对定位、总结等五个部分来谈谈我对浮动和定位的理解。 一、浮动 浮动的使用场景:一般是将竖起来的多个盒子进行横向的排列。 浮动的负面作用:因为浮 ...
分类:
其他好文 时间:
2018-10-07 12:10:25
阅读次数:
214
1、position: static static(没有定位)是position的默认值,元素处于正常的文档流中,会忽略left、top、right、bottom和z-index属性。 2、position: relative relative(相对定位)是指给元素设置相对于原本位置的定位,元素并不 ...
分类:
Web程序 时间:
2018-10-05 13:56:27
阅读次数:
196
static: HTML元素的默认定位方式 absolute: 将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位。而其层叠通过z-index属性定义。绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html> rel ...
分类:
Web程序 时间:
2018-10-04 11:08:29
阅读次数:
186
一、浮动原理 把网页当成一个水槽,浮动的元素当成一个积木,设置浮动的元素会脱离文档流 左浮动: 右浮动: 注意点: 如果不够容纳元素,则会被挤到下一行,如下图所示 右浮动的例子 (1)当两个box right类型同时右浮动布局时,如果宽度不超过可容纳的范围,则正常,否则是在下一行排列 宽度足够时: ...
分类:
其他好文 时间:
2018-10-02 20:09:28
阅读次数:
165
基础:在网页做什么事 要想清楚 事针对谁做,这个谁就是“对象“,当对象不存在 ,就会乱套。A.relative:只针对自己定位,比如说你设置left top ,只对自己有效果,不脱离文档流 : B.absolute:针对有relative的父级,定位,如果父级 没有再往上找 一直找,都没有的话就以b ...
分类:
其他好文 时间:
2018-10-01 10:43:13
阅读次数:
145
1、什么是网页的布局方式 网页的布局方式其实就是指浏览器是如何对网页中的元素是如何排版的 1、标准流(文档流/普通流)排版方式 1.1、浏览器默认的排版方式 1.2、在css元素中,分为行内元素,块级元素,行内块级元素 1.3、在标准流中有两种排版,一种是垂直排版,一种是水平排版; 垂直排版:如果元 ...
分类:
Web程序 时间:
2018-09-30 15:01:07
阅读次数:
167
1. transparent 透明的 2. placeholder 提示语 3. 写页面: 搞清楚结构层次; 保证模块化,让他们之间不能受影响——元素性质 标准流; * 浮动带来的脱离文档流撑不起父级的高度问题,可以采用清除浮动的方式消除影响,absolute和fixed带来的脱离,文档流撑不起父级 ...
分类:
其他好文 时间:
2018-09-29 21:38:54
阅读次数:
192
一、默认定位static: position的默认值,一般不设置position属性时,会按照正常的文档流进行排列。 二、相对定位relative: 1、relative 就是相对元素static定位时的位置进行偏移,如果不指定top,right,bottom,left的值,其位置是没有变化的。 2 ...
分类:
Web程序 时间:
2018-09-28 00:10:10
阅读次数:
190