CSS定位布局

已于 2022-09-16 17:17:56 修改
阅读量251 收藏
点赞数
文章标签： css css3 html
于 2022-07-25 16:33:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_48639265/article/details/125977211
版权

1.静态定位

所有元素的默认定位方式。
position:static;

2.相对定位

特性： 相对于自身在浏览器中的位置定位，不脱离文档流。
position:relative;
配合属性
同一方向的属性只能使用一个 top,right,bottom,left 来控制

3.绝对定位

特性： 1.脱离文档流，原先位置不保留； 2. 默认使用了绝对定位元素，无论有没有父元素，参照点是body浏览器视口区域； 3.如果祖先元素使用了定位属性，则相对于祖先元素定位。

水平垂直居中
1.给父元素设置border,给子元素设置margin:width/2;
2.给父元素设置box-sizing:border-box padding:父元素宽度减子元素宽度再除二分之一;
3.子绝父相,给子元素设置top,left,bottom,right全部为0,margin:auto;
4.子绝父相,给子元素设置top:50%,left:50%,margin-left:-width/2,margin-top:-height/2;

<style>
		.parent{
			width: 200px;
			height: 200px;
			background-color: blue;
			/* 1.水平垂直居中 通过给父元素设置边框 */
			/* border: 1px solid red; */
			/* 2.1水平垂直居中 通过父元素挤压padding */
			/* padding: 50px; */
			/* 2.2 设置边框盒模型*/
			/* box-sizing: border-box; */
			/* 3.1父元素相对定位 */
			/* position: relative; */
			/* 4.1父元素相对定位 */
			position: relative;
		}
		.child{
			width: 100px;
			height: 100px;
			background-color: red;
			/* 1.2 margin上下左右为宽高的各一半 */
			/* margin: 50px; */
			/* 3.2子元素设置绝对定位
			 配合属性全部为0 
			 margin:auto 
			 */
			/* position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			margin: auto; */
			/* 4.2 子元素绝对定位 
				top:50% left:50%
				margin-left:-width/2
				margin-top:-height/2
			*/
			position:absolute;
			top: 50%;
			left: 50%;
			margin-left: -50px;
			margin-top: -50px;
		}
	</style>
</head>
<body>
	<div class="parent">
		<div class="child"></div>
	</div>
</body>

固定定位

特性： 脱离文档流，相对于浏览器视口区域，不保留原先位置。
position:fixed;

粘滞定位

特性： relative + fixed 定位一个定位属性，默认相对定位达到阈值就是固定定位，不脱离文档流，原先位置保留。
如：设置了top: 50px，那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定，不再向上。

设置 position:sticky同时给一个 (top,bottom,right,left)之一即可

使用条件

  1. 父元素不能overflow:hidden或者overflow:auto属性；
  2. 必须指定top、bottom、left、right4个值之一，否则只会处于相对定位 ；
  3. 父元素的高度不能低于sticky元素的高度；
  4. sticky元素仅在其父元素内生效。

z-index

默认情况下所有的元素都有一个默认的z-index属性, 取值是0。

更改元素堆叠顺序
z-index:0
使用了定位元素 z-index:-1;

两列布局，自适应

<style>
        .left {
            width: 300px;
            background-color: red;
            float: left;
        }

        .right {
            background-color: blueviolet;
            /* 触发BFC */
            overflow: auto;
        }
    </style>
</head>

<body>
    <div class="left">左边定宽</div>
    <div class="right">右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应
        右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应
        右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应
        右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应
        右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应
        右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应
        右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应
        右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应
    </div>
</body>

运行结果：
在这里插入图片描述

三列布局，自适应

