浮动和定位

最新推荐文章于 2022-09-16 16:52:42 发布

原创最新推荐文章于 2022-09-16 16:52:42 发布 · 190 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

国信安专栏收录该内容

42 篇文章

订阅专栏

本文详细介绍了CSS中的浮动和定位概念。浮动包括左浮动和右浮动，它使元素脱离标准文档流并影响周围元素布局。浮动可能导致父元素塌陷，可通过设置高度、overflow属性或使用clear和伪类来解决。定位包括相对定位、绝对定位和固定定位，它们使元素依据不同参照物进行偏移。同时，文章还提到了CSS中的一些其他属性，如透明度、word-break和display。

一、浮动

http://vrg123.com/

文档流：网页中元素排列顺序。
标准文档流（默认）：从上到下，从左到右
浮动流：
左浮动：从左到右，从上到下；右浮动：从右到左，从上到下

浮动原理：
1、浮动元素将脱离标准文档流，浮动元素后面的标准元素会依次向上填充
2、浮动元素不会遮挡行内元素
3、浮动元素变成行内块级元素，内容有多宽它就有多宽
4、不允许浮动元素覆盖文字

浮动带来的问题：父盒子塌陷

如何解决父盒子塌陷（扩展盒子高度/清除浮动的影响）：
1、设置父盒子高度
2、使用overflow：visible | hidden | scroll属性来清除浮动（绝对定位不生效）；值为默认值visible时，是没有清除浮动的作用的。
3、clear：left | right | both
4、让父元素与子元素一起浮动（不推荐）
5、使用after伪类（clear属性）

overflow与clear在清除浮动时的区别：

overflow属性添加在父级上，绝对定位时不能实现清除浮动
clear属性：应用在浮动元素后面，clear添加一个新的标签

省略号：
 div{
            border: 1px solid red;
            height: 24px;
            width: 150px;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
        /*    妙用：扩展盒子的高度， visible: 不生效*/
        }

伪类选择器：
伪类：相当于一个类
伪元素：相当于一个元素

a标签的四个伪类：
link：未点击
visited：已点击
hover：悬停
active：激活状态
注：hover，active：是所有元素都有的伪类。

盒子的计算方式：

盒子总尺寸 = 内容+内边距+外边距
标准模式：设置的宽高+padding+border+margin
怪异模式：设置的宽高+margin

http://bugshouji.com/bbs-read-run?tid=86

 指定计算方式：
	 box-sizing: border-box;
设置这个属性可以解决给盒子设置border、padding后盒子变大问题。

二、定位

position:
	static:没有定位（默认）
	relative:相对定位
	absolute:绝对定位
	fixed:固定定位

相对定位原理：
不论是标准元素还是浮动元素，相对于它没有定位前的位置进行偏移。

绝对定位原理：
会脱离标准文档流，变成行内块级元素。如果有已经定位的祖先元素，以最近的祖先元素为准；没有定位的祖先元素，以页面可视内容为准进行设置。

固定定位原理：
会脱离标准文档流，变成行内块级元素。相对于浏览器窗口进行设置

z-index:值;
作用：指定层叠顺序，值越大，优先级越高。
值：-1~999
默认值：auto（如果父元素有z-index，就和父元素一样，不然就为零）
注：z-index要和position一起使用。否则无效

透明度：

opacity:0-1，越小越透明
过滤器：
filter:alpha(opacity=x):0-100；
值越小越透明

word-break:默认单词不换行
display:
none:隐藏
inline:行内
block:块级
inline-block:行内块级