Html 基础 三

HTML 2020-12-12

浮动

浮动最直接的价值就在于他可以多个div并排在同一行。

当然也可以设置盒子的样式为 inline-block， 但是带来的问题也随之而来，首先就是盒子之间右空隙，其次，盒子会依次从左到右并排，虽然可以通过padding控制他们之间的间距，但是变数太大了

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

常见的布局

如下图，每一个图片都在一个div中，为了让他们可以并排在一行上，肯定就得添加浮动，同时浮动会影响其他标准流，所在在这些标记浮动的元素的最外层添加一个div，清除这些盒子的浮动。同时给最外层的盒子添加高，让他占位。这样再往下的标准流就不会再受到影响了。

尝试浮动

让多个div并排在同一列，给下面的两个div同时添加浮动即刻

<!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>

效果：

布局和版心

示例1：

<!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>

效果图：

示例2:

<!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>

注意点，比如main部分，父盒子的宽度是1190px， 里面的两个子盒子发生浮动实现了并排，这时如果子盒子的宽度相加大于父盒子的宽度，最终的效果就是右边的子盒子会被挤下去。 为了防止他们不被挤下去，就得修改相应的子盒子的宽度

此外，像这种布局方式，我们用鼠标推动着浏览器往左滑动，盒子是不会被挤下去的。

效果：

清除浮动

清除浮动的本质： 就是为了解决父级元素因为子集元素浮动后而导致高度为0的情况。

看下面的例子：

<!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>

因为我们并没有给main盒子设置高度，导致让它里面的子盒子发生发动脱离文档流后，没有人撑开它，他就重新变成了一条线

前面的解决方式是我们给main盒子设置一个固定的高度，但是很多情况下，我们的需求是根据子盒子的本身的高度去撑开盒子，而不是把高度写死，于是我们可以使用清除浮动。

清除浮动实现的最终效果就是：父盒子中子盒子并排，父盒子的高度 = 最高的子盒子的高度

  • 清除浮动方式1：

w3c推荐的方式，在存在浮动的元素后面添加一个新的空标签，如下：

<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：

第二种方式清除浮动，可以通过给父盒子添加属性 overflow

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

元素的定位

元素的定位属性主要是包含两部分： 定位模式 + 边偏移

边偏移

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

四种定位模式

css中，通过position属性定义元素的定位模式，基本的语法如下

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

网页中的元素默认的都是静态定位，比如一个div默认会自己独占一行，多个span可以并排在一行。

静态定位的唯一的作用就是取消其他的定位模式。

相对定位

相对定位：相对于自己当前的位置，再定位到新的位置上。

看下面的示例：

<!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>

最终的效果就是会相对于自己的位置重新定位，在top方向上增加100px

在看下面的示例： 可以看到，使用相对定位，元素虽然会移动，但是元素的原来在标准流中所占的位置不会发生改变。

<!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>

效果图：

给水蓝色的盒子设置定位方式：相对定位，他相对于自己的父元素进行定位，在上面的例子中，就是相对于body，也就是当前的屏幕进行定位。

再看下面这个例子：

<!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>

效果图：

通过这个例子看到，当给子盒子添加相对定位时，如果他的直接父盒子并没有添加任何定位，这时子盒子实际上是会相对于body进行定位。

子绝父相

子绝父相说的是啥意思呢？意思就是说，如果我们想实现子元素相对于父元素进行定位时，子元素的定位方式需要设置成绝对定位，父元素的定位方式设置成相对定位才ok

还是上面的例子：像下面这样修改css样式：

    <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>

最终实现的效果就是：

加了定位的盒子水平对齐

首先来说，一个盒子只要是添加了定位，盒子就会飘起来，与此同时margin属性也会失效。

那怎么使一个添加了定位的盒子水平对齐呢？ 如下:

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

显示和隐藏

css中与显示和隐藏相关的常见属性有如下几个

display

visiblity

overflow

我们的目的是让其在文档中消失，而不是在源码中将其删除。

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

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

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

通过visibility控制元素的隐藏，原位置将会被保留

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

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

通过overflow控制

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

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

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

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

相关文章

html代码字体颜色做法
HTML代码中要想改变字体颜色，常常需要使用CSS样式表。CSS是...
html代码字体盖住图片
HTML代码如何让字体盖住图片呢？需要使用CSS的position属性及...
html代码字体设置
HTML代码字体设置 在HTML中，我们可以使用标签来设置网页中的...
html代码字体字号
在网页设计中，HTML代码的字体和字号选择是非常重要的一个环...
html代码实现太极图
HTML（Hypertext Markup Language，超文本标记语言）是一种用...
html代码实现外链
外链是指在一个网页中添加一个指向其他网站的链接，用户可以...