CSS浮动定位 （十四）

最新推荐文章于 2022-08-28 20:49:35 发布
最新推荐文章于 2022-08-28 20:49:35 发布
阅读量392 收藏
点赞数 1
分类专栏： 笔记 文章标签： css html5 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43800904/article/details/119939448
版权

目录

浮动和定位： 

定位的分类（5类）:

1、默认的定位

2、特殊的定位（4中）

浮动定义：

清除浮动

浮动练习：

伪类：

浮动、伪类练习：

相对、绝对、固定定义：（明白偏移的目标）

练习：

浮动和定位： 

块级元素：div、h、ul、li、p

  1. 独占一行（独占的不是body的一行，而是父容器的一行），不能与其他任何元素并列。

  2. 能够设置宽、高。

  3. 如果不设置宽度，那么宽度将默认变为父亲的100%。 

行内元素：span、a、input、u、i、img

  1. 与其他行内元素可以并排。

  2. 不能设置宽、高。默认的宽度、高度，就是文字的宽度、高度。

块级元素和行内元素的相互转换

块级元素可以设置为行内元素

行内元素可以设置为块级元素

  1.               div{

  2.                      display: inline;

  3.                      background-color: pink;

  4.                      width: 500px;

  5.                      height: 500px;

  6.               }

display是“显示模式”的意思，用来改变元素的行内、块级性质

inline就是“行内”。

一旦，给一个标签设置

  1. display: inline;

那么，这个标签将立即变为行内元素。此时它和一个span无异：

· 此时这个div不能设置宽度、高度；

· 此时这个div可以和别人并排了

同样的道理，

  1.               span{

  2.                      display: block;

  3.                      width: 200px;

  4.                      height: 200px;

  5.                      background-color: pink;

  6.               }

“block”是“块”的意思

让标签变为块级元素。此时这个标签，和一个div无异：

· 此时这个span能够设置宽度、高度

· 此时这个span必须霸占一行了，别人无法和他并排

     · 如果不设置宽度，将撑满父亲

<html>

  <head>

     <meta charset="UTF-8">

     <title></title>

     <style>

       div {

          display: inline;

          width: 200px;

          height: 200px;

          background-color: red;

          margin-top: 2px;

       }

       span {

          display: block;

          width: 200px;

          height: 200px;

          background-color: green;

       }

     </style>

  </head>

  <body>

     <div>Div1</div>

     <div>Div2</div>

     <div>Div3</div>

     <span>Span测试</span>

  </body>

</html>

定位的分类（5类）:

1、默认的定位

     默认的块元素垂直排列（div，p，h，ul，uo），行内元素左右排列（img，a，span，input）

     这种默认的排列方式成为流定位。

标准流里面限制非常多，在做界面布局时候经常需要下面这种需求：

让块级元素既能设置宽和高，又能左右排列

这个就是要解决的问题？？？？

脱离流定位。

2、特殊的定位（4中）

  • 浮动定位：可以让块元素左右排列（没有失去块级元素可以设置宽和高的优点）。

  • 相对定位：可以让元素以自身为目标产生微小的偏移。

  • 绝对定位：可以让元素以父类为目标产生很大的偏移。

  • 固定定位：可以让元素以窗口为目标产生很大的偏移。

      后面三种定位都是以某元素为目标产生便宜。

浮动定义：

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动框脱离DOM流，父级元素会表现的浮动框不存在一样。

浮动示例：

清除浮动

1、clear 属性规定元素的哪一侧不允许其他浮动元素。

clear:消除浮动对自己的影响，当前元素会移动到浮动元素的下方。

2、浮动和清除浮动成对出现

3、清除浮动一般放在最靠近浮动元素的尾部，清除浮动只对同级元素有效

 

!DOCTYPE html>

