CSS盒子模型，使用position、float、display

最新推荐文章于 2023-04-19 17:26:32 发布

Matcha_ice_cream

最新推荐文章于 2023-04-19 17:26:32 发布

阅读量280

点赞数

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

本文链接：https://blog.csdn.net/Matcha_ice_cream/article/details/117046014

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

CSS盒子模型，使用position定位、float定位、使用display设计悬浮菜单

（1）使用position定位
（2）使用float定位
（3）用display设计悬浮菜单

（1）使用position定位

position定位常用的有四种：
1、absolute ：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
2、fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。
3、relative：生成相对定位的元素，相对于其正常位置进行定位。
4、static：默认值，没有定位，元素出现在正常的流中
5、inherit ：规定应该从父元素继承 position 属性的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>精确定位</title>
    <style>
        div {
            height: 400px;
            width: 1135px;
            background-color: gray;
        }
        .one {
            position: relative;
            top: 125px;
            left: 25px;

        }
        .two {
            position: relative;
            top: 75px;
            left: 50px;
        }
        .three {
            position: relative;
            top: 25px;
            left: 75px;
        }
        .one,
        .two,
        .three {
            display: inline-block;
            width: 340px;
            height: 250px;
        }
    </style>
</head>
<body>
    <div>
        <div class="one"><img src="../images/6.jpg" alt="耶啵" title="耶啵"></div>
        <div class="two"><img src="../images/6.jpg" alt="耶啵" title="耶啵"></div>
        <div class="three"><img src="../images/6.jpg" alt="耶啵" title="耶啵"></div>
    </div>
</body>
</html>

效果图：
在这里插入图片描述

（2）使用float定位

float定位常用的有三种：
1、left：元素向左浮动。
2、right：元素向右浮动。
3、none：默认值。元素不浮动，并会显示在其在文本中出现的位置。
4、inherit ：规定应该从父元素继承 float 属性的值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动效果</title>
    <style>
        div {
            height: 330px;
            width: 1280px;
            background-color: gray;
        }
        .one,
        .two,
        .three,
        .four {
            float: left;
            height: 320px;
            width: 320px;
        }
    </style>
</head>
<body>
    <div>
        <div class="one"><img src="../images/11.jpg" alt="耶啵" title="耶啵"></div>
        <div class="two"><img src="../images/12.jpg" alt="耶啵" title="耶啵"></div>
        <div class="three"><img src="../images/13.jpg" alt="耶啵" title="耶啵"></div>
        <div class="four"><img src="../images/14.jpg" alt="耶啵" title="耶啵"></div>
    </div>
</body>
</html>

效果图：
在这里插入图片描述

（3）用display设计悬浮菜单

display常用取值有三种：
1、inline：默认。此元素会被显示为内联元素（行内元素），元素前后没有换行符。
2、block：此元素将显示为块级元素，此元素前后会带有换行符。
3、inline-block：行内块元素。同时具有块元素和行内元素的特点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>隐藏选项卡</title>
    <style>
        li {
            list-style: none;
            border:1px groove;
            position: relative;
            margin: 0;
            padding: 0;
            width: 185px;
        }
        #nav ul{
            display: none;
            margin: 0;
            padding: 0;
            width: 185px;
            position: absolute;
            top: 20px;
            left: 0;
        }
        /*下拉*/
        #nav li:hover >ul {
            display: block;
        }
    </style>
</head>
<body>
    <ul id="nav">
        <li>选项表
        <ul>
            <li>项目一</li>
            <li>项目二</li>
        </li>
    </ul>    
</body>
</html>

效果图：
在这里插入图片描述

在这里插入图片描述

Matcha_ice_cream

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS盒子模型，使用position、float、display

CSS盒子模型，使用position定位、float定位、使用display设计悬浮菜单（1）使用position定位（2）使用float定位（3）用display设计悬浮菜单（1）使用position定位position定位常用的有四种：1、absolute ：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。2、fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。3、relative：生成相对定位的元素，相对于其正常位置进行定位。4、static：默认值，没有定
复制链接

扫一扫