CSS学习的第3天

最新推荐文章于 2020-11-03 11:57:21 发布

Labef_Peppa

最新推荐文章于 2020-11-03 11:57:21 发布

阅读量171

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/N374471906/article/details/108783132

版权

笔记专栏收录该内容

6 篇文章 1 订阅

订阅专栏

<!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>
        /* css第一句话，清楚默认内外边距 */
        *{
            padding: 0;
            margin: 0;
        }

        div.bord{
            width: 500px;
            height: 200px;
            /* border是边框， width是边框宽度，style是边框的类型，none没有，solid实线，dashed虚线 dotted点线*/
           /* border-width: 3px;
            border-style: solid;
            border-color: skyblue;  */
            /* 可简写如下 */
            border:3px solid skyblue;
            /* 若只需要上下左右部分有边框只需border-top上边框，border-bottom下边框，left right左右边框单独设置 */
            /* 如border-top：2px solid skyblue */

            /* padding表示内边距，也可用top bottom等来表述 */
            /* 复合写法四种padding: 20px表示上下左右都是20px */
            /* padding:10px 20px表示上下10px 左右20px */
            /* padding:10px 20px 30px表示上10 左右20 下30 */
            /* padding:10px 20px 30px 40px表示上右下左顺时针来描述 */
            /* margin外边距设置和padding是一模一样的 */

            /* 块级元素水平居中对齐：1.必须有宽度；2.左右外边距设置auto */
            /*margin-left: auto;
            margin-right: auto;*/
            /*或者直接上下为0左右auto*/
            margin:0 auto;


            /* text-align既可以让盒子内文字水平居中也可以让行内元素和行内块元素水平居中 */
            text-align: center;

            }
        
        div.bg{
            border:3px solid skyblue;
            width: 600px;
            height: 600px;
            background: url(../xiaoxin2.png) no-repeat;
            background-position: 50px 0;
        }

        div.inser{
            margin-top: 50px;
            border:3px solid skyblue;
            width: 500px;
            height: 600px;
            /* 设置图片位置可以有两种方法 */
            padding: 0 50px;
        }


            a.disp {
                display: inline-block;
                border:3px solid #fff;
                width: 100px;
                height: 100px;
                padding-top: 40px;
                padding-left: 10px;
                text-decoration:none;

            }

            a.disp:hover{
                text-decoration: none;
                border:3px solid orange;
            }
        
        div.father{
             margin-top: 50px; 
            width: 200px;
            height: 200px;
            background-color: skyblue;
            /* 嵌套的元素垂直外边距会被合并，子元素的外边距会直接让父元素也有 解决方案123 */
            /* 1.给父元素定义上边框 transparent透明*/
            /* border-top: 1px solid transparent;  */
            /* 2.给父亲一个padding值 */
            /* padding-top: 1px;   */
            /* 3.设置overfolw */
            /* overflow: hidden; */
        }

        div.son{
            width: 60px;
            height: 60px;
            background-color: green;
            margin-top:30px;
        }
    </style>
</head>
<body>
    <div class="bord">
        加油 <strong>你可以</strong>  <input type="text"  />
        
    </div>
    <a href="#" class="disp">点击有边框</a>


     <div class="bg">
    </div> 

    <div class="inser">
        <img src="../xiaoxin2.png"  />
    </div>


    <div class="father">
        <div class="son">


        </div>
    </div>
</body>
</html>

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

1.学习了边框：border包括边框的颜色，宽度，样式，连写方式可单独写（top，bottom等）
2.学习了内边距padding ，padding会撑开盒子，如果设置了宽，那么在设置padding的时候就有可能会撑开盒子，需要用相应的width去减掉两倍！！两倍的padding。盒子的实际大小=内容的高度（宽度）+上下（左右）内边距+上下（左右）边框

3.学习了外边距margin，外边距在涉及到块级盒子水平居中的时候需要有两点条件：①必须有宽度；②margin左右设置auto。外边距垂直会有塌陷，在盒子之间设置解决方案就是只给一个盒子添加外边距（要么添加上盒子的bottom，要么添加下盒子的top）。嵌套元素的垂直外边距合并有三种方案，具体见代码中注释
4.背景图片的插入和直接插入图片的区别：背景图片需要在css当中去用background-image:url()；添加，而直接插入图片用标签，并且在设置背景图片位置的时候用background-position:x,y;设置，插入图片的设置直接使用内边距padding即可，注意width变化减去相应值。