Html 基础三

前端开发作者： 2024-08-23 10:05:01

### 浮动浮动最直接的价值就在于他可以多个div并排在同一行。当然也可以设置盒子的样式为 inline-block，但是带来的问题也随之而来，首先就是盒子之间右空隙，其次，盒子会依次从左到右

浮动

浮动会让盒子脱离标准流，盒子不再占用位置。
浮动的盒子总是会找到离他最近的父元素进行对齐，但是不会超出内边距的范围。
浮动的盒子不能越过父盒子的padding值

常见的布局

尝试浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .dv1 {
            width: 200px;
            height: 200px;
            background-color: pink;
            float: left;
        }
        .dv2 {
            width: 300px;
            height: 300px;
            background-color: aqua;
            float: left;
        }
    </style>
</head>
<body>
<div class="dv1"></div>
<div class="dv2"></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .dv1 {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .dv2 {
            width: 300px;
            height: 300px;
            background-color: aqua;
            float: left;
        }
    </style>
</head>
<body>
<div class="dv1"></div>
<div class="dv2"></div>
</body>
</html>

浮动隐藏的模式转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .dv1 {
            background-color: aqua;
            float: left;
        }
    </style>
</head>
<body>
<div class="dv1">123</div>
</body>
</html>

布局和版心

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .top,.footer,.main,.banner{
            background-color: #eee;
            width: 1190px;
        }
        .top {
            height: 80px;
            margin: 0 auto 5px;
        }
        .banner {
            height: 200px;
            margin: 0 auto 5px;
        }
        .main {
              height: 600px;
              margin: 0 auto 5px;
          }
        .footer {
            height: 80px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div class="top">123</div>
<div class="banner">123</div>
<div class="main">123</div>
<div class="footer">123</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .top,.banner{
            background-color: #eee;
            width: 1190px;
        }
        .top {
            height: 80px;
            margin: 0 auto 5px;
        }
        .banner {
            height: 200px;
            margin: 0 auto 5px;
        }
        .main {
              height: 600px;
              margin: 0 auto 5px;
        }
        .left {
            background-color: pink;
            height: 600px;
            width: 300px;
            float: left;
        }
        .right {
            background-color: aqua;
            height: 600px;
            width: 890px;
            float: right;
        }
        .footer {
            height: 80px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div class="top">123</div>
<div class="banner">123</div>
<div class="main">
        <div class="left"></div>
        <div class="right"></div>
</div>
<div class="footer">123</div>
</body>
</html>

清除浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .main {
            width: 1190px;
            background-color: #eee;
            margin: 0 auto 5px;
        }
        .left {
            background-color: pink;
            height: 600px;
            width: 300px;
            float: left;
        }
        .right {
            background-color: aqua;
            height: 600px;
            width: 890px;
            float: right;
        }
        .footer {
            width: 100%;
            height: 80px;
            margin: 0 auto;
            background-color: #cccccc;
        }
    </style>
</head>
<body>
<nav>

</nav>
<div class="main">
    <div class="left"></div>
    <div class="right"></div>
</div>
<div class="footer">123</div>
</body>
</html>

清除浮动方式1：

<body>
<div class="main">
    <div class="left"></div>
    <div class="right"></div>
</div>
<!-就像下面这样-->
<div style="clear: both;"></div>
<div class="footer">123</div>
</body>

清除浮动方式2：

.main {
    width: 1190px;
    background-color: #eee;
    margin: 0 auto 5px;
    /*同样可以实现清除浮动*/
    overflow: hidden;
}

元素的定位

边偏移

边偏移属性	描述
top	顶部偏移量：定义元素相对于其父元素上边距的距离
bottom	底部偏移量：定义元素相对于其父元素下边距的距离
left	左侧偏移量
right	右侧偏移量

四种定位模式

值	描述
static	默认值，自动定位。
relative	相对定位，相对于其文档流的位置进行定位。
absolute	绝对定位，相对于其上一个元素的父元素进行定位。
fixed	固定定位，相对于浏览器的窗口进行定位。

静态定位

相对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .dv {
            margin: 100px;
            background-color: aqua;
            width: 100px;
            height: 100px;
            position: relative;
            top: 100px;
        }
    </style>
</head>
<body>
<div class="dv"></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .dv1 {
            background-color: aqua;
            width: 100px;
            height: 100px;
            position: relative;
            top: 50px;
            left: 50px;
        }
        .dv2 {
            background-color: skyblue;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
<div class="dv1"></div>
<div class="dv2"></div>
</body>
</html>

绝对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .dv1 {
            background-color: aqua;
            width: 100px;
            height: 100px;
            position: absolute;
        }
        .dv2 {
            background-color: skyblue;
            width: 120px;
            height: 120px;
        }
    </style>
</head>
<body>
<div class="dv1"></div>
<div class="dv2"></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .dv1 {
            margin: 50px;
            background-color: aqua;
            width: 100px;
            height: 100px;
        }
        .dv2 {
            background-color: skyblue;
            position: absolute;
            top: 20px;
            left: 20px;
            width: 80px;
            height: 80px;
        }
    </style>
</head>
<body>
<div class="dv1">
    <div class="dv2">

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

子绝父相

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .dv1 {
            margin: 50px;
            background-color: aqua;
            width: 100px;
            height: 100px;
            position: absolute;
        }
        .dv2 {
            background-color: skyblue;
            position: relative;
            top: 10px;
            left: 10px;
            width: 80px;
            height: 80px;
        }
    </style>

加了定位的盒子水平对齐

        .dv1 {
            background-color: aqua;
            width: 100px;
            height: 100px;
            /*无论什么定位都ok*/
            position: absolute;
            /*以左上角为基准，移动到父盒子的百分之五十宽度的位置*/
            left: 50%;
            /*margin值，往左减少50px*/
            margin-left: -50px;
        }

显示和隐藏

通过display隐藏元素后，元素原来的位置不再保留


div {
    /*隐藏之后，不再保留原位置*/
    display: none;
}

div {
    /*将元素转换成块级元素，第二层意思就是显示元素*/
    display: block;
}

div {
    /*对象可见*/
 	visibility: visible;   
}

div {
    /*对象隐藏*/
 	visibility: hidden;   
}

div {
    /*超出的部分依然会显示*/
    overflow: visible;
}

div {
    /*超出的部分隐藏*/
    overflow: hidden;
}

div {
    /*内容超出后，会显示滚动条*/
	overflow： auto；
}

div {
    /*总是显示滚动条*/
	overflow： scroll；
}

原创声明

本站部分文章基于互联网的整理，我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

本文链接：http://www.jiecseo.com/news/show_67184.html