float浮动,css定位

Float浮动·:

float: left | right | none | inherit;(只能左右浮动,不能上下浮动)

float特征:

1,块在一排显示
2内联支持宽高
3默认内容撑开宽度
4脱离文档流
5提升层级半层
clear清除浮动:

clear : left | right | both | none | inherit; (清除元素的某个方向上的浮动元素)

clear : both; (在左右两侧浮动元素皆被清除)

清除浮动的方法:

加高(扩展性不好)
父级浮动(页面中所有元素都加浮动,margin左右自动失效)
inline-block 清除浮动方法(margin左右auto失效)
空标签清浮动(IE6最小高度19px;(解决后IE6下还有2px偏差))
br 清除浮动(不符合工作中:结构、样式、行为,三者分离的要求)
after伪类 清除浮动方法:给元素尾部添加内容或者zoom缩放(触发IE下 haslayout,使元素根据自身内容计算宽高,FF不支持)
overflow:hidden 清除浮动(需要配合宽度或者zoom 兼容IE6、IE7)
(overflow: scroll | auto | hidden; overflow: hidden;溢出隐藏)
CSS定位:

只有position属性值为relative、absolute、fixed才可以使用,top、right、bottom、left属性。

static静态定位(不对它的位置进行改变)
fixed固定定位(参照物—浏览器窗口)——做弹窗广告用(生成固定定位的元素,相对于浏览器窗口进行定位)
relative相对定位(参照物以他本身)(生成相对定位的元素,相对于其正常位置进行定位)
absolute(绝对定位)(除了static都可以,找到参照物,与它最近的已经有定位的父元素进行定位)(生成绝对定位的元素,相对于static定位以外的第一个父元素进行定位)
z-index:

z-index属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
定位的基本思想: 它允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。
一切皆为框:

块级元素: div、h1或p元素 即:显示为一块内容称之为 “块框“ ;
行内元素: span,strong,a等元素 即:内容显示在行中称 “行内框”;
使用display属性改变成框的类型 即:display:block; 让行内元素设置为块级元素,display:none; 没有框

float浮动,css定位

上一篇:vscode 开启html代码自动补全


下一篇:js货币金额正则表达式