盒子模型及浮动

最新推荐文章于 2022-10-30 17:12:24 发布

x1shadouhui

最新推荐文章于 2022-10-30 17:12:24 发布

阅读量102

点赞数

本文链接：https://blog.csdn.net/x1shadoubuhui/article/details/112674772

版权

本文介绍了如何运用border-radius控制盒子的圆角效果，box-shadow实现立体阴影，以及float属性实现浮动布局，展示了如何通过实例演示这些前端布局技术。浮动布局在多元素横向排列中的应用和注意事项也做了详细讲解。

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

盒子形状及阴影

盒子形状：border-radius;
盒子阴影：box-shadow;
文字阴影：text-shadow;

<!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>
        .juxing{
            width: 200px;
            height: 255px;
            background-color: rgb(255, 0, 0);
            border-radius: 10px 20px 30px 40px;
        }
        .yuan{
            width: 200px;
            height: 200px;
            background-color:chartreuse;
            border-radius: 50%;  
        }
        .yinying{
            width: 300px;
            height: 300px;
            background-color:chartreuse;
            border-radius: 50%;
            box-shadow:100px 15px 22px rgba(124, 102, 102, 0.3);
        }
        .text{
            font-size: 50px;color:red;
            text-shadow:22px 10px rgba(124, 102, 102, 0.5);
        }
    </style>
</head>
<body>
     <div class="juxing"></div>
     <div class="yuan"></div>
     <div class="yinying"></div>
     <div class="text">效果图</div>
</body>
</html>

效果图
在这里插入图片描述

浮动

有很多的布局效果，标准流没有办法完成，此时就可以利用浮动布局。浮动可以让多个块元素一行排列显示。（网页布局第一准则：多个块级元素纵向排列找标准流，多个元素横向排列找浮动）

float属性用于创建一个浮动框，将移动到一边。
语法：选择器{float：属性值}
属性值：none、left、right

浮动特性一

浮动的元素会脱离标准流(脱标)。
浮动的元素会一行内显示并且元素顶部对齐的。
浮动的元素会具有行内块元素的特性。

浮动特性二

如果多个盒子都设置了浮动，则他们会按照属性值一行内显示并且顶端对齐。

注：浮动的元素是相互贴靠在一起的(不会有缝隙),如果说父级宽度装不下这些浮动的盒子，多出的盒子就会另起一段并且对齐。

浮动特性三

浮动的元素会具有行内块元素的特性。
任何元素都可以浮动，不管之前是什么模式的元素，添加了浮动之后具有行内块元素的特性。
如果块盒子没有设置宽度，默认宽度和父级一样宽的，但是添加了浮动之后，它的大小根据内容决定。
浮动的盒子中间是没有间隙的。

住：为了约束浮动元素的位置，我们一般布局的先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置。（第一准则)

<!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>
      .box {
        width: 1226px;
        height: 614px;
        background-color: pink;
        margin: 0 auto;
      }
      .left {
        float: left;
        width: 234px;
        height: 614px;
        background-color: purple;
      }
      .right {
        float: left;
        width: 992px;
        height: 614px;
        background-color: skyblue;
      }
      .right > div {
        float: left;
        width: 234px;
        height: 300px;
        background-color: pink;
        margin-left: 14px;
        margin-bottom: 14px;
      }
    </style>
  </head>
  <body>
    <div class="box">
        <div class="left">left</div>
            <div class="right">
                <div>1</div>
                <div>2</div>
                <div>3</div>
                <div>4</div>
                <div>5</div>
                <div>6</div>
                <div>7</div>
                <div>8</div>
            </div>
    </div>
  </body>
</html>

效果图
在这里插入图片描述