自学前端——第六天

最新推荐文章于 2024-07-25 09:24:40 发布

m0_74758366

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量63

点赞数

分类专栏：自学前端文章标签：前端 html css3 html5 css

本文链接：https://blog.csdn.net/m0_74758366/article/details/128610897

版权

自学前端专栏收录该内容

15 篇文章 1 订阅

订阅专栏

4.1 传统网页布局的三种方式（即盒子如何进行排列的方式）：

4.4.2浮动的元素会在一行内显示并且元素顶部对齐

1.圆角边框

语法：border-radius ：Ypx / Y%；

Y越大，矩形的弧度越大。

可以利用这个显示出一个圆形，只需先设定一个正方形，让Y值等于正方形边长的一半即可；显示出圆角矩形则让Y值等于矩形高度的一半即可，如下：

<!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>Document</title>
    <style>
        .yuanjiao {
            width: 100px;
            height: 200px;
            background-color: red;
            border-radius: 100px;
        }

        .zhengfang {
            width: 200px;
            height: 200px;
            background-color: red;
        }

        .yuanxing {
            width: 200px;
            height: 200px;
            background-color: red;
            /* border-radius: 100px; */
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <div class="yuanjiao"></div>
    <div class="yuanxing"></div>
    <div class="zhengfang"></div>

</body>

</html>

圆角边框的复合写法：

border-radius：Apx Bpx Cpx Dpx；

以上四个像素值依次是左上角、右上角、右下角、左下角。

如果写成border-radius：Apx Bpx；

则表示左上角及其对角线，右上角及其对角线。

或者采用下面这种写法：

2.盒子阴影

图源： 06-盒子阴影_哔哩哔哩_bilibili

h-shadow和v-shadow都是控制阴影的位置的；

blur则是控制影子的虚实，值越大越模糊；

spread控制影子的大小；

一般color不直接用black，而是采用rgba(0,0,0,0.3)的半透明黑色形式；

阴影的内外不写则默认为outset，但是如果写了outset反而无效，因此要么不写，要么写inset改为内阴影。

实际应用——鼠标经过添加阴影：

只需利用链接伪类选择器即可：

3.文字阴影

图源同上

4.浮动

4.1 传统网页布局的三种方式（即盒子如何进行排列的方式）：

普通流、浮动、定位。

普通流（标准流/文档流）：

就是标签按照规定好的默认方式排列，如：

（i）块级元素独占一行，从上到下顺序排列；

（ii）行内元素从左到右顺序排列，碰到父元素边缘自动换行。

以上都是标准流布局，我们前面学习的就是标准流，标准流是最基本的布局方式。

但在我们日常浏览网页的过程中，我们不难发现有一些网页在你滚动页面的时候，有一些小模块始终跟随着页面滚动（如回到顶部按钮），这种效果是没法用标准流来实现的，因此实际开发中，一个页面往往同时包含这三种布局方式。

4.2为什么需要浮动

有很多的布局效果是标准流实现不了的，因此需要引入浮动。浮动可以改变元素标签的默认排列形式，其最典型的应用是：让多个块级元素（如div）在同一行内显示。

网页布局的第一准则：多个块级元素纵向排列找标准流，横向排列找浮动。

4.3 什么是浮动（float）

float属性用于创建浮动框，将其移动到一边，直到左右边缘或者另一个浮动框的边缘。

（图源同上）

4.4 浮动特性

4.4.1浮动元素会脱离标准流（脱标）

1.浮动元素会脱标移动到指定位置；

2.浮动的盒子不再保留原先的位置。

含义：当两个div盒子同时存在，此时给上面的div添加浮动，则上面的div浮起来了，和下面的div不在同一层上，因此下面的div会上移，占据原本上面的div 的位置，从而实现了两个div盒子的叠加。注意：浮动元素不会压字，即下面的div虽然部分被上面的div覆盖住，但是下面的div里的字不会被覆盖，而是围绕浮动元素。

给上面的div添加浮动：

4.4.2浮动的元素会在一行内显示并且元素顶部对齐

如果给多个盒子浮动显示，则他们会显示在同一行中而且元素顶部对齐。

注意：浮动的元素是互相紧贴在一起的，如果父级的宽度装不下所有浮动的盒子，多出的盒子会另起一行对齐。

4.4.3浮动元素会有行内块元素的特性

通俗的解释：将一个元素设置为浮动元素最终的效果就是，让所有浮动的元素可以在同一行内显示（行内元素特点），又能自定义宽和高（块元素特点），同时拥有以上两个特点的不正是我们前面讲的行内块元素吗？

而我们知道，行内块元素还有另一个特点，就是如果没有自定义宽度，则其默认宽度取决于他里面的内容。

因此给一个行内元素设定了浮动，则不需要再将其转化为块元素或者行内块元素就可以自定义其高、宽了。

4.5浮动元素经常和标准流父级搭配使用

为了约束浮动元素位置，网页布局一般采取的策略是：

（图源同上）

4.5.1 小米布局案例

5.常见网页布局

在这里演示第三种布局的基本思路，以下是可能使用的数据。

代码如下：

<!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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        .top {
            height: 50px;
            background-color: grey;
        }

        .banner {
            margin: 10px auto;
            background-color: grey;
            width: 980px;
            height: 150px;
        }

        .box {
            width: 980px;
            height: 300px;
            background-color: grey;
            margin: 0 auto;
            margin-bottom: 10px;
        }

        .box li {
            float: left;
            width: 237px;
            height: 300px;
            margin-right: 10px;
            background-color: blue;
        }

        .box .spe {
            margin-right: 0;
        }

        .footer {
            height: 200px;
            background-color: grey;
        }
    </style>
</head>

<body>
    <div class="top"></div>
    <div class="banner"></div>
    <div class="box">
        <ul>
            <li>111</li>
            <li>222</li>
            <li>333</li>
            <li class="spe">444</li>
        </ul>
    </div>
    <div class="footer"></div>
</body>

</html>

运行：

（图源20-常见的网页布局_哔哩哔哩_bilibili）

6.浮动布局的注意点

（i）浮动和标准流的父盒子搭配；

（ii）一个元素浮动了，理论上同一个父系盒子里的其余兄弟元素也要浮动。

7.浮动覆盖

7.1 前盒浮动，后盒标准

后盒会往前移，然后被前盒覆盖。

7.2 前盒标准，后盒浮动

后盒不会往前移，两盒分别在两行上。

代码：

<!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>Document</title>
    <style>
        .one {
            width: 200px;
            height: 200px;
            background-color: grey;
        }

        .two {
            float: left;
            width: 400px;
            height: 300px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="one">111</div>
    <div class="two">222</div>
</body>

</html>

7.3 前盒浮动，后盒标准，再后盒浮动

后盒往前移，被前盒覆盖，但是再后盒不会上去和前盒并列，而是在前两盒的下一行。

<!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>Document</title>
    <style>
        .one {
            float: left;
            width: 200px;
            height: 200px;
            background-color: grey;
        }

        .two {

            width: 400px;
            height: 300px;
            background-color: blue;
        }

        .three {
            float: left;
            width: 500px;
            height: 400px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="one">111</div>
    <div class="two">222</div>
    <div class="three">333</div>
</body>

</html>

总结：当前面只有浮动盒子时，标准盒子可以上去，被浮动盒子覆盖；当前面存在标准盒子时，其他盒子只能另起一行。

8.清除浮动

8.1 为什么要清除浮动？

（图源同上）

理想中的情况是让子元素撑开父盒子，这样就能实现父盒子高度的自适应。

但如果不给父盒子高度，会不会发生错误呢，以下分两种情况来讨论：

（i）子盒子非浮动

<!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>Document</title>
    <style>
        .box {
            border: 5px solid black;
        }

        .one {
            /* float: left; */
            width: 200px;
            height: 200px;
            background-color: grey;
        }

        .two {
            /* float: left; */
            width: 400px;
            height: 300px;
            background-color: blue;
        }

        .three {
            float: left;
            width: 500px;
            height: 400px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="one">111</div>
        <div class="two">222</div>
        <!-- <div class="three">333</div> -->
    </div>
</body>

</html>