CSS其他元素

最新推荐文章于 2024-07-23 08:49:01 发布

想吃不胖

最新推荐文章于 2024-07-23 08:49:01 发布

阅读量110

点赞数

文章标签： html html5 css

本文链接：https://blog.csdn.net/qq_44719987/article/details/120817449

版权

一、浮动

（一）标准文档流

块级元素：独占一行

h1~h6 p div 列表...

行内元素：不独占一行

span a img strong.....

行内元素：可以被包含在块级元素中，反之，则不可以

（二）display

这个也是一种实现行内元素排列的方式，但是我们很多情况都是用float

<style>
    div{
        width:100px;
        height:100px;
        border:1px solid red;
        display:inline-block;
    }
    span{
         width:100px;
         height:100px;
         border:1px;
         display:inline-block;
    }
</style>

（三）float

左右浮动

div{
    width:10px;
    height:5px;
}
#father{
    border:1px #000 solid;
}
.layer01{
    border:1px #F00 dashed;
    display:inline-block;
    float:right;
}
.layer02{
    border:1px #00F dashed;
    display:inline-block;
    float:right;
}

(四)父级边框塌陷的问题

clear

<!--
clear:right  右侧不允许有浮动元素
clear:left   左侧不允许有浮动元素
clear:both   两侧不允许有浮动元素
clear:none
-->

解决方案：

1、增加父级元素的高度

#father{
        border:1px #000 solid;
        height:800px;
}

2、增加一个空的div标签，清除浮动

<div class="clear"></div>
.clear{
     clear:both;
     margin:0;
     padding:0
}

3、overflow

在父级元素中增加一个 overflow:hidden;

4、父类添加一个伪类：after

#father{
     content:'';
     display:block;
     clear:both;
}

小结：

1、浮动元素后面增加空div

简单，代码中尽量避免空div

2、设置父元素的高度

简单，元素假设有了固定的高度，就会被限制

3、overflow

简单，下拉的一些场景避免使用

4、父类添加一个伪类：after（推荐）

写法稍微复杂一点，但是没有副作用，推荐使用

（五）对比

display: 方向不可以控制

float: 浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷的问题

二、定位

（一）相对定位：position:relative;

相对于原来的位置，进行指定的偏移，相对定位的话，它仍然在标准文档流中。原来的位置会被保留

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
           margin:10px;
           padding:5px;
           font-size:12px;
           line-height:25px;
        }
        #father{
           border:1px solid #666;
        }
        #first{
           background-color:#a13d30;
           border:1px dashed #b27530;
           position:relative;/*相对定位：上下左右*/
           top=-20px;
           left:20px;
        }
        #second{
           background-color:#255099;
           border:1px dashed #255066;
        }
    </style>
</head>
<body>
<div id="father"></div>
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
</body>
</html>

（二）绝对定位

基于xx定位，上下左右~

1.没有父级元素定位的前提下，相对于浏览器定位

2.假设父级元素存在定位，我们通常会相对于父级元素进行偏移

3.在父级元素范围内移动，相对于父级或浏览器的位置，进行指定的偏移，，绝对定位的话，它不在标准文档流中，原来的位置不会被保留。

（三）固定定位fixed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
             height:1000px;
        }
        div:nth-of-type(1){/*绝对定位：相对于浏览器*/
           width:100px;
           height:100px;
           background:red;
           position:absolute;
           right:0;
           bottom:0;
        }
        div:nth-of-type(1){/*fixed,固定定位*/
           width:50px;
           height:50px;
           background:yellow;
           position:fixed;
           right:0;
           bottom:0;
        }
    </style>
</head>
<body>

</body>
</html>

（四）z-index

三、动画

想吃不胖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS其他元素

浮动（一）标准文档流块级元素：独占一行h1~h6 p div 列表...行内元素：不独占一行span a img strong.....行内元素：可以被包含在块级元素中，反之，则不可以（二）display
复制链接

扫一扫