css中的浮动伪类及定位

最新推荐文章于 2022-05-16 20:44:39 发布

狗啃泥

最新推荐文章于 2022-05-16 20:44:39 发布

阅读量554

点赞数

本文链接：https://blog.csdn.net/weixin_44746630/article/details/89358226

版权

1.元素的水平浮动：
left right both <div>块级元素
当元素浮动时会脱离文档流（不再占有原来的位置）

2.元素要想水平浮动的基本条件：
要浮动的子元素的宽度<=父元素的宽度

3.子元素浮动之后父元素则不能被撑开（因为脱离文档流）

4.想要父元素被撑开两种方法（在不设置高度的情况下）:
a:在父元素中加入overflow：hidden(益处部分被隐藏)

注意：在使用此方法时要注意，如果用于菜单时不能被使用，菜单子集多余的会被隐藏

b:在子元素中加入clear：left/right/both(清除浮动)

 <div style="clear: left;list-style:none"></div>

5.css里面的伪类(前两种常用)
a.鼠标悬停伪类: a:hover
b.鼠标激活伪类: a:active
c.访问过的伪类: a:visited
d:访问之前的伪类: a:link

css定位问题position

相对定位（ relative 相对于原来的位置移动分层《占位置》）
绝对定位（absolute 相对于浏览器的位置移动分层《不占位置》）
固定定位（fix 固定在某一个位置相对于浏览器的位置移动和分层《不占位置主要用于网页中侧栏条》）
元素在定位之后可以用的5个属性：（注意：没有使用定位5个属性失效）
left right top bottom z-index:用于对z轴的分层 0 1 -1

`相对定位绝对对位搭配使用`

如果要将绝对定位不相对于浏览器移动
父级元素用相对定位《relative》可以将子集元素卡在父级边界中《固定定位则不能被卡住》

    <style>
        .box{
          position:relative;

            width: 400px;
            height:400px;
           border: 1px solid red;
            margin: 0 auto;
            background-color: aqua;
        }
        .box1 {
            position: absolute;
            left: 0;
            bottom:0;
            width: 100px;
            height: 100px;
            background-color: blue;
        }
        .box2{
            position: fixed;
            width:20px;
            height:300px;
            right: 0;
            bottom:0;
            background-color: cornflowerblue;
    </style>
</head>
<body>
<div class="box">
<div class="box1">111</div>
<div class="box2">222 </div>
</div>

在这里插入图片描述

元素的转化问题：

块级元素转换为行级元素：display:inline-block;
注意：成为行级块后浏览器会默认给元素之间有大约5px的一个缝隙**
解决方法：给父级元素中 font-size:0;然后单独定义子元素的font-size 显示子元素的内容;
行级元素转化为块级元素：

display：block;

行内元素 inline：指的是书写完成后不会自动换行，并且元素没有宽和高。
块级元素 block：写完后会自动换行，有宽高可以修改。
inline-block：行级块

狗啃泥

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css中的浮动伪类及定位

1.元素的水平浮动：left right both <div>块级元素当元素浮动时会脱离文档流（不再占有原来的位置）2.元素要想水平浮动的基本条件：要浮动的子元素的宽度<=父元素的宽度3.子元素浮动之后父元素则不能被撑开（因为脱离文档流）4.想要父元素被撑开两种方法（在不设置高度的情况下）:a:在父元素中加入overflow：hidden(益处部分被隐藏)...
复制链接

扫一扫