<style>
        /* 两列定宽 中间自适应 */
        .left,
        .right {
            width: 200px;
            height: 200px;
            background-color: darkorange;
        }

        .left {
            float: left;
        }

        .right {
            float: right;
        }

        .center {
            height: 400px;
            background-color: darkgoldenrod;
            /* margin: 0 200px; */
            /* 触发BFC */
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>
</body>

运行结果：

在这里插入图片描述

九宫格

<style>
        .container {
            /* 水平居中 */
            margin: 0 auto;
            width: 600px;
            height: 600px;
            /* background-color: brown; */
        }

        .container>div {
            width: 200px;
            height: 200px;
            float: left;
        }

        .container>div:nth-child(odd) {
            background-color: rgb(23, 212, 212);
        }

        .container>div:nth-child(even) {
            background-color: rgb(238, 255, 127);
        }
    </style>
</head>

<body>
    <div class="container">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>

运行结果：
在这里插入图片描述

头部导航栏

<style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;

        }

        /* 设置父容器样式 */
        .container {
            width: 726px;
            height: 8888px;
            /* background-color: brown; */
            margin: 0 auto;
        }

        /* 设置一级菜单样式 */
        .container ul li {
            /* 右边框 */
            border-right: 1px solid white;
            width: 120px;
            height: 50px;
            text-align: center;
            /* 文字垂直居中 */
            line-height: 50px;
            font-size: 20px;
            /* 浮动 */
            float: left;
            background-color: royalblue
        }

        .container ul li a {
            /* a 标签颜色不可以继承  h1标题字体大小也不可以继承 */
            color: #fff;
            text-decoration: none;
        }

        /* 设置二级菜单隐藏 */
        .container ul li ul {
            display: none;
        }

        .container ul li:hover {
            background-color: darkcyan;
        }

        /* 设置二级菜单显示 */
        .container ul li:hover ul {
            display: block;
        }
    </style>
</head>

<body>
    <div class="container">
        <ul>
            <li><a href="#">首页</a></li>
            <li>

                <a href="#">亲子旅游</a>
                <!-- 二级菜单栏 -->
                <ul>
                    <li>样式1</li>
                    <li>样式2</li>
                    <li>样式3</li>
                </ul>
            </li>
            <li>
                <a href="#">居家生化</a>
                <!-- 二级菜单栏 -->
                <ul>
                    <li>样式1</li>
                    <li>样式2</li>
                    <li>样式3</li>
                </ul>
            </li>
            <li><a href="#">宠物生活</a>
                <!-- 二级菜单栏 -->
                <ul>
                    <li>样式1</li>
                    <li>样式2</li>
                    <li>样式3</li>
                </ul>
            </li>
            <li><a href="#">美食酒水</a></li>
            <li><a href="#">个护清洁</a></li>
        </ul>
    </div>
</body>

运行结果：
在这里插入图片描述

网易严选宫格