<html>

    <head>

       <meta charset="utf-8">

       <title></title>

       <style type="text/css">

           .fl {

               float: left;

           }

           .fr {

               float: right;

           }

           .clear {

               clear: both;

           }

           /* container中只写和这个相关的,不写其他的 */

           .container {

               width: 1000px;

               margin: 0 auto;

           }

           .company .item {

               width: 244px;

               height: 200px;

               margin: 3px;

               background-color: greenyellow;

           }

           .bg-pink {

               background-color: pink;

           }

           .service .item {

               width: 162px;

               height: 250px;

               margin: 2px;

               background-color: skyblue;

           }

           .company .title {

               height: 50px;

               background-color: darkblue;

           }

           .service .title {

               height: 50px;

               margin-top: 20px;

               margin-bottom: 20px;

               background-color: red;

           }

           .bg-orange {

               background-color: orange;

           }

           /* .service {

               padding-top: 20px;

           } */

       </style>

    </head>

    <body>

       <div class="bg-pink company">

           <div class="container">

               <div class="title">标题</div>

               <div class="list">

                  <div class="item fl">1</div>

                  <div class="item fl">2</div>

                  <div class="item fl">3</div>

                  <div class="item fl">4</div>

                  <div class="item fl">5</div>

                  <div class="item fl">6</div>

                  <div class="item fl">7</div>

                  <div class="item fl">8</div>

                  <div class="clear"></div>

               </div>

           </div>

       </div>

       <div class="bg-orange service">

           <div class="container">

               <div class="title">标题</div>

               <div class="list">

                  <div class="item fl">1</div>

                  <div class="item fl">2</div>

                  <div class="item fl">3</div>

                  <div class="item fl">4</div>

                  <div class="item fl">5</div>

                  <div class="item fl">6</div>

                  <div class="clear"></div>

               </div>

           </div>

       </div>

    </body>

</html>

浮动练习：

<!DOCTYPE html>

<html>

    <head>

       <meta charset="UTF-8">

       <title></title>

       <style>

           * {

               padding: 0;

               margin: 0;

           }

           

           .fl {

               float: left;

           }

           

           .fr {

               float: right;

           }

           

           .clear {

               clear: both;

           }

           /* container中只写和这个相关的,不写其他的 */

           

           .container {

              width: 730px;

               /*上下20px，auto实现左右自动居中*/

               margin: 20px auto;

           }

           

           body {

               background-color: rgb(0, 102, 102);

           }

           

           .pic-box ul {

               border: 2px solid red;

               /*去掉ul中小圆点*/

               list-style-type: none;

           }

           

           .pic-box li {

               border: 1px solid red;

               padding: 10px;

               margin: 10px;

               background-color: rgb(204, 204, 204);

           }

           

           .pic-box img {

               width: 200px;

               height: 200px;

           }

           

       

           .pic-box p {

               /*文字水平居中*/

               text-align: center;

           }

       </style>

    </head>

    <body>

       <div class="pic-box">

           <div class="container">

               <ul>

                  <li class="fl">

                      <img src="img/01.jpg" />

                      <p>Java学习教程</p>

                  </li>

                  <li class="fl">

                      <img src="img/02.jpg" />

                      <p>Java学习教程</p>

                  </li>

                  <li class="fl">

                      <img src="img/03.jpg" />

                      <p>Java学习教程</p>

                  </li>

                  <li class="fl">

                      <img src="img/04.jpg" />

                      <p>Java学习教程</p>

                  </li>

                  <li class="fl">

                      <img src="img/05.jpg" />

                      <p>Java学习教程</p>

                  </li>

                  <li class="fl">

                      <img src="img/06.jpg" />

                      <p>Java学习教程</p>

                  </li>

                  <li class="fl">

                      <img src="img/06.jpg" />

                      <p>Java学习教程</p>

                  </li>

                  <li class="fl">

                      <img src="img/06.jpg" />

                      <p>Java学习教程</p>

                  </li>

                  <div class="clear"></div>

               </ul>

           </div>

       </div>

    </body>

</html>

伪类：

同一个标签，根据用户状态的不同，有不同的效果，就叫“伪类”。

