前端学习day03--盒子模型

王壮_

已于 2023-06-25 21:23:51 修改

阅读量54

点赞数

分类专栏：前端文章标签：前端学习 css css3

于 2023-06-25 21:23:08 首次发布

本文链接：https://blog.csdn.net/qq_50833617/article/details/131386200

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.盒子

<!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>盒子</title>
    <style>
        div{
              /* box-sizing: border-box;不撑大盒子 */
            width: 200px;
            height: 200px;
            background-color: blueviolet;
            border-top: 4px dotted #000;
            /* 上，右，下，左 */
            padding: 10px 20px 30px 40px;
            /* 上，左右，下 */
            /* padding: 10px 20px 30px; */
            /* 上下，左右 */
            /* padding: 10px 20px; */
            /* 版心居中 */
            margin: 20px auto;
        }
        *{
            margin: 0;
            padding: 0;
        }
        /* 元素溢出--- overflow:hidden  溢出隐藏。overflow:scroll  无论是否溢出都显示滚动条。overflow:auto  溢出时显示滚动条*/
    </style>
</head>
<body>
    <div>1</div>
</body>
</html>

2.盒子内外边距问题和圆角阴影

<!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>
        /* CSS书写顺序  盒子属性   文字样式   圆角 阴影等修饰属性 */
        div{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        /* 外边距合并--取最大值*/
        /* 解决--给其中一个设置margin */
        .one{
            margin: 60px;
            /* 圆角  左上角顺时针，没有取值的角与对角相同 */
            border-radius: 20px 30px 20px 10px;
        }
        .two{
            margin: 50px;
            /* 正圆    正方形宽高一半*/
            border-radius: 50%;
            /* 盒子阴影   x轴偏移量（必须写），y轴偏移量（必须写），模糊半径，扩散半径，颜色，内外阴影（默认为外阴影）*/
            box-shadow: 2px 5px 10px 4px rgba(0, 0, 0, 0.5) inset;
        }
        /* 外边距塌陷（坑爹）相互嵌套的块级元素 */
        /* 解决--父级加border；*父级加 overflow:hidden;转为行内块元素；设置浮动 */
        .father{
            width: 300px;
            height: 300px;
            background-color: pink;

        }
        .son{
            width: 100px;
            height: 50px;
            background-color: skyblue;
            margin-top: 50px;
            /* 胶囊形   长方形高度一半 */
            border-radius: 25px;
        }
        /* 行内元素内外边距问题-- 通过内外边距调节行内标签垂直位置不能生效*/
        /* 解决--加行高 */
    </style>
</head>
<body>
    <div class="one">1</div>
    <div class="two">2</div>
    <div class="father">
        <div class="son">son</div>
    </div>
</body>
</html>

3.选择器优先级

（1）!important > 行内 > id > 类 > 标签 > 通配符 > 继承

（2）复合选择器看（行内,id,类,标签）数量，若相同看层叠性

4.案例_列表

<!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>列表</title>
    <style>
        /* 从内到外：先宽高，放内容，调节内容位置，控制文字细节 */
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .new{
            width: 300px;
            height: 290px;
            border: 1px solid #ccc;
            margin: 100px auto;
        }
        ol{
            color: red;
            font-size: 12px;
            font-weight: 700;
            list-style-position: inside;
        }
      
        .new .hd{
            height: 34px;
            background-color: #eee;
            border: 1px solid #dbdee1;
            border-left: 0;
            color: #666;
            font-size: 18px;
        }
        .new .hd a{
            display: block;
            border-top: 3px solid red;
            border-right: 1px solid #dbdee1;
            margin-top: -1px;

            width: 48px;
            height: 34px;
            background-color: #fff;
            color: #333;
            line-height: 34px;
            text-align: center;
            font-size: 14px;    
            text-decoration: none;
        }
        .new .bd{
            padding: 5px;
        }
        .new li{
            height: 50px;
            border-bottom: 1px dotted #ccc;
            padding-left: 20px;
            line-height: 50px;
        }
        .new .bd li a{
            color: #666;
            font-size: 12px;
            text-align: center;
            text-decoration: none;
        }
        .new .bd li a:hover{
            color: red;
        }
    </style>
</head>
<body>
    <div class="new">
        <div class="hd"><a href="#">热歌</a></div>
        <div class="bd">
            <ol>
            <li><a href="#">稻香</a></li>
            <li><a href="#">江南</a></li>
            <li><a href="C:\Users\22876\Desktop\code\HTML\day01\案例_音乐推荐.html">画</a></li>
            <li><a href="#">消愁</a></li>
            <li><a href="#">天黑黑</a></li>
            </ol>
        </div>
    </div>
</body>
</html>

5.案例_导航

<!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>
        .box{
            height: 40px;
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
            /* box-sizing: border-box;不撑大盒子 */
        }
        .box a{
            padding: 0px 16px;
            height: 40px;
            display: inline-block;
            color:#4c4c4c;
            text-align: center;
            text-decoration: none;
            line-height: 40px;
           
        }
        a:hover{
            background-color: #edeef0;
            color: #ff8500;
        }

    </style>
</head>
<body>
    <div class="box">
        <a href="#">新浪导航</a><a href="#">新浪导航</a><a href="#">新浪导航</a><a href="#">新浪导航</a>
    </div>
</body>
</html>