<style>
        .container {
            width: 800px;
            height: 600px;
            margin: 0 auto;
            background-color: darkgray;

        }

        .container>div:first-child {
            width: 230px;
            height: 600px;
            background-color: darkblue;
            margin-left: 0;
        }

        /* 剩余div样式 */
        .container>div {
            width: 180px;
            height: 295px;
            margin-left: 10px;
            background-color: yellow;
            float: left;
        }

        .container>div:nth-child(n+5) {
            background-color: green;
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>

运行结果：

在这里插入图片描述

恬淡如雪
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS之定位布局
qq_53977993的博客
10-25 349
本章主要介绍了CSS中定位的用法，有相对定位、绝对定位、固定定位和粘滞定位，希望对你有所帮助。
【CSS系列】第九章 · CSS定位和布局
麟-小白的博客
05-14 781
Hello大家好， 我是【麟-小白】，一位软件工程专业的学生，喜好计算机知识。希望大家能够一起学习进步呀！本人是一名在读大学生，专业水平有限，如发现错误或不足之处，请多多指正！！！如果小哥哥小姐姐们对我的文章感兴趣，请不要吝啬你们的小手，多多呀！❤❤❤爱你们！！！目录【往期回顾】1. 定位1.1相对定位如何设置相对定位？给元素设置即可实现相对定位。可以使用leftrighttopbottom四个属性调整位置。相对定位的参考点在哪里？
css布局和定位
二师弟的博客
03-12 921
参考优秀的 CSS 布局和设计可以帮助我们学习和了解 CSS 的最佳实践，提高自己的 CSS 技能和设计水平
CSS布局之定位 详解（相对定位、绝对定位、子绝父相、固定定位）
Esther_liew的博客
05-26 1903
CSS布局--定位详解（相对定位、绝对定位、子绝父相、固定定位）
1.05 css定位布局
10-07
CSS 定位布局详解 在 CSS 中，定位（position）是指元素在网页中的位置和布局方式。CSS 提供了多种定位方式，包括 static、relative、absolute、fixed 等。不同的定位方式将元素在网页中的位置和布局方式进行调整。...
css定位布局.html
最新发布
11-16
css定位布局.html
CSS学习之五 定位布局
12-03
在CSS布局中，定位是控制元素在网页上精确位置的关键技术。本文主要聚焦于CSS的定位属性，特别是`position`属性及其不同的值：`static`、`relative`、`absolute`和`fixed`。 首先，`position`属性的默认值为`static...
CSS定位.pdf
04-12
CSS定位是网页设计中至关...总的来说，CSS定位提供了强大的布局控制能力，开发者可以根据需求选择合适的定位方式，实现各种复杂的网页布局。在实际应用中，理解这些定位方式及其相互之间的差异是优化用户体验的关键。
CSS定位布局详解
大河之犬的博客
10-03 6916
CSS定位使你可以将一个元素精确地放在页面上指定的地方。联合使用定位和浮动，能够创建多种高级而精确的布局。其中，定位布局共有4种方式。固定定位（fixed相对定位（relative绝对定位（absolute静态定位（static。
CSS布局之定位布局
m0_48796380的博客
03-20 962
文章目录前言一、position: static;(静态布局)二、position: relative;(相对定位)注意点：使用场景：三、position: absolute;(绝对定位)绝对定位的参考点注意点四、position: fixed;(固定定位)注意点五、position: sticky;(粘滞定位)注意点使用条件六、z-index注意点 前言 今天来讲一下css中的定位布局，分为静态(static)，相对(relative)，绝对(absolute)，固定(fixed)，粘滞(sticky)
【CSS】CSS 布局——定位
小秀的博客
08-30 209
在CSS（层叠样式表）中，定位是一种用来控制元素在网页上的布局位置的技术。CSS提供了不同的定位属性，用于控制元素相对于其父元素或文档视口的位置。
CSS 定位布局
叱咤少帅的博客
10-20 362
CSS 定位布局
测开：前端基础-css页面布局-定位
喵酱
03-06 616
测开：前端基础-css页面布局-定位
CSS定位详解
老电影故事的博客
11-25 4812
一、CSS position CSS position属性用于指定一个元素在文档中的定位方式，定位分为静态定位，相对定位，绝对定位，固定定位、粘性定位这五种其中top、right、bottom、left和z-index属性则决定了该元素的最终位置。 二、静态定位（static） 一般的标签元素不加任何定位属性都属于静态定位，在页面的最底层属于标准流。 1、对边偏移无效。 2、一般用来清除定位的 3、一个有定位的盒子不想再有定位了，加上 position:static;就可以了 三、相对定位（relati
CSS - 定位布局（position）
伏城之外的博客
07-20 2113
浮动布局的不足、定位模式和边偏移、静态定位、相对定位、z-index、层叠上下文、Stacking Context、包含块、Containing block、绝对定位、子绝父相、水平垂直居中、margin:auto、固定定位、版心右侧、视觉视口、布局视口、连续媒体、分页媒体、粘性定位、滚动机制............
CSS定位布局与装饰技巧详解
本资源主要聚焦于CSS基础中的定位布局和装饰技术。学习目标包括理解定位在网页设计中的重要性，以及掌握不同定位方式的特点。定位是CSS布局的关键组成部分，它允许设计师控制元素在页面上的位置，常用于解决盒子间...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值