CSS学习笔记

标签：color 笔记 height 学习 width background border CSS 150px

一、盒子模型
1.简介
盒子模型是网页布局的基础，将页面中所有元素都看作是一个盒子，盒子都包含以下几个属性：width 宽度
height 高度
border 边框
padding 内边距
margin 外边距
2.盒子模型
2.1 border
表示盒子的边框

分为四个方向：

上top、右right、下bottom、左left
border-top、border-right、border-bottom、border-left

2.2 padding
表示盒子的内边距，即内容与边框之间的距离

2.3 margin
表示盒子的外边距，即盒子与盒子之间的距离

二、外边距的合并

也称为外边距的折叠，指的是两个块级元素垂直外边距相遇时，它们将合并为一个外边距，合并后的外边距值为其中较大的那个外边距值

两种情况：1.当一个元素出现在另一个元素上面时，第一个元素的下边距与第二元素的上边距会发生合并2.当一个元素包含在另一个元素中时，并且没有内边距或边框把外边距分隔开时，两个元素的上外边距会发生合并
外边距的合并的好处，让排版在视觉上显得更美观

<!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>
        /* .box1 {
            width: 200px;
            height: 200px;
            background-color: purple;
            margin-bottom: 20px;
        }
        
        .box2 {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            margin-top: 10px;
        } */
        
        .bigbox {
            width: 500px;
            height: 500px;
            background-color: rgb(255, 94, 150);
            border: 1px solid rgba(89, 255, 0, 0);
        }
        
        .smallbox {
            width: 100px;
            height: 100px;
            background-color: #fff568;
            margin-top: 150px;
        }
    </style>
</head>

<body>
    <!-- <div class="box1"></div>
    <div class="box2"></div> -->
    <div class="bigbox">
        <div class="smallbox"></div>
    </div>
</body>

</html>

三、盒子阴影

<!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: 150px;
            height: 150px;
            border: 1px solid red;
            margin: 150px auto;
            box-shadow: 5px 5px 1px 5px blue inset;
        }
    </style>
</head>

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

</html>

四、浮动属性
通过float属性来实现元素的浮动，可以让块级元素脱离常规的文档流，向左或向右移动，在同一行显示，如果一行显示不下，则会换行显示

常用取值：

left左浮动
right右浮动
none不浮动，默认值
设置float属性后，元素会浮在页面上层，此时父容器无法计算自己尺寸，如果我们还想显示父容器通常会在末尾添加一个清除了float属性的空的div来解决。

<!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: 800px;
            margin: 0 auto;
        }
        
        .obox {
            width: 190px;
            height: 400px;
            border: 1px solid red;
            text-align: center;
            line-height: 100px;
            float: right;
            /* 浮动   元素的对齐方式  左 右 */
            /* display: inline-block;
            margin-left: -2px; */
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="obox">1</div>
        <div class="obox">2</div>
        <div class="obox">3</div>
        <div class="obox">4</div>
        <div class="obox">5</div>
        <div class="obox">5</div>
        <div class="obox">5</div>
        <div class="obox">5</div>
        <div class="obox">5</div>
        <div class="obox">5</div>
        <div class="obox">5</div>
        <div class="obox">5</div>
        <div class="obox">5</div>
        <div class="obox">5</div>
        <div class="obox">5</div>
        <div class="obox">5</div>
        <div class="obox">5</div>
        <div class="obox">5</div>
        <div class="obox">5</div>
        <div class="obox">5</div>
        <div class="obox">5</div>
        <div class="obox">5</div>
        <div class="obox">5</div>
        <div class="obox">5</div>
        <div class="obox">5</div>
        <div class="obox">5</div>
        <div class="obox">5</div>
        <div class="obox">5</div>
        <div class="obox">5</div>
        <div class="obox">5</div>
        <div class="obox">5</div>
        <div class="obox">5</div>
        <div class="obox">5</div>
        <div class="obox">5</div>
        <div class="obox">5</div>
        <div class="obox">5</div>
        <div class="obox">5</div>
        <div class="obox">5</div>
        <div class="obox">5</div>
        <div class="obox">5</div>
        <div class="obox">5</div>
        <div class="obox">5</div>
        <div class="obox">5</div>
        <div class="obox">5</div>
        <div class="obox">5</div>
        <div class="obox">5</div>
        <div class="obox">5</div>
        <div class="obox">5</div>
        <div class="obox">5</div>
        <div class="obox">5</div>
        <div class="obox">5</div>
        <div class="obox">5</div>
        <div class="obox">5</div>
        <div class="obox">5</div>
        <div class="obox">5</div>
        <div class="obox">5</div>
        <div class="obox">5</div>
        <div class="obox">5</div>
        <div class="obox">5</div>
        <div class="obox">5</div>
        <div class="obox">5</div>
        <div class="obox">5</div>
        <div class="obox">5</div>
        <div class="obox">5</div>
        <div class="obox">5</div>
        <div class="obox">5</div>
        <div class="obox">5</div>
        <div class="obox">5</div>
        <div class="obox">5</div>
        <div class="obox">5</div>
        <div class="obox">5</div>
        <div class="obox">5</div>
        <div class="obox">5</div>
        <div class="obox">5</div>
        <div class="obox">5</div>
        <div class="obox">5</div>
        <div class="obox">5</div>
        <div class="obox">5</div>


    </div>
</body>

</html>

浮动的影响

<!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>
        .bigbox {
            width: 800px;
            height: 150px;
            background-color: hsl(0, 100%, 62%);
            /* overflow: hidden; */
        }
        
        .smallbox1 {
            width: 150px;
            height: 150px;
            background-color: #fafa17;
            float: left;
        }
        
        .smallbox2 {
            width: 150px;
            height: 150px;
            background-color: #17fa22;
            float: right;
        }
        
        .bigbox2 {
            width: 800px;
            height: 800px;
            background-color: #0f33ff;
        }
    </style>
</head>

<body>
    <div class="bigbox">
        <div class="smallbox1"></div>
        <div class="smallbox2"></div>
    </div>
    <div class="bigbox2"></div>
</body>

</html>

标签：color,笔记,height,学习,width,background,border,CSS,150px
From： https://blog.csdn.net/m0_69397301/article/details/139778719

相关文章

赞助商

阅读排行