CSS样式（第四天导读）-CSDN博客

本文链接：https://blog.csdn.net/weixin_56990019/article/details/138072845

一、其他样式

1：圆角边框

原理：

常用圆角边框的写法：

radius可以设置像素或者百分比

圆形：

外边的盒子一般为正方形

半径设置为宽度和高度的一半即：50%

圆角矩形：

半径设置为高度的一半

设置不同的圆角

设置两个数值时，第一个数值代表左边的对角线，第二个数值代表右边的对角线

2：盒子阴影

blur:影子虚化的程度

spread：阴影的大小

color习惯用法：

rgba(0,0,0,.3)：

透明度为30%

3：文字阴影（了解）

二、浮动

一个网页包括标准流、浮动、定位

浮动的适用场景：

网页布局的准则：

多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动

如果都是左浮动，则第二个浮动框紧挨着第一个浮动框

浮动的特性（非常重要）

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

浮动的盒子飞走后，底下标准流的盒子就会移动到浮动盒子飞走后的位置

即浮动的盒子会压住标准流的盒子

浮动元素一行显示

父级宽度装不下即浏览器宽度变小

浮动元素具有行内块特性

行内元素同理

如果行内元素有了浮动，则不需要转换块级/行内块元素就可以直接给给宽度和高度

行内块元素特性，给多少文字就撑多宽

浮动元素要添加宽度跟高度否则会根据文字内容的大小来显示

浮动元素经常搭配标准流的父元素

通过margin来控制盒子与盒子之间的距离

案例——常见的网页布局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        .nav {
            height: 40px;
            background-color: pink;
        }

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

        .box {
            width: 978px;
            height: 300px;
            background-color: pink;
            margin: 10px auto;

        }

        .box li {
            float: left;
            width: 237px;
            height: 300px;
            background-color: gray;

            margin-right: 10px;
        }

        .box .last {
            margin: 0;
        }

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

<body>
    <div class="nav">nav</div>
    <div class="banner">banner</div>
    <div class="box">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li class="last"></li>
        </ul>
    </div>
    <div class="footer">footer</div>
</body>

</html>