浮动和定位

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

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、浮动

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:行内块级

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值