CSS知识点05

三七yiii

已于 2022-03-14 19:44:41 修改

阅读量493

点赞数 2

文章标签： css css3 前端

于 2022-03-12 15:04:22 首次发布

本文链接：https://blog.csdn.net/m0_65208646/article/details/123440191

版权

一、浮动 float

        浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。加了浮动会自动块化。

        正常文档流在下，浮动在上时，会浮到正常文档流上方。

        正常文档流在上，浮动在下时，浮动只能浮在正常文档流下一行。

值	解释
none	默认，不浮动
left	左浮动
right	右浮动

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box1{
				float: right;  /* 右浮动 */
				width: 200px;
				height: 200px;
				background-color: #FF0000;
			}
			.box2{
				float: left; /* 左浮动*/
				width: 300px;
				height: 300px;
				background-color: #00f;
			}
		</style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
	</body>
</html>

效果：

二、清除浮动

1、浮动造成的影响

对于其父元素来说,元素浮动之后,它将脱离正常的文档流,所以它也无法撑开其父元素, 会造成其父元素高度的塌陷。下方另一个块内容会重叠到父元素上。

2、解决办法

（1）开启BFC

给父元素加overflow，overflow的值是除了visible以外的其他值，副作用最小，推荐使用。
给父元素加display:inline-block 或者dispaly值是table、table-cell、flex，但是会出现宽度缺失，下边可能会出现缝隙，无法居中等问题，一般不推荐使用。
给父元素加浮动，float的值bushinone的其他值，但是有副作用，不太推荐。

以上三种方式可以解决哪些问题：

margin重叠问题
浮动带来的父元素高度坍塌问题

（2）给父元素加height

（3）清除浮动

在所有有浮动的元素后加一个空元素div，给此空元素添加样式clear:both

      clear:left   清除左浮动
      clear:right    清除右浮动
      clear:both   清除左、右浮动

   给父元素添加伪元素,在此伪元素上清除浮动，在css中

         .clearfix::after{
                 display:block;
                  content:"";（不能缺少，空的也要写）
                  clear:both;}

示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .boxf {
            background-color: grey;
            width: 100%;
        }

        .box1 {
            float: right;
            width: 500px;
            height: 800px;
            background-color: aquamarine;
        }

        .box2 {
            float: left;
            width: 300px;
            height: 600px;
            background-color: pink;
        }

        .clearfix::after {
            content: "";
            clear: both;
            display: block
            /* 撑起父元素的高度 */
        }

        /* .box3{
            clear:left 清除左浮动
		    clear:right 清除右浮动
		    clear:both 
    }清除左、右浮动 */
    </style>
</head>

<body>
    <div class="boxf clearfix">
        <div class="box1"></div>
        <div class="box2"></div>
        <!-- <div class="box3"></div> -->
    </div>
</body>

</html>

效果：

三、定位 position

1、定义：

CSS 为定位提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠。

定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

2、position属性

static

默认值，元素框正常生成。

.box1{
		/* position: static; 默认*/
		position: relative; /* 相对定位 相对于自己原来的位置 */
		left: 500px;
		top: 200px;
		width: 200px;
		height: 200px;
			}

relative 相对定位

相对定位在“文档流”的基础上，结合left和top，top，bottom属性，相对于原来的自己定位，浮动之后原来位置会空出来，不会被其他元素占据。

	.content{
				position: relative; 
				width: 1000px;
				height: 600px; 
				right: 0;
				top: 0;
				background-color: pink;
			}

absolute 绝对定位

        包含框（父元素，只要是包着该元素的元素）无定位，该元素将相对于浏览器定位。
        包含框有定位，则相对于离自己最近的有定位的元素定位。定位之后立刻脱离正常文档流，位置会被正常文档流占据

        一般父元素相对定位，子元素绝对定位绝对搭配使用的方式用的较多

	.box1{
				position: absolute;  /* 绝对定位 */
				/* 包含框无定位 相对浏览器定位 ,包含框有定位，则根据包含框定位*/
				left: 0;
				top: 0;
				width: 200px;
				height: 200px;
				background-color: #f00;
			}

fixed 固定定位

元素框的表现类似于将 position 设置为 absolute，但是其始终相对于浏览器定位

.box1{
				 position: fixed;  /*固定定位 */
				/* 始终相对于浏览器定位 */
				 right: 0;
				bottom: 0; 
				width: 200px;
				height: 200px;
				background-color: #f00;
			}

sticky 粘性定位

是position:relative与position:fixed结合，当在某个阈值时，是相对定位，超出某个阈值后，为固定定位

.box1{
             position: sticky;  /*粘性定位 */
              /* 是 position:relative 与 position:fixed 的结合体 */
              position: fixed;
              top: 0px; /*当离顶部距离变为0时，将会黏住，不再随页面滚动*/
              height: 100px;
            }

定位堆叠顺序 z-index

堆叠顺序值越大，优先级越高即值越大，堆叠越靠上
值可以为正也可以为负。
z-index只在定位的情况下才起作用

三七yiii

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
CSS知识点05

一、浮动 float浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。加了浮动会自动块化。正常文档流在下，浮动在上时，会浮到正常文档流上方。正常文档流在上，浮动在下时，浮动只能浮在正常文档流下一行。值解释 none 默认，不浮动 left 左浮动 right 右浮动 <htm...
复制链接

扫一扫