0
点赞
收藏
分享

微信扫一扫

CSS知识点05

春意暖洋洋 2022-03-12 阅读 36

一、浮动 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

(2) 给父元素加height

(3)清除浮动

示例:

<!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、定义:

2、position属性

  • static

 

.box1{
		/* position: static; 默认*/
		position: relative; /* 相对定位 相对于自己原来的位置 */
		left: 500px;
		top: 200px;
		width: 200px;
		height: 200px;
			}
  • relative 相对定位
	.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     固定定位
.box1{
				 position: fixed;  /*固定定位 */
				/* 始终相对于浏览器定位 */
				 right: 0;
				bottom: 0; 
				width: 200px;
				height: 200px;
				background-color: #f00;
			}
  • sticky  粘性定位
.box1{
             position: sticky;  /*粘性定位 */
              /* 是 position:relative 与 position:fixed 的结合体 */
              position: fixed;
              top: 0px; /*当离顶部距离变为0时,将会黏住,不再随页面滚动*/
              height: 100px;
            }

举报

相关推荐

CSS知识点

CSS知识点01

css部分知识点

CSS知识点4

CSS知识点总结2

0 条评论