CSS中的float position display

最新推荐文章于 2022-04-08 16:02:36 发布

莓莓儿～

最新推荐文章于 2022-04-08 16:02:36 发布

阅读量248

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/fanfan_h/article/details/89335273

版权

CSS 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

css中的浮动：float

四个参数：
float：left; 左浮动
float：right; 右浮动
float：none; 不浮动
float：inherit; 不浮动
元素的水平浮动 left right
块级元素：元素在浮动之后会脱离文档流
要想水平浮动，浮动的子元素的总宽小于父元素的宽
注：子元素在浮动之后会导致父元素不能撑开
overflow：hidden 超出部分隐藏

 <style>
        .parent {
            width: 200px;
            border: 1px solid black;
            /*height: 100px;*/
            /*overflow: hidden;/!*超出部分隐藏*!/*/
        }

        .block {
            width: 100px;
            height: 100px;
            border: 1px solid red;
            box-sizing: border-box;
            float: right;
        }
    </style>
</head>
<body>
<div class="parent">
    <div class="block">
        1
    </div>
    <div class="block">
        2
    </div>
    <div style="clear: both"></div>
</div>
</body>

自己写的小案例（图片随便加的，有些违和啦*-*）

<title>float实际应用</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        .head{
            width:100%;
            height:64px;
        }
        .logo{
            width:160px;
            height:40px;
            float:left;
        }
        .nav{
            width:320px;
            height:64px;
            float:left;
        }
        .nav-li{
            width:80px;
            height:64px;
            text-align: center;
            line-height: 64px;
            color:#333;
            float:left;
        }
        .icons{
            width:320px;
            height:64px;
            float:right;
        }
        .i01{width:64px;
             height:64px;
            float:left;
             background:url("img/css.png") center center no-repeat;
        }
        .i02{width:64px;
            height:64px;
            float:left;
            background:url("img/sss.png") center center no-repeat;
        }
        .i03{width:64px;
            height:64px;
            float:left;
            background:url("img/yyy.png") center center no-repeat;
        }
        .i04{width:64px;
            height:64px;
            float:left;
            background:url("img/css.png") center center no-repeat;
        }
        .i05{width:64px;
            height:64px;
            float:left;
            background:url("img/sss.png") center center no-repeat;
        }
    </style>
</head>
<body>
     <div class="head">
         <div class="logo">
         <img src="img/logoo.png" width="160" height=40;alt="">
        </div>
      <div class="nav">
        <div class="nav-li">实战</div>
        <div class="nav-li">路径</div>
        <div class="nav-li">猿问</div>
        <div class="nav-li">手记</div>
     </div>
         <div class="icons">
             <div class="i01"></div>
             <div class="i02"></div>
             <div class="i03"></div>
             <div class="i04"></div>
             <div class="i05"></div>

         </div>
   </div>
</body>

在这里插入图片描述

css元素的定位：position

