css笔记

1.边框：

①常用属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{

            width: 200px;                    #边框宽
            height: 200px;                   #边框高
            /*border-style: solid;*/         #边框样式
            /*border-color: red;*/           #边框颜色
            /*border-width: 10px;*/         
            border:10px solid red;
            border-radius: 50%;             #控制边框形状，是否为圆角         


            /*border-left-style: solid;*/      #左边框样式
            /*border-left-width: 10px;*/        #左边框宽度

            /*border-right-style: dashed;*/
            /*border-top-style: dashed;*/
            /*border-bottom-style: dashed;*/
            /*border-right-width: 5px;*/
            /*border-left:10px solid red;*/

        }


    </style>
</head>
<body>

<div>

</div>



</body>
</html>

2.display属性：

  div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            /*display: inline;  !* 将标签设置为内敛标签 *!*/
            /*display: inline-block;  !* 将标签设置为同时具备内敛和块级标签的一些特性,比如可以设置高度宽度,但是不独占一行 *!*/
            /*display: none;  !* 隐藏标签 ,并且不占用自己之前的空间*!*/

        }

3.盒子模型：

/*padding-top: 10px;*/
/*padding-left: 5px;*/
/*padding-right: 2px;*/
/*padding-bottom: 4px;*/
/*padding: 10px 20px;  !* 10px上下内边距 ,20px左右内边距 *!*/
/*padding: 10px 20px 5px 2px;  !* 10px上下内边距 ,20px左右内边距 *!*/
/*padding: 10px 20px 5px 0; !* 10px上下内边距 ,20px左右内边距 *!*/


 /*margin-top: 100px;*/
/*margin: 10px 20px;*/
margin: 10px 5px 6px 3px;

4.float：

①用来做布局的

   .c1{
            background-color: red;
            height: 100px;
            width: 100px;
            float: left;
        }
   .c2{
            background-color: blue;
            height: 100px;
            width: 100px;
            float: right;
        }
posted @ 2020-06-21 17:00  小凡2019  阅读(80)  评论(0)  编辑  收藏  举报