<html>

   <head>

     <meta charset="UTF-8">

     <title></title>

     <style>

        /*用户没有点过，初始状态*/

        a:link {

          color: red;

        }

        /*访问过之后*/

        a:visited {

          color: orange;

        }

        /*鼠标悬停状态*/

        a:hover {

          color: green;

        }

        /*鼠标点击这个超链接但是没有松手*/

        a:active {

          color: blue;

        }

     </style>

   </head>

   <body>

     <a href="##">伪类测试</a>

   </body>

</html>

浮动、伪类练习：

<!DOCTYPE html>

<html>

    <head>

       <meta charset="UTF-8">

       <title></title>

       <style>

           * {

               padding: 0;

               margin: 0;

           }

           

           .fl {

               float: left;

           }

           

           .fr {

               float: right;

           }

           

           .clear {

               clear: both;

           }

           /* container中只写和这个相关的,不写其他的 */

           

           .container {

               width: 960px;

               /*上下20px，auto实现左右自动居中*/

               margin: 100px auto;

           }

           

           .nav {

               width: 100%;

               height: 40px;

               background-color: rgb(1, 32, 79);

           }

           

           .nav ul {

               /*去掉ul中的小圆点*/

               list-style-type: none;

           }

           

           .nav ul li {

               width: 68px;

               height: 40px;

               /*让文字水平居中*/

               text-align: center;

               /*line-height是行高，height是高

                line-height和height一样，文字就会垂直居中*/

               line-height: 40px;

           }

           

           .nav ul li a {

               /*a标签是行内元素，这里转换为块级元素就可以设置宽高*/

               /*转换为块级元素独占一行，独占的是父容器li的一行，不是body的一行*/

               display: block;

               width: 68px;

               height: 40px;

               text-decoration: none;

               color: white;

           }

           

           .nav ul li a:hover {

               background-color: red;

           }

       </style>

    </head>

    <body>

       <div class="nav">

           <div class="container">

               <ul>

                  <li class="fl">

                      <a href="#">首页</a>

                  </li>

                  <li class="fl">

                      <a href="#">国内</a>

                  </li>

                  <li class="fl">

                      <a href="#">国际</a>

                  </li>

                  <li class="fl">

                      <a href="#">军事</a>

                  </li>

                  <li class="fl">

                      <a href="#">财经</a>

                  </li>

                  <li class="fl">

                      <a href="#">娱乐</a>

                  </li>

                  <li class="fl">

                      <a href="#">体育</a>

                  </li>

                  <li class="fl">

                      <a href="#">互联网</a>

                  </li>

                  <li class="clear"></li>

               </ul>

           </div>

       </div>

    </body>

</html>

相对、绝对、固定定义：（明白偏移的目标）

1、他们的共同点：

  • 都是要设置偏移，并且设置偏移的方式是一样的

  • 设置偏移的语法也是一样的

  • 以任意边为基准，向中心方向偏移为整数

 

2、他们的不同

相对定位：relative定位

1、参照物：自身

2、存在DOM流中，占据原先的空间

3、必须配合top/bottom/left/right四个方位才能生效

4、上下选一个，左右选一个

5、微调某一个元素的位置，常被用来作为绝对定位元素的参照物。

6、position:relative

/*鼠标在li上悬停时候,让li向右上方各偏移2px,实现抖动效果*/

li:hover{

   position: relative;

   left:2px;/*左边往右偏移2px*/

   top:-2px;/*上边往上偏移2px*/

}

绝对定位：absolute定位

 1、参照物：最靠近的已定位（fixed/relative/absolute）祖先元素，如果没有已定位的祖先元素，

       那么它的位置相对于<html>或者<body>定位;

2、脱离DOM流，不占据空间。

3、必须配合top/bottom/left/right四个方位才能生效

4、上下选一个，左右选一个

5、常用作动画结构

6、position:absolute

固定定位:fixed定位

1、参照物：浏览器窗口

2、脱离DOM流，不占据空间

3、必须配合top/bottom/left/right四个方位才能生效

4、上下选一个，左右选一个

5、除非特殊用途，定位的时候，不要用margin

6、position:fixed

练习：

<!DOCTYPE html>