css定位：
相对定位：relative (占位置相对于自己的位置在移动和分层)
绝对定位：absolute（不占位置靠浏览器移动分层）
固定定位：fixed（不占位置固定在某一个位置）
元素在定位之后可以使用5个属性 left right top bottom z-index

 .block{
           /* position: relative;
            /!*left: 30px;*!/
            /!*top: 20px;*!/
            /!*right: 20px;
            bottom: 20px;*!/
            z-index:-1;
            top: 40px;*/

           /* position: absolute;
            z-index: -1;
            right: 0;
            bottom: 10px;*/

            position: fixed;
            right: 0;
            top:0;
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .block1{
            width: 150px;
            height: 150px;
            background-color: black;
        }

相对属性和绝对属性搭配使用：
父元素为relative，子元素为absolute

<style>
        .par{
            /*margin: 0 auto;*/
            position: relative;
            margin: auto;
            width: 400px;
            height: 400px;
            border: 1px solid black;
        }
        .child{
            position: absolute;
            left: 0;
            bottom: 0;
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .fix{
            position: fixed;
            width: 30px;
            height: 400px;
            right: 0;
            top: 0;
            background-color: silver;
        }
    </style>
</head>
<body>
<div class="par">
    <div class="child"></div>
    <div class="fix"></div>
</div>

自做小选项卡：

 <style>
        *{
            padding:0px;
            margin:0px;
        }
        .page{
            width:100%;
            height:5600px;
            background: url("img/mooc.png") center top no-repeat;
        }
        .nav{
            width:160px;
            height:205px;
            position:fixed;
            left:0px;
            top:50%;
            margin-top:-103px ;
            font-family: "微软雅黑";
        }

        .nav-li{
            width:160px;
            height:auto;
            border-bottom:1px solid #FFF;
            background:#333;
            text-align:center;
            line-height:40px;
            color:#fff;
            font-size:16px;
            cursor: pointer;  /*当鼠标移动上去，会出现一个手的形状*/
        }
        .tit{
            width:160px;
            height:40px;
        }
        .nav-li ul{
            width:160px;
            height:auto;
            background: #fff;
            display:none;
        }
        .nav-li:hover ul{
            display:block;
        }
        .nav-li ul li{
            width:160px;
            height:40px;
            border-bottom:1px dashed #ececec;
            text-align:center;
            line-height:40px;
            color:#333;
            position:relative;
        }
        .nav-li ul li:hover .list3{
            display:block;
        }
        .list3{
            width:160px;
            height:auto;
            position:absolute;
            left:160px;
            top:0px;
            display:none;
        }
        .list3-Dome{
            width:160px;
            heigh:40px;
            color:#fff;
            border-bottom:1px dashed #ececec;
            text-align:center;
            line-height:40px;
            background: #666;
        }
    </style>
</head>
<body>>
<div class="page"></div>
  <div class="nav">
      <div class="nav-li">
         <div class="tit">慕课网的标题</div>
          <ul>
              <li>二级栏目
                  <div class="list3">
                  <div class="list3-Dome">三级栏目</div>
                  <div class="list3-Dome">三级栏目</div>
                  <div class="list3-Dome">三级栏目</div>
                  </div>
              </li>
              <li>二级栏目
                  <div class="list3">
                      <div class="list3-Dome">三级栏目</div>
                      <div class="list3-Dome">三级栏目</div>
                      <div class="list3-Dome">三级栏目</div>
                  </div>
              </li>
              <li>二级栏目
                  <div class="list3">
                      <div class="list3-Dome">三级栏目</div>
                      <div class="list3-Dome">三级栏目</div>
                      <div class="list3-Dome">三级栏目</div>
                  </div>
              </li>
          </ul>

      </div>
      <div class="nav-li">
          <div class="tit">慕课网的标题</div>
          <ul>
              <li>二级栏目</li>
              <li>二级栏目</li>
              <li>二级栏目</li>
          </ul>
      </div>
      <div class="nav-li">
          <div class="tit">慕课网的标题</div>
          <ul>
              <li>二级栏目</li>
              <li>二级栏目</li>
              <li>二级栏目</li>
          </ul>
      </div>
      <div class="nav-li">
          <div class="tit">慕课网的标题</div>
          <ul>
              <li>二级栏目</li>
              <li>二级栏目</li>
              <li>二级栏目</li>
          </ul>
      </div>
      <div class="nav-li">
          <div class="tit">慕课网的标题</div>
          <ul>
              <li>二级栏目</li>
              <li>二级栏目</li>
              <li>二级栏目</li>
          </ul>
      </div>
  </div>
</div>
</body>

在这里插入图片描述

css元素的转化：display

inline
元素显示为内联元素
block
元素显示为块级元素
inline-block
行内块元素，元素呈现为inline，但具有block相应属性
none
此元素不会被显示

<style>
        /*
        元素的转化问题
        */
        .par{
            font-size: 0;
        }
        .block{
            display: inline-block;
            width: 200px;
            height: 200px;
            background-color: red;
            font-size: 14px;
        }
        .block1{
            display: inline-block;
            width: 200px;
            height: 200px;
            background-color: black;
            font-size: 14px;
        }
        span{
            display:block;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
<div class="par">
    <div class="block">111</div>
    <div class="block1">1111</div>
</div>

<span>
    我是span
</span>

display的运用

<style type="text/css">
        div,span{background-color:#00aaee;
                  border:1px #666 solid;}
        .one{font-size: 0px;}
       /* div{display:inline; /*将块级元素形式转变为内联元素形式*/
         div{display:inline-block;
             font-size: 16px;
             width:100px;
             height:30px;
             padding:5px;
             margin:10px;}
      /* span{display:block; /*将内联元素形式转变为块级元素形式*/
        /*     width:100px;
             height:30px;
             padding:5px;
             margin:10px;}*/
        span{display:none;}
        a:hover span {display:inline;}
    </style>
</head>
<body>
       <!--块级元素-->
     <!--  <div class="one"> -->
       <div>display属性-div</div>
       <div>display属性-div</div>
       <div>display属性-div</div>
           <div>display属性-div</div>
           <div>display属性-div</div>
           <div>display属性-div</div>
           <div>display属性-div</div>
           <div>display属性-div</div>
           <div>display属性-div</div>
      <!-- </div>  -->
       <hr/>
       <!--内联元素-->
       <span>display属性-span</span><span>display属性-span</span><span>display属性-span</span>
       <hr/>
       <a href="#">指我...<span>和你捉迷藏</span></a>
</body>

在这里插入图片描述

莓莓儿～

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS中的float position display

css中的浮动：float四个参数：float：left; 左浮动float：right; 右浮动float：none; 不浮动float：inherit; 不浮动元素的水平浮动 left right块级元素：元素在浮动之后会脱离文档流要想水平浮动，浮动的子元素的总宽小于父元素的宽注：子元素在浮动之后会导致父元素不能撑开overflow：hidden 超...
复制链接

扫一扫

专栏目录