CSS-2:练习

最新推荐文章于 2024-07-12 18:29:20 发布

Zhang_2002_GZ

最新推荐文章于 2024-07-12 18:29:20 发布

阅读量123

点赞数

分类专栏： Web 文章标签： css

本文链接：https://blog.csdn.net/zhang_2002_gz/article/details/120851336

版权

Web 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型--边框</title>
    <style>
        div{
            width: 300px;
            height: 300px;

            /*复合边框*/
            /*border: 1px solid red;*/

           /* !*边框样式*!
            border-style: solid;
            !*边框宽度*!
            border-width: 5px;
            !*边框颜色*!
            border-color: orange;*/
            
            /*左边框 实线*/
            border-left: 2px solid plum;
            /*上边框 虚线*/
            border-top: 4px dashed blueviolet;
            /*右边框 双实线*/
            border-right: 5px double green;
            /*下边框 点线*/
            border-bottom: 8px dotted purple;
        }
    </style>
</head>
<body>
<div>
    我是盒子
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型--内边框</title>
    <style>
        /*内边距不能设置负值，设置会撑大盒子*/
        div{
            width: 100px;
            height: 100px;
            border: 2px solid blueviolet;
            
            /*上内边距*/
            padding-top: 50px;
            /*左内边距*/
            padding-left: 50px;
            /*下内边距*/
            padding-bottom: 50px;
            /*右内边距*/
            padding-right: 50px;
            
            /*当参数值为1个时，上下左右都设置
            当参数值为2个时，第一个为上下，第二个为左右
            当参数值为3个时，第一个是上，第二个是左右，第三个是下
            当参数值是4个时，顺时针方向：上右下左
            五边形等其他，需要单独去写
            padding: 50px;
            padding: 50px 100px;*/
        }
    </style>
</head>
<body>
<div>
    我是盒子
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型--外边距</title>
    <style>
        /*外边距
        1.不会改变盒子本身的大小
        2.外边距能设置为负值，百分比
        3.缺点：外边距过大时，盒子内容会被撑出盒子
        4.左右外边距为两者之和，上下外边距取最大值*/

        div{
            width: 200px;
            height: 200px;
        }
        .div1{
            border: 2px solid red;

            /*上外变局*/
            margin-top: 50px;
            /*左外边距*/
            margin-left: 50px;
            /*下外边距*/
            margin-bottom: 50px;
            /*右外边距*/
            margin-right: 50px;

            /*行内块元素（input,line-block）：
            1.可以识别宽高，设置宽高有效
            2.排列方式从左往右
            3.不会自动换行*/
            display: inline-block;
            
            /*margin: 50px; 复合外边距*/
        }
        .div2{
            border: 5px solid blue;
            display: inline-block;
            /*未注明，默认机械对齐（下外边距对齐）*/
        }
    </style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS浮动</title>
    <link rel="stylesheet" href="css/reset.css">
    <style>
        .box{
            width: 500px;
            height: 500px;
            border: 2px solid red;
        }
        .box-son{
            width: 100px;
            height: 100px;
        }
        .box1{
            background-color: green;
            /*右浮动*/
            /*float: right;*/
            /*左浮动*/
            float: left;
        }
        .box2{
            background-color: blue;
            float: left;
        }
        .box3{
            background-color: plum;
            float: left;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="box-son box1"></div>
    <div class="box-son box2"></div>
    <div class="box-son box3"></div>
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动带来的问题--高度坍塌</title>
    <style>
        /*4.伪元素默认添加的是行内标签和内联标签，推荐：before和after*/
        .box:after{
            /*width: 500px;
            height: 500px;*/
            /*border: 2px solid red;*/
            /*2.超出的尺寸和内容都会被隐藏掉，不推荐
            overflow: hidden;*/

            /*行内元素不能设置宽高，使用block设置*/
            display: block;
            /*清除左右浮动*/
            clear: both;
            /*内容：为空*/
            content: "";
        }
        .box-son{
            width: 100px;
            height: 100px;
        }
        .box1{
            background-color: green;
            /*右浮动*/
            /*float: right;*/
            /*左浮动*/
            float: left;
        }
        .box2{
            background-color: blue;
            float: left;
        }
        .box3{
            background-color: plum;
            float: left;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="box-son box1"></div>
    <div class="box-son box2"></div>
    <div class="box-son box3"></div>
    <!--3.一旦页面布局浮动很多就需要添加很多的空div（无作用），不推荐
    <div class="box-son box4"></div>-->
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位</title>
    <style>
        .box1{
            width: 300px;
            height: 300px;
            background-color: plum;
            /*静态定位*/
            /*position: static;*/
            position: relative;
            margin-bottom: 10px;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: cornflowerblue;

            /*相对定位：以本身原来的位置为参照对象（top right left bottom）*/
            /*position: relative;
            top: 50px;*/

           /* 绝对定位（使用：父相子绝）：
            1.当‘父级’没有定位时，以浏览器为参考对象
            2.当‘父级’（祖先元素）有定位时，以父级元素为参考对象发生位置改变
            会脱离文档流，不占据底下位置*/
            /*position: absolute;
            top: 200px;*/

            /*固定定位（作为小广告）：以浏览器作为参照对象*/
            position: fixed;
            bottom: 50px;
            right: 50px;
        }
    </style>
</head>
<body>
<div class="box1">
    <div class="box2"></div>

</div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
</body>
</html>

ps 三个小方块覆盖在一起了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层级</title>
    <style>
        ul{
            list-style: none;
            position: relative;
        }
        ul>li{
            width: 100px;
            height: 100px;
            position: absolute;
        }
        .li1{
            background-color: cornflowerblue;
            /*默认为0*/
            z-index: 1;
        }
        .li2{
            background-color: plum;
            z-index: 2;
        }
        .li3{
            background-color: green;
            z-index: 1;
        }
    </style>
</head>
<body>
<ul>
    <li class="li1"></li>
    <li class="li2"></li>
    <li class="li3"></li>
</ul>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>重置样式</title>
<!--    https://meyerweb.com/eric/tools/css/reset/-->
    <link rel="stylesheet" href="css/reset.css">
</head>
<body>

</body>
</html>

Zhang_2002_GZ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS-2:练习

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>盒子模型--边框</title> <style> div{ width: 300px; height: 300px; /*复合边框*/ /*b...
复制链接

扫一扫