DAY 6 | 自学前端第六天

pangpangcm

已于 2022-04-24 10:23:21 修改

阅读量401

点赞数 1

分类专栏：前端自学笔记文章标签： css

于 2022-03-31 21:17:53 首次发布

本文链接：https://blog.csdn.net/weixin_39108774/article/details/123872083

版权

本文介绍了自学前端第六天的学习内容，包括CSS的圆角边框、盒子阴影、文字阴影和浮动。详细讲解了浮动布局的工作原理，如元素脱离标准流、一行内显示、行内块元素特性等，并探讨了浮动布局的注意事项和清除浮动的方法，如额外标签法、overflow属性及伪元素法。

摘要由CSDN通过智能技术生成

今天学习圆角边框、盒子阴影、文字阴影、CSS浮动。

圆角边框

1 参数值可以用 px 也可以用 %

 border-radius: 10px;

 <title>圆角边框</title>
    <style>
        div {
            width: 300px;
            height: 150px;
            background-color: pink;
            /* radius 是半径的意思，半径越大，弧度越大 */
            border-radius: 10px;
        }
    </style>
</head>

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

2 border-radius: 50%;可以让盒子变成圆形或椭圆

 border-radius: 50%;

3 border-radius: 50px; 设置为盒子高度的一半，变成圆角矩形

.yuanju {
            width: 300px;
            height: 100px;
            background-color: pink;
            /* 圆角矩形设置为高度的一半 */
            border-radius: 50px;
        }

3 border-radius:10px 6px 5px 10px; 顺时针左上，右上，右下，左下

 .shunshizhen {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 左上——右上——右下——左下 */
            border-radius: 10px 40px 5px 60px;

            /* 左上对角线10px，另外40px */
            /* border-radius: 10px 40px; */

            /* 分开写，格式按下面 */
            /* border-top-left-radius: 80px;
            border-top-right-radius: 60px;
            border-bottom-left-radius: 30px;
            border-bottom-right-radius: 50px; */
        }

盒子阴影

  box-shadow: 10px 10px 10px 10px red;

水平——垂直——模糊——模糊大小——模糊颜色——外部阴影还是内部。

注意：

默认外阴影（outset），但是不可以写这个单词，否则阴影无效；
盒子阴影不占用空间，不会影响其他盒子排列。

<title>盒子阴影</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
            box-shadow: 20px 10px 10px 10px rgba(0, 0, 0, .3);

            /* 内阴影 */
            /* box-shadow: 20px 10px 10px 10px rgba(0, 0, 0, .3) inset; */

            /* 可以只写两个，水平和垂直阴影 */
            /* box-shadow: 20px 10px; */
        }
    </style>
</head>

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

div:hover 原先盒子没有影子，当鼠标经过，就添加阴影效果：

 div:hover {
            box-shadow: 20px 10px 10px 10px rgba(0, 0, 0, .3);
        }

文字阴影

 text-shadow: 5px 5px 3px black;

水平——垂直——模糊程度——模糊颜色

  <title>文字阴影</title>
    <style>
        p {
            font-size: 20px;
            color: green;
            font-weight: 700;
            text-shadow: 5px 5px 3px black;
        }
    </style>
</head>

<body>
    <p>你是阴影，我是火影</p>
</body>

CSS浮动

浮动

1 传统网页布局的三种方式：普通流（标准流）、浮动、定位。实际开发一个页面包含了这三种布局方式。

2 标准流：标签按照规定的默认方式排列。最基本的网页布局方式。块元素（div、hr、h、p、ul、ol、li、form、table）独占一行，从上到下；行内元素(span、a、i、em、strong)从左到右排列，碰到父元素边缘自动换行。

3 为什么需要浮动：很多布局方式，标准流无法实现，此时可以利用浮动完成布局，因为浮动可以改变元素标签默认的排列方式。典型应用：多个块级元素一行排列显示。网页布局准则：多个块级元素纵向排列标准流，多个块状元素横向排列找浮动。

 <title>浮动-行内块元素相邻缝隙</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: green;
            /* 相邻行内块之间有空隙 */
            /* display: inline-block; */
            float: left;
        }
    </style>
</head>

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