CSS中盒子样式设置及浮动特性

最新推荐文章于 2025-04-08 10:51:11 发布

原创最新推荐文章于 2025-04-08 10:51:11 发布 · 2.5k 阅读

17 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

web前端开发

css

本文详细介绍了CSS中的盒子样式，包括圆角边框border-radius、盒子阴影box-shadow、文字阴影text-shadow以及CSS3的新盒子模型。同时，讨论了浮动的概念、特性，如如何改变元素排列方式，以及如何清除浮动带来的影响，包括使用overflow:hidden和额外标签法。

一、盒子样式

1、圆角边框【border-radius】

在CSS3中我们新增了圆角边框样式，这样我们可以使盒子变为圆角。

语法：border-radius:length

参数值可以为数值或者百分比的形式
如果为正方形，想设置为一个圆，把数值修改为高度或者宽度的一半，或者直接写50%
如果是个矩形，则设置为高度的一般就可以
该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角

2、盒子阴影box-shadow

语法：box-shadow：h-shadow v-shadow blur spread color inset;

属性值	描述
h-shadow	必需。水平阴影的位置，允许负值
v-shadow	必需。垂直阴影的位置，允许负值
blur	可选，模糊距离
spread	可选，阴影的尺寸
color	可选，阴影的颜色
inset	可选将外部阴影设为内部阴影

注意：

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

案例展示：

<!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 type="text/css">
        .box {
            width: 200px;
            height: 200px;
            background-color: pink;
            border-radius: 10px;
            /* 盒子阴影，
            水平阴影往右越大，垂直往下越大 */
        }
        
        .box:hover {
            box-shadow: 0px 10px 28px rgba(158, 153, 153, .5);
        }
        /* 圆形为宽度一半,可用百分比  
        弧矩形为高度一半*/
        
        .circle {
            width: 200px;
            height: 200px;
            background-color: pink;
            border-radius: 50%;
        }
        /* 百分比针对宽度 */
        
        .arc {
            width: 400px;
            height: 200px;
            background-color: blue;
            border-radius: 100px;
        }
        /* 文字阴影 */
        
        h1 {
            text-shadow: 5px 0px 3px grey;
        }
    </style>
</head>

<body>
    <h1>圆角边框</h1>
    <div class="box"></div>
    <h2>圆形</h2>
    <div class="circle"></div>
    <h2>弧形矩形</h2>
    <div class="arc"></div>
</body>

</html>

效果图：

3、文字阴影 text-shadow

语法：text-shadow：h-shadow v-shadow blur color；

属性值	描述
h-shadow	必需。水平阴影的位置，允许负值
v-shadow	必需。垂直阴影的位置，允许负值
blur	可选，模糊距离
color	可选，阴影的颜色

4、CSS3新盒子

在CSS3中我们可以通过box-sizing来指定盒子模型，它有两个属性值，content-box、border-box。

盒子计算分为了两种情况：

box-sizing：content-box（盒子大小）：width+padding+border 以前盒子默认大小组成

border-sizing：border-box 盒子大小为width（就是我们设置盒子的宽度大小不会撑大盒子）

二、浮动

1、浮动

网页布局的本质——用css来摆放盒子，把盒子摆放到相应位置。

css提供了三种传统布局方式：

普通流（标准流）
浮动
定位

为什么需要浮动？

有很多的布局效果，标准流没有办法完成，此时我们可以利用浮动完成布局。因为浮动可以改变元素标签默认的排列方式。

浮动最经典的应用：可以让多个块级元素在一行内排列形式。

网页布局技巧：多个块级元素纵向漂亮找标准流，横向排列找浮动。

什么是浮动？

float属性用于创建浮动框，将其移到一边

语法：选择器{float：属性值}

none	元素不浮动（默认值）
left	向左浮动
right	向右浮动

2、浮动的特性

离标准普通流的控制移动到指定位置（俗称脱标）
浮动的盒子不在保留原先的位置
如果多个盒子都设置了浮动，那它们会按照属性值在一行内显示并且顶端对齐排列。
浮动元素会具有行内块元素特性。
任何元素都可以浮动，不管原先是什么模式的元素，添加浮动后都会具有行内块元素相似的特性，可设置宽高。
如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的宽度会根据内容来决定。
浮动的盒子中间是没有缝隙的，是紧挨着一块的。
浮动元素不会盖住文字，文字会自动环绕在浮动元素周围（一般利用浮动做文字环绕效果）
浮动不能使用标注盒子居中（margin ：0 auto）。
浮动元素经常和标准父级搭配使用
为了约束浮动元素位置，我们网页布局一般采用先用标准的父元素排列上下位置，之后内部子元素采取浮动排列左右位置。

注意：一个盒子里面有多个子盒子时，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，一防止其他问题。浮动的盒子只会影响盒子后面的标准流不会影响前面的标准流。

3、清除浮动

1、父级添加overflow：hidden属性

2、额外标签也称为隔墙法。

在浮动元素末尾添加一个空的标签。例如<div style="clear:both"></div>,或者其他标签。

优点：通俗易懂，书写方便

缺点：添加许多无意义的标签，结构化较差

注意：要求这个新的空标签必须是块级元素。

案列展示：

<!DOCTYPE html>
<html>

<head>
    <title>表格作业</title>
    <!-- <script>
        //输入
        var name = prompt("请输入您的姓名：");
        //alert('请输入姓名：');
        //端口输出，用户看不见
        console.log(name);
    </script> -->
    <style type="text/css">
        .box {
            width: 500px;
            height: 300px;
            background-color: aqua;
        }
        
        .box .b1 {
            width: 100px;
            height: 100px;
            float: left;
            background-color: pink;
        }
        
        .box .b2 {
            width: 150px;
            height: 150px;
            background-color: blue;
            float: left;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="b1"></div>
        <div class="b2"></div>
    </div>
</body>

</html>