<html>

    <head>

       <meta charset="UTF-8">

       <title></title>

       <link rel="stylesheet" type="text/css" href="css/myweb.css"/>

    </head>

    <body>

       <div class="header">

           <div class="container">

               <div class="logo fl"></div>

               <div class="nav-lan fl">

                  <div class="language fr">选择语言</div>

                  <div class="nav fr">导航</div>

                  <div class="clear"></div>

               </div>

               <div class="clear"></div>

           </div>

       </div>

       <div class="center"></div>

       <div class="footer"></div>

    </body>

</html>



myweb.css:

* {

    padding: 0;

    margin: 0;

}

.fl {

    float: left;

}

.fr {

    float: right;

}

.clear {

    clear: both;

}

/* container中只写和这个相关的,不写其他的 */

.container {

    width: 970px;

    margin: 0px auto;

}

.header {

    width: 970px;

    height: 103px;

    /*background-color: green;*/

    margin: 0 auto;

}

.header .logo {

    width: 277px;

    height: 103px;

    background-color: red;

}

.header .nav-lan {

    width: 679px;

    height: 103px;

    margin-left: 14px;

    /*background-color: green;*/

}

.header .nav-lan .language {

    width: 137px;

    height: 49px;

    background-color: green;

}

.header .nav-lan .nav {

    width: 679px;

    height: 46px;

    background-color: green;

    margin-top: 8px;

}

.center {

    width: 970px;

    height: 435px;

    background-color: yellow;

    margin: 0 auto;

    margin-top: 10px;

}

.footer {

    width: 970px;

    height: 35px;

    background-color: blue;

    margin: 0 auto;

}

嘟嘟°深深的眷恋づ
关注
专栏目录
CSS浮动
N奈斯先生的博客
09-06 173
   欢迎加入前端技术营！如果你也是前端学习者或者对前端有学习的想法，那就跟着我一起从零开始进击前端。   致力于尽可能详细且简洁的介绍前端知识、自己的捷径，也是学习路上的记录。欢迎探讨 目录 一、CSS浮动 二、每日面试题 一、传统网页布局的三种方式 二、CSS浮动 浮动我在之前写过一篇，重点写了浮动的原理、添加浮动、清除浮动。详情戳一篇文章让你清楚浮动。 这里再详细介绍下浮动的属性 ...
CSS-浮动【看这一篇就够了】
最新发布
zheshiyangyang的博客
08-31 784
:after。
css 相对定位 绝对定位 浮动 分析
09-25
在CSS布局中，定位（Positioning）是一种关键的机制，用于控制元素在页面上的精确位置。本篇文章将深入探讨相对定位、绝对定位以及浮动的概念，这些都是网页设计中不可或缺的技能。 **相对定位（Relative ...
理解CSS浮动float、定位position
09-27
CSS的`position`属性控制元素的定位方式，主要有四个值：`static`（默认值，遵循标准流）、`relative`（相对定位）、`absolute`（绝对定位）和`fixed`（固定定位）。 1. 相对定位(relative)： - `position:...
CSS3定位和浮动详解
09-24
CSS的定位属性主要通过position属性实现，它有四个可能的值：static（静态定位，默认值）、relative（相对定位）、absolute（绝对定位）和fixed（固定定位）。每个定位模式都有其特殊的用途和行为。 1. 静态定位...
CSS基础学习之定位—流定位 浮动定位 相对定位 绝对定位 固定定位 粘性定位
01-08
CSS基础声明定位定位简介流定位浮动定位相对定位绝对定位固定定位粘性定位堆叠顺序定位属性总结 定位 定位简介 定位：定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的...
CSS 浮动
m0_52861684的博客
08-28 5219
CSS浮动。
浮动与定位详解：CSS布局关键
浮动与定位是CSS布局中的核心概念，它们对网页设计的灵活性和响应性有着至关重要的作用。下面我们将深入探讨这两个主题。 ### 浮动 (Float) 浮动最初是为了实现文本环绕图像的功能，但后来发展成为一种布局工具。当...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值