CSS-第四天（B站黑马程序员）

yapple223

已于 2024-03-03 09:06:34 修改

阅读量824

点赞数 17

分类专栏： CSS 文章标签： css 前端 html

于 2024-03-01 17:39:54 首次发布

本文链接：https://blog.csdn.net/m0_64180838/article/details/136400875

版权

CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一、圆角边框

1、圆角边框的写法

<style>
        div {
            width: 300px;
            height: 150px;

            /* 圆角边框样式 */
            /* radius圆的半径：半径越大，弧度越大 */
            border-radius: 10px;
        }
</style>

2、圆角边框的使用

a.圆的做法

<style>
        .circle {
            /* 正方形的盒子 */
            width: 200px;
            height: 200px;

            /* radius设置为高度和宽度的一半 */
            /* border-radius: 100px; */
            /* 更好的写法：百分比，宽度和高度的一半 */
            border-radius: 50%;
        }
</style>

b.圆角矩形的做法

<style>
        .rectangle {
            width: 300px;
            height: 100px;

            /* radius设置为高度的一半 */
            border-radius: 50px;
        }
</style>

3、设置不同的圆角

<style>
        .radius {
            width: 200px;
            height: 200px;

            /* 2个不同的值：(两个对角线)左上和右下，右上和左下 */
            border-radius: 10px 40px;

            /* 3个不同的值：左上、右上和左下、右下 */
            border-radius: 10px 40px 60px;

            /* 4个不同的值：左上、右上、右下、左下 */
            border-radius: 10px 20px 30px 40px;

            /* 单独设置某个角 */
            /* 书写时 上下在前，左右在后 */
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
        }
</style>

二、盒子阴影

box-shadow 有6个值，书写时需要按照顺序。

<style>
        div {
            margin: 100px auto;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        /* 原先盒子没有阴影，鼠标经过出现阴影 */
        div:hover {
            /* box-shadow盒子阴影有6个值 */
            /* 影子颜色采用 rgba透明度 写法 */
            /* outset默认属性，不可以书写；加上inset，表示改成内阴影，书写在最后 */
            /* 盒子阴影不占用空间 */
            box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, .3);
        }
</style>

三、文字阴影

text-shadow 有4个值，书写时需要按照顺序。

<style>
        div {
            font-size: 50px;
            font-weight: 700;
            color: orangered;

            /* 文字阴影4个值 */
            text-shadow: 5px 5px 6px rgba(0, 0, 0, .3);
        }
</style>

四、标准流的概念

所谓标准流，就是标签按照规定好的默认方式排序。块级元素会独占一行，从上到下顺序排列。行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。标准流是最基本的布局方式。实际开发中，一个页面基本都包含了这三种布局方式（标准流、浮动、定位）。

五、浮动

1、为什么需要浮动

有很多布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。因为浮动可以改变元素标签默认的排列方式。浮动最典型的应用：让多个块级元素在一行内显示。

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

2、什么是浮动

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

3、浮动的特性

（1）脱离标准普通流的控制移动到指定位置，俗称脱标。浮动的盒子不再保留原先的位置。

（2）如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列。注意：浮动元素是互相贴靠在一起（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。

（3）浮动元素会具有行内块元素特性。如果块级元素没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定。行内元素同理。

4、浮动元素与父级标准流搭配使用

为了约束浮动元素位置，网页布局一般采取的策略：先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则。

网页布局第二准则：先设置盒子的大小，再设置盒子的位置。

5、浮动注意点

一个元素浮动，理论上其余的兄弟也要浮动。浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流。

六、常见的网页布局

（1）

（2）

相应的代码如下：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常见的网页布局</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

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

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

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

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

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

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

<body>
    <div class="top">top</div>
    <div class="banner">banner</div>
    <div class="box">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li class="last">4</li>
        </ul>
    </div>
    <div class="footer">footer</div>
</body>

</html>

七、清除浮动

1、为什么要清除浮动

父盒子很多情况下不方便给高度，但是盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子。

2、清除浮动的本质

清除浮动的本质就是清除浮动元素脱离标准流造成的影响。清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了。

3、清除浮动语法

clear属性

4、清除浮动的4种方法

清除浮动的策略是闭合浮动。

a.额外标签法/隔墙法

<style>
        /* 隔墙法/额外标签法：在最后一个浮动的子元素后面添加一个额外标签，添加清除浮动样式 */
        /* 缺点：添加许多无意义的标签，结构化较差 */
        /* 注意，新添加的标签必须是块级标签，不能是行内元素 */
        /* 不常用 */
        .clear {
            clear: both;
        }
</style>

<body>
    <div class="box">
        <div class="damao">大猫</div>
        <div class="ermao">二猫</div>

        /* 最后一个浮动的子元素后面添加额外标签 */
        <div class="clear"></div>
    </div>
    <div class="footer"></div>
</body>

b.父级添加overflow属性

<style>
        .box {
            /* 父级标签添加overflow：hidden */
            /* 优点：简洁 */
            /* 缺点：无法显示溢出部分 */
            overflow: hidden;

            width: 800px;
            border: 1px solid blue;
            margin: 10px auto 0;
        }
</style>

c.父级添加after伪元素

<style>
        /* 父级元素调用 clearfix类 即可 */
        .clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .clearfix {
            /* IE6、7专有 */
            zoom: 1;
        }
</style>

d.父级添加双伪元素

<style>
        /* 父级元素调用 clearfix类 即可 */
        .clearfix:before,
        .clearfix:after {
            content: "";
            display: table;
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            zoom: 1;
        }
</style>